/* ==========================================================================
   Spectralogs Design System v2 -- "Trade Registry"
   Grounded in what this platform is: a business registry that verifies,
   matches, and connects -- like a modern chamber-of-commerce ledger.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500;600;700&display=swap');

:root {
    /* Color -- Light Mode (default). Blue/Purple/subtle-pink Spectralogs
       system, matching the official logo: Royal Blue primary, Deep
       Purple secondary, Pink used only as a sparing accent. */
    --paper: #EDEBFA;
    --paper-raised: #FFFFFF;
    --card: #FFFFFF;
    --ink: #111827;
    --ink-soft: #374151;
    --text-muted: #6B7280;
    --rule: #E5E7EB;
    --spectralogs-blue: #1E40AF;              /* primary action color -- deep royal/cobalt blue, from the logo */
    --spectralogs-blue-dark: #5B21B6;         /* hover state -- deep violet, from the logo */
    --spectralogs-blue-tint: rgba(30, 64, 175, 0.08);
    --brick: #EF4444;
    --brick-tint: rgba(239, 68, 68, 0.08);
    --gold: #A6791D;                 /* gold accent, darkened slightly for light-bg contrast */
    --gold-tint: rgba(166, 121, 29, 0.1);
    --steel: #6B7280;
    --steel-tint: rgba(107, 114, 128, 0.08);
    --success-green: #22C55E;
    --success-green-tint: rgba(34, 197, 94, 0.08);
    --link-blue: #1E40AF;

    /* ---- Semantic Spectralogs brand aliases (requirement #4) ----
       Same underlying values as above, exposed under the names the
       brand spec asks for, so both naming schemes work throughout the
       app without needing to touch every existing --spectralogs-blue reference. */
    --brand-primary: var(--spectralogs-blue);
    --brand-primary-dark: #1D4ED8;
    --brand-primary-light: #93C5FD;
    --brand-secondary: var(--spectralogs-blue-dark);
    --brand-purple: #4C1D95;
    --brand-purple-light: #A78BFA;
    --brand-accent: #A21CAF;          /* controlled deep magenta accent, per spec -- not used as a primary color anywhere */
    --bg-primary: var(--paper);
    --bg-secondary: var(--paper-raised);
    --surface: var(--card);
    --surface-elevated: var(--card);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-soft);
    --danger: var(--brick);
    --success: var(--success-green);
    --warning: #D97706;
    --warning-tint: rgba(217, 119, 6, 0.1);
    --input-bg: var(--paper-raised);
    --border: var(--rule);

    /* Scrollbar -- Light Mode */
    --scrollbar-track: #F5F7FB;
    --scrollbar-thumb: #1E40AF;
    --scrollbar-thumb-grad: linear-gradient(180deg, #1E40AF, #5B21B6);
    --scrollbar-thumb-hover: #1D4ED8;
    --scrollbar-thumb-active: #1E3A8A;

    /* Type -- Helvetica primary, per spec, with a sane fallback stack */
    --font-display: Helvetica, Arial, sans-serif;
    --font-body: Helvetica, Arial, sans-serif;
    --font-mono: 'Roboto Mono', monospace;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
    /* Color -- Dark Mode. Premium navy, not pure black. */
    --paper: #0B0920;
    --paper-raised: #151030;
    --card: #1C1740;
    --ink: #F8FAFC;
    --ink-soft: #E2E8F0;
    --text-muted: #CBD5E1;
    --rule: #334155;
    --spectralogs-blue: #3B5FC4;              /* primary action color -- deep royal blue, from the logo */
    --spectralogs-blue-dark: #6D28D9;         /* hover state -- rich violet, from the logo */
    --spectralogs-blue-tint: rgba(59, 95, 196, 0.14);
    --brand-purple: #B266F8;         /* brightened for dark-bg contrast -- verified 4.72:1 against --card */
    --brand-accent: #D946EF;         /* brightened for dark-bg contrast -- verified 4.67:1 against --card */
    --brick: #EF4444;
    --brick-tint: rgba(239, 68, 68, 0.14);
    --gold: #D4AF37;                 /* gold accent, brighter for dark-bg contrast */
    --gold-tint: rgba(212, 175, 55, 0.14);
    --warning: #F59E0B;              /* warning amber, brighter for dark-bg contrast */
    --warning-tint: rgba(245, 158, 11, 0.14);
    --steel: #94A3B8;
    --steel-tint: rgba(148, 163, 184, 0.14);
    --success-green: #22C55E;
    --success-green-tint: rgba(34, 197, 94, 0.14);
    --link-blue: #60A5FA;

    /* Scrollbar -- Dark Mode */
    --scrollbar-track: #131C2E;
    --scrollbar-thumb: #3B5FC4;
    --scrollbar-thumb-grad: linear-gradient(180deg, #6D28D9, #3B5FC4);
    --scrollbar-thumb-hover: #60A5FA;
    --scrollbar-thumb-active: #1E40AF;
}

/* Smooth theme transitions, per spec: ~250ms, no flashing between states */
body, .app-sidebar, .app-main, .card, .stat-card, .side-card, button, input, select, textarea,
.topbar, .topbar-simple, .admin-topbar, .admin-nav-btn, a {
    transition: background-color 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease);
}

* { box-sizing: border-box; }

/* ============================================================
   Global themed scrollbar -- applies everywhere automatically:
   page scroll, sidebar, modals, dropdowns, textareas, any
   overflow:auto/scroll container, current pages and future ones.
   Firefox uses scrollbar-color/scrollbar-width; everything else
   (Chrome, Edge, Brave, Opera, Safari) uses the ::-webkit- rules.
   Both read the same theme variables, so switching light/dark
   via the existing toggle updates scrollbars instantly, no reload.
   ============================================================ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-grad);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: background 200ms var(--ease);
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
*::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
}
*::-webkit-scrollbar-corner {
    background: var(--paper);
}

/* ============================================================
   Global horizontal-overflow safety net -- applies everywhere
   ============================================================ */
img, svg, video { max-width: 100%; height: auto; }
p, h1, h2, h3, h4, span, div, a, td, th, li {
    overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;
}
table { max-width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
table thead th {
    background: var(--spectralogs-blue-tint); color: var(--spectralogs-blue-dark);
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    text-align: left; padding: 11px 14px; border-bottom: 1.5px solid var(--rule);
    white-space: nowrap;
}
table tbody td {
    padding: 11px 14px; border-bottom: 1px solid var(--rule);
    color: var(--ink); font-size: 14px; vertical-align: middle;
}
table tbody tr:hover td { background: var(--paper-raised); }
table tbody tr:last-child td { border-bottom: none; }

/* ---------- Tabs (shared, branded -- was previously defined locally per-page with a neutral gray active state) ---------- */
.tab-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.tab-link { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 7px; text-decoration: none; color: var(--ink-soft); background: var(--paper-raised); border: 1px solid var(--rule); transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); }
.tab-link:hover { border-color: var(--spectralogs-blue); color: var(--spectralogs-blue-dark); }
.tab-link.active { background: linear-gradient(120deg, var(--spectralogs-blue), var(--brand-purple)); color: #fff; border-color: transparent; }
.app-shell, .app-main, .page, .form-shell, .home-layout, .home-inner-row {
    max-width: 100vw; overflow-x: hidden;
}
.home-inner-row { display: flex; justify-content: center; }
.home-center { width: 100%; max-width: 740px; }
button, input, select, textarea { max-width: 100%; }
button { word-break: normal; overflow-wrap: normal; }
/* .post-action-btn is used on <button>, <a>, AND <span> elements (Like is a
   button, Approach/View Profile are links, Comments is a span) -- only
   actual <button> tags were covered by the rule above, so the <a>/<span>
   versions were still inheriting word-break:break-word from the global
   safety net, causing "Approach" and "View Profile" to wrap character by
   character once their flex box got narrow. Explicit fix, not a guess. */
.post-action-btn { word-break: normal; overflow-wrap: normal; white-space: nowrap; }

html, body {
    font-family: var(--font-body);
    font-size: 17.5px;
    background: var(--paper);
    color: var(--ink);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-y: visible;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}

a { color: var(--link-blue); }

/* ---------- Layout shell ---------- */
.page { max-width: 1100px; margin: 0 auto; padding: 36px 28px 80px; }

.topbar {
    background: var(--paper-raised);
    color: var(--ink);
    padding: 26px 20px;
    border-bottom: 3px solid var(--spectralogs-blue);
}
.topbar .eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--spectralogs-blue); }
.topbar h1 { color: var(--ink); font-size: 28px; margin-top: 6px; }
.topbar .sub { color: var(--text-muted); font-size: 17.5px; margin-top: 4px; }

/* ---------- Section header -- hairline rule instead of a floating pill ---------- */
.section-header { display: flex; align-items: center; gap: 10px; margin: 34px 0 14px; padding-bottom: 8px; border-bottom: 1.5px solid var(--rule); }
.section-header h3 { font-family: var(--font-mono); font-size: 14px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); font-weight: 600; }
.pulse-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--spectralogs-blue); flex-shrink: 0; }
.pulse-dot::after {
    content: ''; position: absolute; inset: -5px; border-radius: 50%;
    border: 1.5px solid var(--spectralogs-blue); opacity: 0.5;
    animation: pulse-ring 2.6s var(--ease) infinite;
}
@keyframes pulse-ring { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } }

/* ---------- Cards -- ledger-entry feel: hairline border, flat, left rule accent on hover ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--rule);
    border-radius: 10px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 6px 16px rgba(0,0,0,0.2);
    transition: border-left-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.card + .card { margin-top: 12px; }

/* ---------- Card grids: for any section showing multiple equal-size cards
   side by side. The margin-top:0 override is necessary and not redundant --
   .card + .card above adds margin-top to every card except the first one
   in DOM order, which is meant for stacked list results, not grids. Left
   unscoped, that stray margin causes the first grid item to stretch to
   fill its full row height under the default grid "stretch" alignment
   while every following item (pushed down by that margin) has less room
   to stretch into -- producing a visibly larger first card and smaller
   remaining ones, exactly the symptom this fixes. ---------- */
.card-grid { display: grid; gap: 12px; }
.card-grid > .card { margin-top: 0; width: 100%; box-sizing: border-box; }
.card-grid-categories { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.card-grid-categories > .card { max-width: 220px; }
.card-grid-needs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid-businesses { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.card-grid-businesses > .card { max-width: 340px; }
@media (max-width: 900px) { .card-grid-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .card-grid-needs { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .card-grid-businesses { grid-template-columns: 1fr; } }
.card:hover { border-left-color: var(--spectralogs-blue); transform: translateX(2px); box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 10px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(30,64,175,0.2), 0 0 24px rgba(30,64,175,0.15); }

.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.card-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); }
.card-meta { color: var(--text-muted); font-size: 14.5px; margin-top: 3px; }

/* ---------- Score badge -- a registry "seal" instead of a shiny pill ---------- */
.score-badge {
    position: relative;
    font-family: var(--font-mono); font-weight: 600; font-size: 13px;
    color: var(--spectralogs-blue-dark); background: var(--spectralogs-blue-tint);
    border: 1px solid rgba(30,64,175,0.25);
    padding: 5px 12px; border-radius: 5px; white-space: nowrap;
    animation: score-glow 2.8s ease-in-out infinite;
}
@keyframes score-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30,64,175,0); }
    50% { box-shadow: 0 0 10px 1px rgba(30,64,175,0.25); }
}

/* ---------- Reason tags ---------- */
.reasons { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
.reason-tag { background: var(--paper); border: 1px solid var(--rule); color: var(--ink-soft); font-size: 13px; font-weight: 500; padding: 3px 10px; border-radius: 4px; }

/* ---------- Buttons -- solid, no shine, confident weight ---------- */
.btn {
    position: relative; overflow: hidden;
    display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 16px;
    color: #FFFFFF; background: linear-gradient(120deg, var(--spectralogs-blue) 0%, var(--brand-purple) 100%); border: none;
    padding: 13px 22px; border-radius: 7px; cursor: pointer; width: 100%; text-align: center;
    transition: background 160ms var(--ease), transform 160ms var(--ease), box-shadow 200ms var(--ease);
}
.btn:hover { background: linear-gradient(120deg, var(--spectralogs-blue-dark) 0%, var(--brand-purple) 100%); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(76,29,149,0.35); }
.btn:active { transform: translateY(0); }
.btn::after {
    content: ''; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-20deg); transition: left 550ms var(--ease);
}
.btn:hover::after { left: 130%; }

/* ---------- Form elements ---------- */
label { display: block; margin-top: 15px; font-weight: 600; font-size: 13.5px; color: var(--ink-soft); }
.row2 { display: flex; gap: 16px; }
.row2 > div { flex: 1; min-width: 0; }
@media (max-width: 768px) {
    .row2 { flex-direction: column; gap: 0; }
}

input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], select, textarea {
    width: 100%; padding: 11px 12px; margin-top: 6px;
    border: 1.5px solid var(--rule); border-radius: 6px;
    font-family: var(--font-body); font-size: 17.5px; color: var(--ink);
    background: var(--paper-raised);
    transition: border-color 160ms var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--spectralogs-blue); }
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.checklist label { font-weight: 400; font-size: 14px; margin-top: 0; display: flex; align-items: center; gap: 7px; color: var(--ink); }

/* ---------- Alerts ---------- */
.alert { padding: 12px 16px; border-radius: 6px; font-size: 14.5px; margin-top: 16px; border: 1px solid; }
.alert-error { background: var(--brick-tint); color: var(--brick); border-color: rgba(140,59,46,0.25); }
.alert-success { background: var(--spectralogs-blue-tint); color: var(--spectralogs-blue-dark); border-color: rgba(30,64,175,0.25); }

.empty { color: var(--text-muted); font-style: italic; font-size: 14px; margin-top: 10px; }

/* ---------- Tier badges -- registry seals ---------- */
.tier-badge { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; border: 1px solid; }
.tier-free { background: var(--success-green-tint); color: var(--success-green); border-color: rgba(52,211,153,0.3); }
.tier-platinum { background: var(--steel-tint); color: var(--steel); border-color: rgba(76,91,102,0.25); }
.tier-gold { background: var(--gold-tint); color: var(--gold); border-color: rgba(212,175,55,0.3); }
.tier-diamond { background: var(--card); color: var(--spectralogs-blue); border-color: var(--spectralogs-blue); }
.tier-premium { background: var(--gold-tint); color: var(--gold); border-color: rgba(212,175,55,0.3); }
@keyframes tier-shimmer { 0% { left: -100%; } 40% { left: 140%; } 100% { left: 140%; } }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
:focus-visible { outline: 2px solid var(--spectralogs-blue); outline-offset: 2px; }

@media (max-width: 560px) {
    .checklist { grid-template-columns: 1fr; }
    .topbar h1 { font-size: 23px; }
}

/* ---------- Legacy compatibility: simple centered form pages ---------- */
body.simple-page { padding: 44px 0; }
.form-box {
    max-width: 440px; margin: 0 auto;
    background: var(--paper-raised); padding: 30px;
    border-radius: 8px; border: 1px solid var(--rule);
}
.form-box h2 { font-family: var(--font-display); margin-top: 0; font-size: 23px; }
.form-box .step {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--spectralogs-blue); font-weight: 600;
}
.form-box button, .form-box button[type="submit"] {
    position: relative; overflow: hidden;
    margin-top: 22px; width: 100%; padding: 13px 22px;
    background: var(--spectralogs-blue); color: var(--paper); border: none; border-radius: 7px;
    font-family: var(--font-body); font-weight: 600; font-size: 16px; cursor: pointer;
    transition: background 160ms var(--ease), transform 160ms var(--ease), box-shadow 200ms var(--ease);
}
.form-box button:hover { background: var(--spectralogs-blue-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(30,64,175,0.35); }
.form-box button::after {
    content: ''; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-20deg); transition: left 550ms var(--ease);
}
.form-box button:hover::after { left: 130%; }
.form-box .error { background: var(--brick-tint); color: var(--brick); border: 1px solid rgba(140,59,46,0.25); padding: 12px 16px; border-radius: 6px; margin-top: 16px; font-size: 14.5px; }
.form-box .success { background: var(--spectralogs-blue-tint); color: var(--spectralogs-blue-dark); border: 1px solid rgba(30,64,175,0.25); padding: 12px 16px; border-radius: 6px; margin-top: 16px; font-size: 14.5px; }
.form-box .warning { background: var(--warning-tint); color: var(--warning); border: 1px solid rgba(217,119,6,0.3); padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 13px;; font-weight: 600; }
.form-box .hint { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.form-box .divider { border-top: 1px solid var(--rule); margin: 22px 0; }
.form-box h4 { font-family: var(--font-display); font-size: 16px; margin-bottom: 4px; color: var(--ink-soft); }
.link { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-muted); }

.message { background: var(--spectralogs-blue-tint); color: var(--spectralogs-blue-dark); border: 1px solid rgba(30,64,175,0.25); padding: 12px 16px; border-radius: 6px; margin-bottom: 18px; font-size: 14.5px; }
.plan-box { max-width: 700px; margin: 0 auto 14px; }

.navbar-company .name { font-family: var(--font-display); font-weight: 700; font-size: 18.5px; color: #fff; line-height: 1.2; }
.navbar-company .tier { font-family: var(--font-mono); font-size: 22px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--spectralogs-blue); font-weight: 700; margin-top: 2px; }

.icon-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: rgba(255,255,255,0.8); text-decoration: none; transition: background 160ms var(--ease), color 160ms var(--ease); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.avatar { width: 38px; height: 38px; border-radius: 9px; background: var(--spectralogs-blue); color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 22px; display: flex; align-items: center; justify-content: center; }

/* ---------- Horizontal company card rail ---------- */
.rail { display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-grad); border-radius: 10px; }
.rail::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 10px; }
.rail-card { flex: 0 0 auto; width: 220px; scroll-snap-align: start; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 8px; padding: 18px; box-shadow: 0 1px 3px rgba(28,27,24,0.06), 0 6px 16px rgba(28,27,24,0.04); transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease); display: flex; flex-direction: column; }
.rail-card:hover { border-color: var(--spectralogs-blue); transform: translateY(-3px); box-shadow: 0 4px 10px rgba(28,27,24,0.1), 0 14px 28px rgba(28,27,24,0.08), 0 0 18px rgba(30,64,175,0.18); }
.rail-logo { width: 40px; height: 40px; border-radius: 6px; background: var(--spectralogs-blue); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.rec-card-header-row .rail-logo { margin-bottom: 0; flex-shrink: 0; }
.rail-name { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.rail-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.rail-reason { font-size: 11px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--rule); padding: 3px 8px; border-radius: 4px; display: inline-block; margin-top: 10px; }
.rail-approach { display: block; text-align: center; margin-top: 12px; padding: 8px; border-radius: 5px; background: var(--spectralogs-blue); color: #fff; font-size: 13px;; font-weight: 600; text-decoration: none; transition: background 160ms var(--ease); }
.rail-approach:hover { background: var(--spectralogs-blue-dark); }

/* ==========================================================================
   Full-screen layouts -- nothing floats alone in empty space anymore
   ========================================================================== */

/* ---------- Auth shell: true split-screen for pages with no nav (Register step 1, Log in) ---------- */
body.auth-page { margin: 0; padding: 0; min-height: 100vh; display: flex; }
.auth-branding {
    flex: 1 1 44%;
    min-height: 100vh;
    background-color: #0B0920;
    background-image: radial-gradient(rgba(30,64,175,0.35) 1px, transparent 1px);
    background-size: 22px 22px;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 44px 48px;
    position: relative;
}
.auth-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 23px; color: #fff; position: relative; z-index: 1; }
.auth-brand-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--spectralogs-blue); margin-top: 4px; position: relative; z-index: 1; }
.auth-brand-copy { position: relative; z-index: 1; }
.auth-brand-copy h2 { color: #fff; font-size: 34px; line-height: 1.25; max-width: 380px; }
.auth-brand-copy p { color: rgba(255,255,255,0.6); font-size: 14px; margin-top: 14px; max-width: 340px; line-height: 1.6; }
.auth-stats { display: flex; gap: 26px; position: relative; z-index: 1; }
.auth-stats div { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; }
.auth-stats strong { display: block; font-family: var(--font-display); font-size: 24px; color: var(--spectralogs-blue); font-weight: 700; text-transform: none; letter-spacing: 0; margin-top: 4px; }

.auth-form-side { flex: 1 1 56%; display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--paper); }
.auth-form-side .form-box { width: 100%; max-width: 420px; box-shadow: 0 2px 6px rgba(28,27,24,0.06), 0 16px 40px rgba(28,27,24,0.06); }

@media (max-width: 860px) {
    body.auth-page { flex-direction: column; }
    .auth-branding { flex: 0 0 auto; min-height: 200px; padding: 30px; }
    .auth-brand-copy h2 { font-size: 24px; }
    .auth-stats { display: none; }
    .auth-form-side { padding: 30px 20px; }
}

/* ---------- In-flow form pages (Steps 2-11): full-width shell with a progress side panel ---------- */
.form-shell { max-width: 1100px; margin: 0 auto; padding: 40px 28px 80px; display: flex; gap: 40px; align-items: flex-start; }
.form-shell .form-box { flex: 1 1 480px; max-width: 480px; margin: 0; box-shadow: 0 1px 3px rgba(28,27,24,0.06), 0 10px 26px rgba(28,27,24,0.05); }
.form-progress { flex: 1 1 400px; padding-top: 6px; }
.form-progress-title { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 16px; }
.form-progress-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.form-progress-num {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    background: var(--rule); color: var(--text-muted);
}
.form-progress-item.done .form-progress-num { background: var(--success-green); color: #fff; }
.form-progress-item.current .form-progress-num { background: var(--card); color: var(--spectralogs-blue); border: 1px solid var(--spectralogs-blue); }
.form-progress-item span.label { font-size: 13.5px; color: var(--ink-soft); font-weight: 500; }
.form-progress-item.current span.label { color: var(--ink); font-weight: 700; }
.form-progress-item.done span.label { color: var(--text-muted); }
.status-tag.status-done { background: var(--success-green-tint); color: var(--success-green); }
.status-tag.status-current { background: var(--spectralogs-blue-tint); color: var(--spectralogs-blue-dark); }
.status-tag.status-pending { background: var(--paper-raised); color: var(--text-muted); border: 1px solid var(--rule); }

.status-tag { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 5px; }

/* ============================================================
   Social Feed components -- home.php
   ============================================================ */

/* ---- Circular avatar, used throughout the feed (distinct from the square rail-logo used in business directories) ---- */
.feed-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--spectralogs-blue); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; object-fit: cover; }
.feed-avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: var(--spectralogs-blue); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; object-fit: cover; }

/* ---- Stories-style active network strip ---- */
.stories-strip { display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 16px; margin-bottom: 6px; }
.story-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; text-decoration: none; width: 68px; }
.story-ring { width: 62px; height: 62px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--spectralogs-blue), var(--spectralogs-blue-dark)); display: flex; align-items: center; justify-content: center; }
.story-ring-inner { width: 100%; height: 100%; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 2px; }
.story-ring-inner .feed-avatar { width: 100%; height: 100%; font-size: 22px; }
.story-item span { font-size: 11px; font-weight: 600; color: var(--ink-soft); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

/* ---- Composer box ---- */
.composer { display: flex; align-items: center; gap: 12px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 14px; padding: 14px 18px; margin-bottom: 22px; box-shadow: 0 1px 3px rgba(28,27,24,0.05); text-decoration: none; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.composer:hover { border-color: var(--spectralogs-blue); box-shadow: 0 4px 14px rgba(30,64,175,0.1); }
.composer-input { flex: 1; background: var(--paper); border: 1px solid var(--rule); border-radius: 22px; padding: 11px 18px; color: var(--text-muted); font-size: 15px; }
.composer-icon { color: var(--spectralogs-blue); flex-shrink: 0; }

/* ---- Post card ---- */
.post-card { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 16px; padding: 18px 20px; margin: 0 auto 20px; max-width: 600px; transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
.post-card:hover { box-shadow: 0 6px 20px rgba(28,27,24,0.09); border-color: var(--spectralogs-blue); }
.post-header { display: flex; align-items: center; gap: 12px; }
.post-header-name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); text-decoration: none; }
.post-header-time { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.post-content { margin-top: 16px; font-size: 15.5px; color: var(--ink-soft); line-height: 1.65; white-space: pre-wrap; }
.post-media { width: 100%; max-width: 100%; margin: 14px 0 0; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); }
.post-image { width: 100%; height: auto; max-width: 100%; max-height: 520px; min-height: 160px; object-fit: contain; display: block; }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.post-tag { font-size: 13px; font-weight: 600; color: var(--spectralogs-blue-dark); }
.post-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 4px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); }
.post-action-btn { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; white-space: nowrap; background: none; border: none; cursor: pointer; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); transition: background 160ms var(--ease), color 160ms var(--ease); }
@media (max-width: 480px) {
    .post-actions { flex-wrap: wrap; gap: 4px 8px; }
    .post-action-btn { padding: 8px 8px; font-size: 13px; }
}
.post-action-btn:hover { background: var(--paper); color: var(--ink); }
.post-action-btn.liked { color: var(--spectralogs-blue-dark); }
.post-action-btn.approach:hover { color: var(--link-blue); }

/* ---- Sidebar cards (left/right columns) ---- */

/* ---------- Rail carousel nav arrows -- desktop/tablet only ---------- */
.rail-wrap { position: relative; }
.rail-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--card); border: 1.5px solid var(--spectralogs-blue);
    color: var(--spectralogs-blue); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 20; transition: background 160ms var(--ease), opacity 160ms var(--ease);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.rail-nav-btn:hover { background: var(--spectralogs-blue); color: #FFFFFF; }
.rail-nav-prev { left: -6px; }
.rail-nav-next { right: -6px; }
.rail-nav-btn.hidden { display: none; }
@media (max-width: 900px) {
    .rail-nav-btn { display: none !important; }
}

/* ---------- Membership plan selection cards ---------- */
.plan-card {
    display: block; position: relative; cursor: pointer;
    background: var(--card); border: 1.5px solid var(--rule); border-radius: 12px;
    padding: 18px 20px; margin-bottom: 12px;
    transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.plan-card:hover { border-color: var(--spectralogs-blue); transform: translateY(-2px); }
.plan-card:has(input:checked) {
    border-color: var(--spectralogs-blue);
    box-shadow: 0 0 0 1px var(--spectralogs-blue), 0 8px 24px rgba(30,64,175,0.15);
    background: linear-gradient(135deg, var(--card), rgba(30,64,175,0.07));
}
.plan-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.plan-price { font-family: var(--font-mono); font-weight: 700; color: var(--ink); margin-left: 8px; }
.plan-price-free {
    color: var(--success-green); background: var(--success-green-tint);
    padding: 3px 10px; border-radius: 5px; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.03em;
}

/* ---------- Reusable polished empty state ---------- */
.empty-state { text-align: center; padding: 44px 24px; }
.empty-state-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--spectralogs-blue-tint); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--spectralogs-blue-dark); }
.empty-state-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.empty-state-text { margin-top: 8px; font-size: 14px; color: var(--text-muted); max-width: 380px; margin-left: auto; margin-right: auto; line-height: 1.6; }

/* ============================================================
   App shell -- sidebar is the single navigation source, every page
   Sidebar is position:fixed (removed from document flow) so the
   WHOLE PAGE scrolls as one under it -- single scrollbar, no
   internal sidebar scroll, sidebar always fills the full viewport.
   ============================================================ */
.app-shell { min-height: 100vh; }
.app-sidebar {
    position: fixed; top: 0; left: 0; width: 270px; height: 100vh;
    background: var(--paper); border-right: 1px solid var(--rule);
    padding: 20px 14px; display: flex; flex-direction: column;
    z-index: 50;
    overflow-y: auto;
}
.app-main { margin-left: 270px; padding: 24px 28px 80px; }
.app-main .page { max-width: 900px; margin: 0; padding: 0; }

.brand-header { display: flex; align-items: center; gap: 8px; padding: 4px 4px 20px; text-decoration: none; }
.brand-header .name { font-family: var(--font-display); font-weight: 900; font-size: 25px; color: var(--ink); white-space: nowrap; }
.side-profile { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--paper-raised); border: 1.5px solid var(--rule); border-radius: 12px; margin-bottom: 18px; text-decoration: none; }
.side-profile-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.side-profile-category { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.side-profile-sub { font-size: 12px; color: var(--spectralogs-blue-dark); font-weight: 600; margin-top: 2px; }
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-nav-section-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 14px 12px 4px; }
.side-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--ink-soft); font-size: 14px; font-weight: 600; transition: background 160ms var(--ease); white-space: nowrap; }
.nav-item-badge { background: var(--brick); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; margin-left: auto; }
.side-nav a:hover, .side-nav a.active { background: var(--spectralogs-blue-tint); color: var(--spectralogs-blue-dark); }
.side-nav a svg { flex-shrink: 0; width: 19px; height: 19px; }

/* ---------- Mobile top bar (hidden on desktop) ---------- */
.mobile-topbar { display: none; }

.sidebar-close { display: none; }
.sidebar-backdrop { display: none; }
.mobile-tabbar { display: none; }

@media (max-width: 900px) {
    .mobile-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 60; }
    .mobile-header-bell { position: relative; display: flex; align-items: center; color: var(--ink-soft); }
    .mobile-header-bell-badge { position: absolute; top: -6px; right: -8px; background: var(--brick); color: #fff; font-size: 9.5px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
    .mobile-header-hamburger { background: none; border: none; color: var(--ink-soft); display: flex; align-items: center; padding: 0; cursor: pointer; transition: color 160ms var(--ease); }
    .mobile-header-hamburger:hover { color: var(--spectralogs-blue); }
    .app-sidebar {
        width: 270px;
        transform: translateX(-100%); transition: transform 220ms var(--ease);
        z-index: 100; box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    }
    .app-sidebar.open { transform: translateX(0); }
    .sidebar-close { display: block; position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 26px; line-height: 1; color: var(--text-muted); cursor: pointer; }
    .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease); z-index: 90; }
    .sidebar-backdrop.visible { opacity: 1; pointer-events: auto; }
    .app-main { margin-left: 0; padding: 20px 16px 86px; }

    /* ---------- Bottom tab bar -- primary destinations, always thumb-reachable ---------- */
    .mobile-tabbar {
        display: flex; align-items: center; justify-content: space-around;
        position: fixed; bottom: 0; left: 0; right: 0; height: 62px;
        background: var(--paper-raised); border-top: 1px solid var(--rule);
        z-index: 70; padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .mobile-tab {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        color: var(--text-muted); text-decoration: none; font-size: 10px; font-weight: 600;
        background: none; border: none; cursor: pointer; padding: 6px 10px; position: relative;
    }
    .mobile-tab.active { color: var(--spectralogs-blue); }
    .mobile-tab-post {
        background: var(--spectralogs-blue); color: var(--paper);
        width: 44px; height: 44px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 14px rgba(30,64,175,0.4);
    }
    .mobile-tab-badge {
        position: absolute; top: 2px; right: 4px; background: var(--spectralogs-blue); color: #fff;
        font-size: 9px; font-weight: 700; width: 15px; height: 15px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);
    }
}

/* ============================================================
   Global responsive refinement -- 768px and 480px breakpoints
   Applies site-wide via shared classes, so every page inherits
   this automatically without per-page fixes.
   ============================================================ */
@media (max-width: 768px) {
    .card-top { flex-wrap: wrap; }
    .page { padding: 24px 18px 60px; }
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
}

@media (max-width: 480px) {
    .page { padding: 18px 14px 60px; }
    .card, .stat-card, .side-card { padding: 14px 16px; }
    h1 { font-size: 21px; }
    h2 { font-size: 18px; }
    .rail-card { width: 180px; }
    .story-item { width: 60px; }
    .brand-header .name { font-size: 20px; }
}

/* ---------- Shared admin navbar -- consistent buttons across every admin page ---------- */
.admin-topbar { background: var(--card); border-bottom: 1px solid var(--rule); padding: 16px 24px; margin-bottom: 28px; }
.admin-topbar-inner { max-width: 1300px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.admin-brand { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--ink); }
.admin-brand span { color: var(--spectralogs-blue); font-weight: 700; }
.admin-nav-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-nav-btn {
    font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
    padding: 8px 14px; border-radius: 7px; text-decoration: none;
    background: var(--paper-raised); color: var(--ink-soft); border: 1px solid var(--rule);
    transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
    white-space: nowrap;
}
.admin-nav-btn:hover { border-color: var(--spectralogs-blue); color: var(--spectralogs-blue); }
.admin-nav-btn.active { background: var(--spectralogs-blue); color: #FFFFFF; border-color: var(--spectralogs-blue); }
.admin-nav-logout { color: var(--brick); border-color: rgba(229,72,77,0.3); }
.admin-nav-logout:hover { background: var(--brick); color: #fff; border-color: var(--brick); }
@media (max-width: 900px) {
    .admin-topbar-inner { flex-direction: column; align-items: flex-start; }
    .admin-nav-buttons { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
}

/* ---------- Inline approach message box (no popup) ---------- */
#approachBox .approach-inline-form { display: none; margin-top: 10px; width: 280px; }
#approachBox.open .approach-inline-form { display: block; }
#approachBox.open > button { display: none; }
#approachBox textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--rule); border-radius: 7px; font-family: var(--font-body); font-size: 14px; resize: vertical; background: var(--card); color: var(--ink); }

/* ---------- Dashboard welcome section + summary stat cards ---------- */
.welcome-banner { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.welcome-subtitle { font-size: 15px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.welcome-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); margin-top: 4px; }

.score-ring-wrap { position: relative; width: 86px; height: 86px; flex-shrink: 0; }
.score-ring-progress { transition: stroke-dashoffset 1200ms cubic-bezier(0.22, 1, 0.36, 1); }
.score-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-ring-value { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); }
.score-ring-sub { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-top: -2px; }

.dash-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.dash-stat-card {
    background: var(--card); border: 1px solid var(--rule); border-radius: 16px;
    padding: 18px; position: relative; overflow: hidden;
    transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.dash-stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--spectralogs-blue), var(--spectralogs-blue-dark));
}
.dash-stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.1); border-color: var(--spectralogs-blue); }
.dash-stat-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--spectralogs-blue-tint); color: var(--spectralogs-blue);
    display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.dash-stat-value { font-family: var(--font-display); font-size: 27px; font-weight: 700; color: var(--ink); }
.dash-stat-label { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 700px) {
    .dash-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .welcome-title { font-size: 21px; }
    .dash-stat-card { padding: 12px; border-radius: 12px; }
    .dash-stat-top-row { display: flex; align-items: center; gap: 8px; }
    .dash-stat-icon { width: 30px; height: 30px; border-radius: 8px; margin-bottom: 0; flex-shrink: 0; }
    .dash-stat-icon svg { width: 16px; height: 16px; }
    .dash-stat-value { font-size: 19px; }
    .dash-stat-label { font-size: 11.5px; margin-top: 4px; }
}
.approach-box-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; align-items: start; }
.approach-box-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 14px; }
.approach-box label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.approach-box textarea, .approach-box input { width: 100%; box-sizing: border-box; }
.approach-box textarea { resize: vertical; }
@media (max-width: 768px) {
    .approach-box-row { grid-template-columns: 1fr; }
    .approach-box-row-3 { grid-template-columns: 1fr; }
}

/* ---------- Profile page hero card ---------- */
.profile-hero-card {
    background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--spectralogs-blue);
    border-radius: 14px; padding: 26px 28px; margin: 24px 0 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    animation: profile-hero-in 500ms var(--ease) backwards;
}
@keyframes profile-hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Scroll-reveal animation ---------- */
.reveal-init { opacity: 0; transform: translateY(18px); }
.reveal-visible { opacity: 1; transform: translateY(0); transition: opacity 550ms var(--ease), transform 550ms var(--ease); }

/* ---------- Image lightbox ---------- */
.lightbox-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.9);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 500; opacity: 0; pointer-events: none;
    transition: opacity 220ms var(--ease);
    padding: 40px 20px;
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-img { max-width: 90vw; max-height: 80vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox-caption { color: #fff; margin-top: 16px; font-size: 15px; max-width: 600px; text-align: center; line-height: 1.5; }
.lightbox-close {
    position: absolute; top: 20px; right: 24px; width: 42px; height: 42px;
    border-radius: 50%; background: rgba(255,255,255,0.1); border: none;
    color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 160ms var(--ease);
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* ---------- Trust/premium components -- shared across profile, network, matches, notifications, search ---------- */
.availability-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.verified-contact-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--success-green-tint); color: var(--success-green); font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; margin-right: 6px; white-space: nowrap; }
.copy-icon-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; display: inline-flex; align-items: center; vertical-align: middle; transition: color 140ms var(--ease); }
.copy-icon-btn:hover { color: var(--spectralogs-blue); }
.copy-icon-btn.copied { color: var(--success-green); }

/* ============================================================
   Post management: 3-dot menu, modals -- shared everywhere posts appear
   ============================================================ */
.post-menu-wrap { position: relative; margin-left: auto; }
.post-menu-trigger { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; padding: 4px 8px; border-radius: 6px; transition: background 140ms var(--ease), color 140ms var(--ease); }
.post-menu-trigger:hover { background: var(--paper-raised); color: var(--ink); }
.post-menu-dropdown {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 80;
    background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.2); min-width: 190px; padding: 6px;
    opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none;
    transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.post-menu-dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.post-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; padding: 9px 12px; border-radius: 8px;
    font-size: 13.5px; color: var(--ink); cursor: pointer; transition: background 120ms var(--ease);
    text-decoration: none;
}
.post-menu-item:hover { background: var(--spectralogs-blue-tint); color: var(--spectralogs-blue); }
.post-menu-item.danger:hover { background: var(--brick-tint); color: var(--brick); }
.post-menu-divider { height: 1px; background: var(--rule); margin: 5px 4px; }
.post-pinned-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--brand-purple-tint, rgba(76,29,149,0.1)); color: var(--brand-purple); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }

/* Modal backdrop, shared by delete-confirm / edit / share / insights */
.post-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 200;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease);
}
.post-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.post-modal-box {
    background: var(--card); border-radius: 16px; padding: 26px; max-width: 420px; width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35); transform: scale(0.96); transition: transform 200ms var(--ease);
}
.post-modal-backdrop.open .post-modal-box { transform: scale(1); }
.post-modal-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); }
.post-modal-text { font-size: 13.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
.post-modal-actions { display: flex; gap: 10px; margin-top: 22px; justify-content: flex-end; }
.post-modal-actions button { padding: 11px 20px; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: none; }
.post-modal-btn-cancel { background: var(--paper-raised); color: var(--ink-soft); border: 1px solid var(--rule) !important; }
.post-modal-btn-danger { background: var(--brick); color: #fff; }
.post-modal-textarea { width: 100%; min-height: 100px; margin-top: 14px; padding: 10px 12px; border: 1.5px solid var(--rule); border-radius: 8px; font-family: var(--font-body); font-size: 14px; background: var(--paper); color: var(--ink); resize: vertical; }
.post-share-options { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.post-insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.post-insights-stat { background: var(--paper-raised); border-radius: 10px; padding: 14px; text-align: center; }
.post-insights-value { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); }
.post-insights-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 500px) { .post-menu-dropdown { right: 0; left: auto; } }

/* ---------- Bottom sheet (Create button) ---------- */
.sheet-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 150;
    opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease);
}
.sheet-backdrop.visible { opacity: 1; pointer-events: auto; }
.bottom-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 151;
    background: var(--card); border-radius: 20px 20px 0 0;
    padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
    transform: translateY(100%); transition: transform 220ms var(--ease);
    max-width: 480px; margin: 0 auto;
}
.bottom-sheet.open { transform: translateY(0); }
.bottom-sheet-handle { width: 36px; height: 4px; background: var(--rule); border-radius: 4px; margin: 6px auto 14px; }
.bottom-sheet-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.bottom-sheet-option {
    display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-radius: 12px;
    text-decoration: none; transition: background 160ms var(--ease); min-height: 44px;
}
.bottom-sheet-option:hover { background: var(--paper-raised); }
.bottom-sheet-option-icon { font-size: 22px; width: 40px; height: 40px; background: var(--spectralogs-blue-tint); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bottom-sheet-option-label { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.bottom-sheet-option-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

/* ---------- Mobile drawer as a bottom sheet on very small devices ---------- */
@media (max-width: 380px) {
    .app-sidebar {
        left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 80vh;
        border-radius: 20px 20px 0 0; border-right: none; border-top: 1px solid var(--rule);
        transform: translateY(100%);
    }
    .app-sidebar.open { transform: translateY(0); }
}


/* ============================================================
   Help & Support module -- shared across help.php, faq.php,
   support.php, report_bug.php, feature_request.php,
   getting_started.php, ticket_history.php
   ============================================================ */
.support-hub-header { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.support-hub-icon {
    width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--spectralogs-blue-tint), rgba(76,29,149,0.14));
    color: var(--brand-purple); display: flex; align-items: center; justify-content: center; font-size: 26px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.support-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; margin-top: 24px; }
.support-card {
    display: block; background: var(--card); border: 1px solid var(--rule); border-radius: 16px;
    padding: 26px; text-decoration: none; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.support-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(0,0,0,0.16), 0 0 0 1px rgba(76,29,149,0.15); border-color: var(--brand-purple); }
.support-card-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--spectralogs-blue-tint); color: var(--spectralogs-blue); display: flex; align-items: center; justify-content: center; font-size: 27px; margin-bottom: 16px; transition: background 200ms var(--ease), color 200ms var(--ease); }
.support-card:hover .support-card-icon { background: rgba(76,29,149,0.12); color: var(--brand-purple); }
.support-card-title { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--ink); }
.support-card-desc { font-size: 13.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.55; }

/* FAQ accordion */
.faq-item { border: 1px solid var(--rule); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.faq-question {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; text-align: left; background: var(--card); border: none; cursor: pointer;
    padding: 16px 18px; font-size: 14.5px; font-weight: 600; color: var(--ink);
    transition: background 160ms var(--ease);
}
.faq-question:hover { background: var(--paper-raised); }
.faq-question:focus-visible { outline: 2px solid var(--spectralogs-blue); outline-offset: -2px; }
.faq-chevron { transition: transform 200ms var(--ease); color: var(--text-muted); flex-shrink: 0; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 220ms var(--ease); background: var(--paper-raised); }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer-inner { padding: 4px 18px 18px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }

/* Ticket status badges */
.ticket-status-open { background: var(--warning-tint); color: var(--warning); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.ticket-status-progress { background: rgba(30,64,175,0.14); color: var(--link-blue); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.ticket-status-waiting { background: var(--warning-tint); color: var(--warning); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.ticket-status-resolved { background: var(--success-green-tint); color: var(--success-green); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.ticket-status-closed { background: var(--steel-tint); color: var(--steel); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }

/* ---------- Ticket attachment upload widget ---------- */
.upload-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 32px 20px; border: 2px dashed var(--rule); border-radius: 14px;
    background: var(--paper-raised); cursor: pointer; text-align: center;
    transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.upload-dropzone:hover, .upload-dropzone.dragover { border-color: var(--spectralogs-blue); background: var(--spectralogs-blue-tint); }
.upload-dropzone-icon { font-size: 30px; opacity: 0.7; }
.upload-dropzone-text { font-size: 13.5px; color: var(--ink-soft); }
.upload-browse-btn { background: var(--spectralogs-blue); color: #fff; border: none; padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform 160ms var(--ease); }
.upload-browse-btn:hover { transform: translateY(-2px); }
.upload-hint { font-size: 11.5px; color: var(--text-muted); }
.upload-error { display: none; margin-top: 10px; padding: 10px 14px; border-radius: 8px; background: var(--brick-tint); color: var(--brick); font-size: 12.5px; font-weight: 600; }
.upload-file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.upload-file-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 10px; }
.upload-file-preview { width: 42px; height: 42px; border-radius: 8px; background: var(--spectralogs-blue-tint); color: var(--spectralogs-blue); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; overflow: hidden; }
.upload-file-preview img { width: 100%; height: 100%; object-fit: cover; }
.upload-file-meta { flex: 1; min-width: 0; }
.upload-file-name { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-file-size { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.upload-file-remove { background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; padding: 6px; border-radius: 6px; transition: color 160ms var(--ease), background 160ms var(--ease); flex-shrink: 0; }
.upload-file-remove:hover { color: var(--brick); background: var(--brick-tint); }

/* ---------- Secondary "back" button, used across all Help pages ---------- */
.btn-back-secondary {
    display: inline-flex; align-items: center; gap: 8px; background: var(--paper-raised);
    border: 1.5px solid var(--rule); color: var(--ink-soft); padding: 9px 16px 9px 12px;
    border-radius: 9px; font-size: 13.5px; font-weight: 600; text-decoration: none;
    transition: border-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}
.btn-back-secondary:hover { border-color: var(--spectralogs-blue); color: var(--spectralogs-blue); transform: translateX(-2px); }

/* ---------- Secondary outline button, shared across pages ---------- */
.btn-outline { background: transparent; border: 1.5px solid var(--rule); color: var(--ink-soft); padding: 10px 18px; border-radius: 7px; font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none; text-align: center; transition: border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease); display: inline-flex; align-items: center; justify-content: center; }
.btn-outline:hover { border-color: var(--spectralogs-blue); color: var(--spectralogs-blue); transform: translateY(-2px); }

/* ---------- Filter/search bar, shared by admin and My Tickets ---------- */
.admin-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.admin-filter-bar select, .admin-filter-bar input {
    padding: 9px 13px; border-radius: 9px; border: 1px solid var(--rule); background: var(--paper-raised);
    color: var(--ink); font-size: 13px; font-family: var(--font-body); transition: border-color 160ms var(--ease);
}
.admin-filter-bar select:focus, .admin-filter-bar input:focus { outline: none; border-color: var(--spectralogs-blue); }
@media (max-width: 600px) { .admin-filter-bar { flex-direction: column; align-items: stretch; } }

/* Getting Started steps */
.gs-step { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.gs-step:last-child { border-bottom: none; }
.gs-step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--spectralogs-blue-tint); color: var(--spectralogs-blue); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gs-step.done .gs-step-num { background: var(--success-green); color: #fff; }
.gs-step-title { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.gs-step-desc { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Ticket table (business + admin) */
.ticket-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ticket-table th { text-align: left; padding: 10px 12px; background: var(--paper-raised); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border-bottom: 1.5px solid var(--rule); white-space: nowrap; }
.ticket-table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ticket-table tr:hover td { background: rgba(30,64,175,0.05); }

@media (max-width: 600px) { .support-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .support-card-grid { grid-template-columns: 1fr; } }

.theme-toggle-mount { display: flex; align-items: center; }
.completion-bar-track { width: 100%; height: 8px; background: var(--rule); border-radius: 8px; overflow: hidden; }
.completion-bar-fill { height: 100%; background: linear-gradient(90deg, var(--spectralogs-blue), var(--spectralogs-blue-dark)); border-radius: 8px; transition: width 800ms var(--ease); }
.theme-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--paper-raised); border: 1.5px solid var(--rule);
    color: var(--text-muted); cursor: pointer;
    transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
}
.theme-toggle-btn:hover { color: var(--spectralogs-blue); border-color: var(--spectralogs-blue); }

.verified-badge { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 5px; background: var(--success-green-tint); color: var(--success-green); border: 1px solid rgba(46,125,70,0.25); }

/* ============================================================
   Form element polish -- password toggles, file inputs, checkboxes
   ============================================================ */

/* ---- Better default input/select/textarea focus state ---- */
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="date"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
    border-color: var(--spectralogs-blue);
    box-shadow: 0 0 0 3px rgba(30,64,175,0.15);
    outline: none;
}

/* ---- Password show/hide icon (span-based -- immune to any button CSS) ---- */
.password-field-wrap { position: relative; margin-top: 6px; }
.password-field-wrap input[type="password"], .password-field-wrap input[type="text"] { padding-right: 42px; margin-top: 0; }
.password-toggle-icon {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    color: var(--text-muted); cursor: pointer;
    background: transparent; border: none; padding: 0; margin: 0;
    transition: color 140ms var(--ease);
}
.password-toggle-icon:hover, .password-toggle-icon.showing { color: var(--spectralogs-blue); }
.password-toggle-icon svg { display: block; }

/* ---- Custom file input ---- */
.file-field-wrap { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.file-field-input-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.file-field-btn {
    display: inline-block; padding: 10px 18px; border-radius: 7px;
    background: var(--card); border: 1.5px solid var(--spectralogs-blue); color: var(--spectralogs-blue);
    font-family: var(--font-body); font-weight: 600; font-size: 13.5px; cursor: pointer;
    transition: background 160ms var(--ease), color 160ms var(--ease);
    margin: 0;
}
.file-field-btn:hover { background: var(--spectralogs-blue); color: #FFFFFF; }
.file-field-name { color: var(--text-muted); font-size: 13px; }
.file-field-name.has-file { color: var(--ink); font-weight: 600; }

/* ---- Gold-accented custom checkboxes, used throughout service/goods/tag checklists ---- */
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; }
.checklist label {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 8px; cursor: pointer;
    font-weight: 400; font-size: 14px; color: var(--ink-soft);
    transition: background 140ms var(--ease);
}
.checklist label:hover { background: rgba(30,64,175,0.06); }
input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 19px; height: 19px; flex-shrink: 0;
    border: 1.5px solid var(--rule); border-radius: 5px;
    background: var(--card); cursor: pointer; position: relative;
    transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
input[type="checkbox"]:checked { background: var(--spectralogs-blue); border-color: var(--spectralogs-blue); }
input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px; border: solid #FFFFFF; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px rgba(30,64,175,0.25); }

/* ---- Radio buttons ---- */
input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 19px; height: 19px; flex-shrink: 0;
    border: 1.5px solid var(--rule); border-radius: 50%;
    background: var(--card); cursor: pointer; position: relative;
    transition: border-color 140ms var(--ease);
}
input[type="radio"]:checked { border-color: var(--spectralogs-blue); }
input[type="radio"]:checked::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 10px; height: 10px; border-radius: 50%; background: var(--spectralogs-blue);
    transform: translate(-50%, -50%);
}
.verified-badge::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.7), transparent);
    transform: skewX(-20deg);
    animation: tier-shimmer 3.5s ease-in-out infinite;
}

@media (max-width: 900px) {
    .form-shell { flex-direction: column; }
    .form-shell .form-box { max-width: 100%; }
}

/* ---------- Prominent page search bar (below the icon row, not in navbar) ---------- */
.page-search { max-width: 540px; margin: 4px auto 8px; }
.page-search-inner {
    display: flex; align-items: center; gap: 10px;
    background: var(--paper-raised); border: 1.5px solid var(--rule); border-radius: 8px;
    padding: 0 14px; height: 46px;
    transition: border-color 160ms var(--ease);
}
.page-search-inner:focus-within { border-color: var(--spectralogs-blue); box-shadow: 0 0 0 3px rgba(30,64,175,0.15); }
.page-search-inner svg { color: var(--text-muted); flex-shrink: 0; }
.page-search-inner input { border: none; outline: none; background: none; font-family: var(--font-body); font-size: 15px; width: 100%; color: var(--ink); margin: 0; padding: 0; border-radius: 0; }

/* ---------- Stats overview row (dashboard-style number cards) ---------- */
.stat-card {
    background: var(--card); color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 12px; padding: 20px 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
    animation: card-rise 480ms var(--ease) backwards;
    height: 110px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
}
.stat-card:hover { transform: translateY(-3px); border-color: var(--spectralogs-blue); box-shadow: 0 8px 20px rgba(0,0,0,0.3), 0 0 20px rgba(30,64,175,0.18); }
.stat-card:nth-child(1) { animation-delay: 0ms; }
.stat-card:nth-child(2) { animation-delay: 60ms; }
.stat-card:nth-child(3) { animation-delay: 120ms; }
.stat-card:nth-child(4) { animation-delay: 180ms; }
.stat-card:nth-child(5) { animation-delay: 240ms; }
.stat-card:nth-child(6) { animation-delay: 300ms; }
@keyframes card-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.stat-value { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--ink); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .stats-row { grid-template-columns: 1fr 1fr; } }

/* ---------- Searchable multi-select component, shared across registration and edit-profile ---------- */
.ms-wrap { position: relative; margin-top: 6px; }
.ms-search { width: 100%; box-sizing: border-box; height: 50px; padding: 0 14px; font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--card); border: 1.5px solid var(--rule); border-radius: 10px; max-height: 220px; overflow-y: auto; box-shadow: 0 10px 26px rgba(0,0,0,0.2); padding: 6px; }
.ms-dropdown.open { display: block; }
.ms-option { display: flex; align-items: center; padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: 13.5px; color: var(--ink); border: 1.5px solid transparent; transition: background 120ms var(--ease), border-color 120ms var(--ease); }
.ms-option:hover { background: var(--paper-raised); }
.ms-option.selected { background: var(--spectralogs-blue-tint); color: var(--spectralogs-blue); font-weight: 600; border-color: var(--spectralogs-blue); }
.ms-no-match { padding: 10px; font-size: 13px; color: var(--text-muted); text-align: center; }
.ms-suggest-btn { background: var(--spectralogs-blue); color: #fff; border: none; padding: 5px 12px; border-radius: 14px; font-size: 12px; font-weight: 600; cursor: pointer; margin-left: 6px; }

/* ---------- Premium button, shared across every page that needs an
   "Upgrade to Premium" CTA (posts, leads, search, analytics, etc.) ---------- */
.btn-premium {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 26px; border: none; border-radius: 13px;
    background: linear-gradient(135deg, var(--spectralogs-blue), var(--spectralogs-blue-dark));
    color: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 600;
    cursor: pointer; box-shadow: 0 4px 14px rgba(30,64,175,0.35);
    transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease), opacity 180ms var(--ease);
}
.btn-premium:hover:not(:disabled) {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--spectralogs-blue-dark), var(--spectralogs-blue));
    box-shadow: 0 8px 22px rgba(30,64,175,0.45);
}
.btn-premium:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.btn-premium:focus-visible { outline: 2px solid var(--brand-primary-light); outline-offset: 2px; }
.btn-premium:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-premium.is-success { background: linear-gradient(135deg, var(--success-green), #16A34A); box-shadow: 0 4px 14px rgba(34,197,94,0.35); }
.btn-premium .btn-spinner {
    width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
    border-radius: 50%; animation: btn-spin 700ms linear infinite; flex-shrink: 0;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
    .btn-premium { width: 100%; }
}