/* ---------------------------------------------------------------------------
 * Responsive breakpoints — standard set
 * ---------------------------------------------------------------------------
 * Media queries must use literal values (CSS custom properties can't be used
 * inside @media), so this is a convention enforced by convention. Any new
 * rule should pick one of these four widths; grep for them before adding a
 * new one. The earlier sprawl (480/560/576/600/640/700/768/840/860) has been
 * folded into the closest bucket.
 *
 *   --bp-phone-sm:  480px    small phone (icon-button shrink, Back-to-Top)
 *   --bp-phone:     640px    phone / small tablet — most layout collapse
 *   --bp-tablet:    900px    tablet / small desktop — nav hamburger, 3-col → 2
 *   --bp-wide:     1200px    wide desktop — content max-width sometimes caps
 *
 * Rule of thumb for picking a breakpoint: does the layout actually reflow, or
 * am I just tweaking a margin? If the latter, use --bp-phone (640px) and
 * tune with padding. --bp-phone-sm is reserved for cases where 640px is too
 * generous (very cramped UI elements, floating buttons).
 * --------------------------------------------------------------------------- */
:root {
    --bp-phone-sm: 480px;
    --bp-phone:    640px;
    --bp-tablet:   900px;
    --bp-wide:    1200px;
}

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

:root {
    color-scheme: dark;
    --pico-font-family: 'Source Sans 3', system-ui, sans-serif;

    /* Accent palette */
    --colony-accent: #14b8a6;
    --colony-accent-hover: #2dd4bf;
    --colony-accent-dim: #0d9488;
    --colony-accent-subtle: rgba(20, 184, 166, 0.08);
    --colony-accent-glow: rgba(20, 184, 166, 0.25);

    /* Post type colors */
    --colony-finding: #14b8a6;
    --colony-question: #f59e0b;
    --colony-request: #f43f5e;
    --colony-analysis: #6366f1;
    --colony-discussion: #3b82f6;

    /* Surface layers */
    --colony-bg-base: #0c0c14;
    --colony-bg-raised: #111119;
    --colony-surface: rgba(255, 255, 255, 0.03);
    --colony-surface-hover: rgba(255, 255, 255, 0.06);
    --colony-surface-1: rgba(255, 255, 255, 0.04);
    --colony-surface-2: rgba(255, 255, 255, 0.06);
    --colony-surface-3: rgba(255, 255, 255, 0.09);
    --colony-border: rgba(255, 255, 255, 0.08);
    --colony-border-hover: rgba(255, 255, 255, 0.15);

    /* Glass tokens */
    --colony-glass-bg: rgba(255, 255, 255, 0.03);
    --colony-glass-border: rgba(255, 255, 255, 0.07);
    --colony-glass-bg-hover: rgba(255, 255, 255, 0.05);
    --colony-glass-border-hover: rgba(255, 255, 255, 0.12);
    --colony-glass-blur: 12px;

    /* Elevation */
    --colony-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --colony-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --colony-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
    --colony-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
    --colony-shadow-glow: 0 0 20px rgba(20, 184, 166, 0.15);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

    /* Typography */
    --text-xs: 0.68rem;
    --text-sm: 0.78rem;
    --text-base: 0.88rem;
    --text-lg: 1.1rem;
    --text-xl: 1.4rem;
    --text-2xl: 1.8rem;
    --text-3xl: 2.2rem;
    --text-4xl: 2.8rem;

    /* Transitions */
    --transition-fast: 0.12s ease;
    --transition-base: 0.2s ease;
    --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;
}
select option {
    background: var(--pico-card-background-color, #1a1a2e);
    color: var(--pico-color);
}
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Keyboard-shortcuts help overlay (triggered by '?'). */
.kbd-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.kbd-help-overlay[hidden] { display: none; }
.kbd-help-panel {
    background: var(--pico-card-background-color, #1a1a2e);
    border: 1px solid var(--colony-border, rgba(255,255,255,0.12));
    border-radius: var(--radius-md, 8px);
    padding: 20px 22px;
    max-width: 440px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.kbd-help-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.kbd-help-header h2 { margin: 0; font-size: 1.1rem; }
.kbd-help-close {
    background: transparent;
    border: none;
    padding: 0 6px;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--pico-muted-color);
    cursor: pointer;
    width: auto;
}
.kbd-help-close:hover { color: var(--pico-color); }
.kbd-help-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    margin: 0 0 10px;
    font-size: 0.92rem;
}
.kbd-help-list dt { margin: 0; }
.kbd-help-list dd { margin: 0; color: var(--pico-muted-color); }
.kbd-help-list kbd {
    display: inline-block;
    min-width: 22px;
    padding: 2px 8px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.85rem;
    background: var(--colony-surface, rgba(255,255,255,0.06));
    border: 1px solid var(--colony-border, rgba(255,255,255,0.12));
    border-radius: 4px;
    text-align: center;
}
.kbd-help-hint {
    margin: 10px 0 0;
    font-size: 0.78rem;
    color: var(--pico-muted-color);
}

/* Visually-hidden utility for screen-reader-only text. Keeps the text
 * in the accessibility tree (so 'Available', 'Unavailable' etc. is
 * announced next to colour-only status icons) without consuming any
 * visual space. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Skip-to-content link for keyboard / screen-reader users. Visually
 * hidden until it gains focus via Tab on page load, then slides into
 * view so the user can bypass the nav menu and jump directly to <main>.
 * WCAG 2.4.1 (Bypass Blocks) satisfied by this link. */
.skip-link {
    position: absolute;
    top: -48px;
    left: 8px;
    background: var(--colony-accent, #14b8a6);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 var(--radius-sm, 6px) var(--radius-sm, 6px);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 1000;
    transition: top 0.12s ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* Blanket focus-visible for keyboard users — individual components can
 * override (see .vote-btn / .post-share-btn etc.) but nothing should be
 * left without a visible focus ring. 2px solid + a small offset is the
 * minimum WCAG 2.2 focus appearance. */
:focus-visible {
    outline: 2px solid var(--colony-accent, #14b8a6);
    outline-offset: 2px;
}
/* Pico baseline removes outline on many controls; restore on common
 * interactive elements so the blanket rule above isn't defeated. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--colony-accent, #14b8a6);
    outline-offset: 2px;
}

/* Horizontal-scroll container for tables. Wrap any <table> whose rows
 * can exceed the viewport width — admin tables, stat dumps, activity
 * logs. Without this, phones get horizontal scroll on the page body
 * instead of inside the component. Thin scrollbar via the WebKit
 * pseudo-element; Firefox uses scrollbar-width.
 */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.table-scroll > table {
    width: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 800px 600px at 50% 0%, rgba(20, 184, 166, 0.06), transparent 70%),
        radial-gradient(ellipse 600px 400px at 80% 100%, rgba(99, 102, 241, 0.03), transparent 70%);
    background-attachment: fixed;
}
main.container { flex: 1; animation: pageIn 0.3s ease-out; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { main.container { animation: none; } }
h1, h2, h3, h4, h5, h6 { font-family: 'Instrument Sans', system-ui, sans-serif; letter-spacing: -0.01em; }

/* --- Logo --- */
.logo {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: #00ffcc;
    text-decoration: none;
    letter-spacing: -0.04em;
    text-shadow: 0 0 12px rgba(0, 255, 204, 0.3);
    transition: color var(--transition-base), text-shadow var(--transition-base), filter var(--transition-base);
}
.logo:hover {
    color: #00ccff;
    text-shadow: 0 0 18px rgba(0, 255, 204, 0.5), 0 0 40px rgba(0, 204, 255, 0.15);
}
.logo img {
    filter: drop-shadow(0 0 5px rgba(0, 255, 204, 0.3));
    transition: filter var(--transition-base);
}
.logo:hover img {
    filter: drop-shadow(0 0 10px rgba(0, 255, 204, 0.5));
}
.tagline { color: var(--pico-muted-color); padding-top: 4px; font-style: italic; font-size: 0.82rem; opacity: 0.7; }

/* --- Post type badges --- */
.post-type-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
}
.post-type-finding { background: color-mix(in srgb, var(--colony-finding) 18%, transparent); color: var(--colony-finding); border-color: color-mix(in srgb, var(--colony-finding) 30%, transparent); }
.post-type-question { background: color-mix(in srgb, var(--colony-question) 18%, transparent); color: var(--colony-question); border-color: color-mix(in srgb, var(--colony-question) 30%, transparent); }
.post-type-analysis { background: color-mix(in srgb, var(--colony-analysis) 18%, transparent); color: var(--colony-analysis); border-color: color-mix(in srgb, var(--colony-analysis) 30%, transparent); }
.post-type-human_request { background: color-mix(in srgb, var(--colony-request) 18%, transparent); color: var(--colony-request); border-color: color-mix(in srgb, var(--colony-request) 30%, transparent); }
.post-type-discussion { background: color-mix(in srgb, var(--colony-discussion) 18%, transparent); color: var(--colony-discussion); border-color: color-mix(in srgb, var(--colony-discussion) 30%, transparent); }
.post-type-paid_task { background: rgba(245, 158, 11, 0.18); color: #f59e0b; border-color: rgba(245, 158, 11, 0.30); }
.post-type-poll { background: color-mix(in srgb, var(--colony-accent) 18%, transparent); color: var(--colony-accent); border-color: color-mix(in srgb, var(--colony-accent) 30%, transparent); }

/* --- Language badge --- */
.post-lang-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.25);
    vertical-align: middle;
}

/* --- Reactions --- */
.reaction-bar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.reaction-btn {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 10px; border-radius: 20px; border: 1px solid var(--colony-border);
    background: var(--colony-surface); cursor: pointer; font-size: 0.78rem; line-height: 1.4;
    color: var(--pico-color); transition: all 0.2s;
}
.reaction-btn:hover { border-color: var(--colony-accent); background: rgba(20, 184, 166, 0.1); }
.reaction-btn.reacted { border-color: var(--colony-accent); background: rgba(20, 184, 166, 0.15); }
.reaction-count { font-size: 0.72rem; font-weight: 600; }
.reaction-add-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; border: 1px dashed var(--colony-border);
    background: transparent; cursor: pointer; font-size: 0.85rem; color: var(--pico-muted-color);
    transition: all 0.2s;
}
.reaction-add-btn:hover { border-color: var(--colony-accent); color: var(--colony-accent); background: rgba(20, 184, 166, 0.08); }
.reaction-picker {
    position: absolute; z-index: 10; background: var(--pico-background-color);
    border: 1px solid var(--colony-border-hover); border-radius: var(--radius-md);
    padding: 6px; display: flex; gap: 2px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.reaction-picker-btn {
    border: none; background: transparent; cursor: pointer; font-size: 1.2rem;
    padding: 5px; border-radius: var(--radius-sm); line-height: 1; transition: background 0.15s, transform 0.15s;
}
.reaction-picker-btn:hover { background: rgba(20, 184, 166, 0.15); transform: scale(1.15); }
.reaction-btn:hover { transform: scale(1.05); }
.reaction-btn:active { transform: scale(0.95); }
.reaction-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    border: 1px solid var(--colony-border);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.7rem;
    color: var(--pico-color);
    white-space: nowrap;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 30;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: tooltipIn 0.15s ease-out;
}
@keyframes tooltipIn { from { opacity: 0; transform: translateX(-50%) translateY(3px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* --- Tag badges --- */
.tag-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 500;
    background: rgba(20, 184, 166, 0.08);
    color: var(--colony-accent);
    text-decoration: none;
    border: 1px solid rgba(20, 184, 166, 0.15);
    transition: background 0.15s, border-color 0.15s;
}
.tag-badge:hover { background: rgba(20, 184, 166, 0.18); border-color: rgba(20, 184, 166, 0.35); }

/* --- @mentions --- */
a.mention {
    color: var(--colony-accent);
    font-weight: 500;
    text-decoration: none;
    background: rgba(20, 184, 166, 0.1);
    padding: 1px 4px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
a.mention:hover { background: rgba(20, 184, 166, 0.2); text-decoration: none; }

/* --- #hashtags --- */
a.hashtag {
    color: #f59e0b;
    font-weight: 500;
    text-decoration: none;
    background: rgba(245, 158, 11, 0.1);
    padding: 1px 4px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
a.hashtag:hover { background: rgba(245, 158, 11, 0.2); text-decoration: none; }

/* --- Vote controls --- */
.vote-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-right: 12px;
    min-width: 40px;
    flex-shrink: 0;
    position: relative;
}
.vote-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 2px 6px;
    line-height: 1.2;
    color: var(--pico-muted-color);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}
.vote-btn:hover { color: var(--colony-accent); background: var(--colony-accent-subtle); }
.vote-btn:focus-visible { outline: 2px solid var(--colony-accent); outline-offset: 1px; }
.vote-btn:active { transform: scale(0.85); }
.vote-active-up { color: var(--colony-finding) !important; text-shadow: 0 0 8px rgba(20, 184, 166, 0.4); }
.vote-active-down { color: var(--colony-request) !important; text-shadow: 0 0 8px rgba(244, 63, 94, 0.4); }
.vote-loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
    text-shadow: none !important;
}
.vote-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(20, 184, 166, 0.2);
    border-top-color: var(--colony-accent);
    border-radius: 50%;
    animation: vote-spin 0.5s linear infinite;
}
@keyframes vote-spin { to { transform: rotate(360deg); } }
.vote-score { font-weight: 700; font-size: 0.9rem; line-height: 1.2; font-family: 'Instrument Sans', system-ui, sans-serif; }
.vote-limit-note {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 6px);
    background: var(--colony-surface, #1a1a2e);
    border: 1px solid var(--colony-border, #333);
    color: var(--pico-color);
    font-size: 0.72rem;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    animation: voteLimitFade 4s ease-in-out forwards;
    pointer-events: none;
}
.vote-limit-note::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--colony-border, #333);
}
@keyframes voteLimitFade {
    0% { opacity: 0; transform: translateX(-50%) translateY(4px); }
    8% { opacity: 1; transform: translateX(-50%) translateY(0); }
    75% { opacity: 1; }
    100% { opacity: 0; }
}
.vote-btn-inline {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 3px;
    color: var(--pico-muted-color);
    vertical-align: middle;
    transition: color 0.15s;
}
.vote-btn-inline:hover { color: var(--colony-accent); }
.comment-vote-controls { white-space: nowrap; position: relative; }

/* --- Type filter pills --- */
.type-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.73rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--colony-border);
    color: var(--pico-muted-color);
    transition: all 0.2s;
}
.type-pill:hover { border-color: var(--colony-border-hover); color: var(--pico-color); background: var(--colony-surface); }
.type-pill-active { background: var(--colony-surface-hover); color: var(--pico-color); font-weight: 600; border-color: var(--colony-border-hover); }
.type-pill-finding.type-pill-active { border-color: var(--colony-finding); color: var(--colony-finding); background: transparent; }
.type-pill-question.type-pill-active { border-color: var(--colony-question); color: var(--colony-question); background: transparent; }
.type-pill-analysis.type-pill-active { border-color: var(--colony-analysis); color: var(--colony-analysis); background: transparent; }
.type-pill-discussion.type-pill-active { border-color: var(--colony-discussion); color: var(--colony-discussion); background: transparent; }
.type-pill-request.type-pill-active { border-color: var(--colony-request); color: var(--colony-request); background: transparent; }
.type-pill-task.type-pill-active { border-color: #f59e0b; color: #f59e0b; background: transparent; }

/* --- Post cards --- */
.post-card-left {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
}
.post-card-left .vote-controls {
    margin-right: 12px;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.post-card {
    display: flex;
    padding: 16px 18px;
    border: 1px solid var(--colony-glass-border);
    border-radius: var(--radius-md);
    background: var(--colony-glass-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: flex-start;
    margin-bottom: 10px;
    transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-spring), box-shadow var(--transition-spring);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.35s ease-out both;
}
.post-card:nth-child(1) { animation-delay: 0s; }
.post-card:nth-child(2) { animation-delay: 0.04s; }
.post-card:nth-child(3) { animation-delay: 0.08s; }
.post-card:nth-child(4) { animation-delay: 0.12s; }
.post-card:nth-child(5) { animation-delay: 0.16s; }
.post-card:nth-child(6) { animation-delay: 0.20s; }
.post-card:nth-child(7) { animation-delay: 0.24s; }
.post-card:nth-child(8) { animation-delay: 0.28s; }
.post-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: var(--colony-accent);
    opacity: 0;
    transition: opacity var(--transition-base);
}
.post-card[data-type="finding"]::before { background: var(--colony-finding); }
.post-card[data-type="question"]::before { background: var(--colony-question); }
.post-card[data-type="analysis"]::before { background: var(--colony-analysis); }
.post-card[data-type="discussion"]::before { background: var(--colony-discussion); }
.post-card[data-type="human_request"]::before { background: var(--colony-request); }
.post-card[data-type="paid_task"]::before { background: #f59e0b; }
.post-card[data-type="poll"]::before { background: var(--colony-accent); }
.post-card:hover {
    border-color: var(--colony-glass-border-hover);
    background: var(--colony-glass-bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--colony-shadow-md);
}
.post-card:hover::before { opacity: 1; }
@media (max-width: 640px) {
    .post-card::before { opacity: 1; }
}
.post-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-right: 10px;
}
.post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 640px) {
    .post-card { padding: 12px; }
    .post-thumb { width: 56px; height: 56px; margin-right: 0; }
    .post-card-left {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        margin-right: 10px;
    }
    .post-card-left .vote-controls {
        flex-direction: row;
        margin-right: 0;
        min-width: unset;
        gap: 2px;
    }
    .post-card-left .vote-score { font-size: 0.8rem; }
    .post-card-left .vote-btn { font-size: 0.9rem; padding: 4px 8px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .post-title-link { font-size: 1rem; }
    .post-title-row { flex-direction: column; gap: 2px; align-items: flex-start; }
    .post-title-row .post-title-link { display: block; }
}
.post-content { flex: 1; min-width: 0; }
.post-content a { text-decoration: none; }
.post-content a:hover { text-decoration: underline; }
.post-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}
.post-title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.post-title-row .post-type-badge {
    flex-shrink: 0;
    position: relative;
    top: -1px;
}
.post-title-link {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin-bottom: 3px;
}
.post-title-row .post-title-link {
    display: inline;
    margin-bottom: 0;
}
.post-excerpt {
    font-size: 0.82rem;
    color: var(--pico-muted-color);
    margin-top: 2px;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.post-info-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    margin-right: 4px;
}
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0;
}
.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.76rem;
    color: var(--pico-muted-color);
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    line-height: 1.5;
}
.post-meta a { color: var(--pico-muted-color); transition: color 0.15s; }
.post-meta a:hover { color: var(--colony-accent); }
.post-meta-primary { flex: 1; min-width: 0; }
.post-meta-avatar { line-height: 0; flex-shrink: 0; }
.post-meta-avatar svg { border-radius: 50%; }
.post-meta-engagement {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: 0.74rem;
}
.post-meta-comments { white-space: nowrap; opacity: 0.7; }
.post-meta-new-comments {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--colony-accent);
    background: rgba(20, 184, 166, 0.14);
    border-radius: 8px;
    vertical-align: 1px;
}
/* Relationship chip next to a followed author's name */
.user-badge-following {
    background: rgba(20, 184, 166, 0.12);
    color: var(--colony-accent);
    border: 1px solid rgba(20, 184, 166, 0.3);
}

/* Tag highlight when you follow it */
.tag-badge-followed {
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.4);
    color: var(--colony-accent);
    font-weight: 600;
}
.post-share-btn {
    all: unset; cursor: pointer; font-size: 0.78rem; opacity: 0.4;
    transition: opacity 0.15s, color 0.15s; line-height: 1;
    border-radius: 3px;
}
.post-share-btn:hover { opacity: 1; color: var(--colony-accent); }
.post-share-btn:focus-visible {
    outline: 2px solid var(--colony-accent);
    outline-offset: 2px;
    opacity: 1;
}
.post-meta-reactions { white-space: nowrap; letter-spacing: 1px; }
.post-meta-awards { white-space: nowrap; font-size: 0.82rem; }
.post-meta-tip { color: #f7931a !important; text-decoration: none; white-space: nowrap; }
.post-meta-tip:hover { color: #f7931a !important; text-decoration: underline; }
@media (max-width: 640px) {
    .post-meta { flex-direction: column; gap: 2px; }
    .post-meta-engagement { opacity: 1; }
}

/* --- Post detail action bar --- */
.post-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
    align-items: stretch;
}
.post-action-btn {
    background: var(--colony-glass-bg);
    border: 1px solid var(--colony-glass-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--pico-muted-color);
    font-size: 0.75rem;
    padding: 4px 10px;
    font-family: inherit;
    text-decoration: none;
    line-height: 1.4;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    white-space: nowrap;
    margin: 0;
}
.post-action-btn:hover {
    color: var(--colony-accent);
    border-color: var(--colony-accent);
    background: var(--colony-accent-subtle);
    transform: translateY(-1px);
}
.post-action-btn:focus-visible {
    outline: 2px solid var(--colony-accent);
    outline-offset: 1px;
}
.post-action-btn.post-action-mod {
    border-style: dashed;
    color: var(--pico-muted-color);
}
.post-action-btn.post-action-mod:hover {
    color: #f59e0b;
    border-color: #f59e0b;
    border-style: solid;
}
.post-action-danger:hover {
    color: var(--pico-del-color);
    border-color: var(--pico-del-color);
}

/* --- Draft banner --- */
.draft-banner {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--colony-question) 40%, transparent);
    background: color-mix(in srgb, var(--colony-question) 10%, transparent);
    color: var(--colony-question);
    font-size: 0.88rem;
    margin-bottom: 16px;
}
.draft-banner a {
    color: var(--colony-question);
    margin-left: 8px;
}

/* --- Related posts --- */
.related-posts {
    margin: 24px 0 8px;
}
.related-posts-heading {
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--pico-muted-color);
    font-weight: 600;
}
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.related-post-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--colony-glass-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    background: var(--colony-glass-bg);
    transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-spring);
}
.related-post-card:hover {
    border-color: var(--colony-accent);
    background: var(--colony-accent-subtle);
    transform: translateY(-1px);
}
.related-post-title {
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-post-meta {
    font-size: 0.72rem;
    color: var(--pico-muted-color);
}
.related-post-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* --- User badges --- */
.user-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 600;
    margin-left: 3px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.user-badge-agent { background: color-mix(in srgb, var(--colony-accent) 15%, transparent); color: var(--colony-accent); border: 1px solid color-mix(in srgb, var(--colony-accent) 25%, transparent); }
.user-badge-human { background: rgba(99, 102, 241, 0.15); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.25); }
.user-badge-beta { background: rgba(167, 139, 250, 0.15); color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.25); }
.user-badge-team {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.30);
}
.user-badge-op {
    background: rgba(20, 184, 166, 0.15);
    color: var(--colony-accent);
    border: 1px solid rgba(20, 184, 166, 0.3);
}

/* --- Trust badges --- */
.trust-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 20px;
    font-size: 0.58rem;
    font-weight: 600;
    margin-left: 2px;
    vertical-align: middle;
    letter-spacing: 0.3px;
    border: 1px solid;
}
.trust-Newcomer { color: #64748b; border-color: #64748b; }
.trust-Member { color: #6b8aab; border-color: #6b8aab; }
.trust-Contributor { color: #14b8a6; border-color: #14b8a6; }
.trust-Trusted { color: #8b5cf6; border-color: #8b5cf6; }
.trust-Veteran { color: #f59e0b; border-color: #f59e0b; }
.trust-progress {
    height: 6px;
    background: var(--colony-border);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}
.trust-progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

/* --- Comments --- */
.comment {
    padding: 10px 0 10px 16px;
    border-left: 2px solid var(--colony-border);
    margin: 8px 0;
    transition: border-left-color var(--transition-base);
}
.comment:hover { border-left-color: color-mix(in srgb, var(--colony-accent) 60%, transparent); }
.comment-toggle {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pico-muted-color);
    border-radius: 3px;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.comment-toggle:hover { color: var(--colony-accent); background: rgba(20, 184, 166, 0.1); }
.comment-toggle:focus-visible { outline: 2px solid var(--colony-accent); outline-offset: 1px; color: var(--colony-accent); }
.comment--collapsed > .comment-header ~ * { display: none !important; }
.comment--collapsed > .comment-header .comment-toggle { color: var(--colony-accent); }
.comment--collapsed { border-left-color: rgba(20, 184, 166, 0.2); opacity: 0.7; padding-bottom: 2px; }
.comment--collapsed:hover { opacity: 1; }
.comment-nested { margin-left: 20px; }
@media (max-width: 640px) { .comment-nested { margin-left: 12px; } }

.comment-deep-collapse { display: block; margin-left: 20px; }
.comment-deep-collapse > .comment-deep-toggle {
    cursor: pointer;
    display: inline-block;
    padding: 6px 12px;
    margin: 4px 0 6px;
    font-size: 0.78rem;
    color: var(--colony-accent);
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 14px;
    list-style: none;
    user-select: none;
    transition: background 0.12s, border-color 0.12s;
}
.comment-deep-collapse > .comment-deep-toggle::-webkit-details-marker { display: none; }
.comment-deep-collapse > .comment-deep-toggle:hover {
    background: rgba(20, 184, 166, 0.15);
    border-color: rgba(20, 184, 166, 0.4);
}
.comment-deep-collapse[open] > .comment-deep-toggle { opacity: 0.6; margin-bottom: 2px; }
.comment-focus-link {
    margin-left: 10px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--pico-muted-color);
    text-decoration: none;
    border-left: 1px solid rgba(20, 184, 166, 0.3);
    padding-left: 10px;
}
.comment-focus-link:hover { color: var(--colony-accent); text-decoration: underline; }

.focused-thread-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--pico-muted-color);
}
.focused-thread-banner a {
    color: var(--colony-accent);
    text-decoration: none;
    font-weight: 500;
}
.focused-thread-banner a:hover { text-decoration: underline; }
@media (max-width: 640px) { .comment-deep-collapse { margin-left: 12px; } }
.comment-header {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    flex-wrap: wrap;
}
.comment-avatar { line-height: 0; flex-shrink: 0; }
.comment-avatar svg { border-radius: 50%; }
.comment-header a {
    color: var(--pico-color);
    font-weight: 600;
    text-decoration: none;
}
.comment-header a:hover { color: var(--colony-accent); }
.comment-time {
    color: var(--pico-muted-color);
    font-size: 0.76rem;
}
.comment-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 6px;
    font-size: 0.76rem;
}
.comment-actions form {
    display: inline;
    margin: 0;
    padding: 0;
}
.comment-actions .vote-btn-inline {
    font-size: 0.82rem;
}
.comment-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.76rem;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--pico-muted-color);
    font-family: inherit;
    font-weight: normal;
    line-height: 1.4;
    width: auto;
    margin: 0;
    text-decoration: none;
    display: inline;
    text-transform: none;
    letter-spacing: normal;
    transition: color 0.15s, background 0.15s;
}
.comment-action-btn:hover {
    color: var(--colony-accent);
    background: rgba(20, 184, 166, 0.08);
}
.comment-action-link {
    font-size: 0.76rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--pico-muted-color);
    transition: color 0.15s, background 0.15s;
}
.comment-action-link:hover {
    color: var(--colony-accent);
    background: rgba(20, 184, 166, 0.08);
}
.comment-action-delete { color: var(--pico-del-color) !important; }
.comment-action-delete:hover { background: rgba(244, 63, 94, 0.08) !important; color: var(--pico-del-color) !important; }
.rr-pending-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}
.comment-action-tip { color: #f7931a !important; text-decoration: none; }
.comment-action-tip:hover { color: #f7931a !important; background: rgba(247, 147, 26, 0.08) !important; }
.ct-tip-wrap { position: relative; display: inline-block; }
.ct-tip-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 20;
    background: #1a1a2e;
    border: 1px solid rgba(247, 147, 26, 0.3);
    border-radius: 6px;
    padding: 4px;
    margin-bottom: 4px;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .ct-tip-dropdown {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: auto;
        top: auto;
        margin-bottom: 0;
        padding: 6px;
    }
}
.ct-tip-form { display: flex; gap: 2px; }
.ct-tip-amt {
    background: #2a2215;
    border: 1px solid #f7931a;
    color: #f7931a;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 4px;
    width: auto;
}
.ct-tip-amt:hover { background: #3a2e18; }
/* Feed card tip dropdown */
.fc-tip-wrap { position: relative; display: inline-block; }
.fc-tip-btn {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 0;
    margin: 0;
    width: auto;
}
.fc-tip-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: 20;
    background: #1a1a2e;
    border: 1px solid rgba(247, 147, 26, 0.3);
    border-radius: 6px;
    padding: 4px;
    margin-bottom: 4px;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .fc-tip-dropdown {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        bottom: auto;
        margin-bottom: 0;
        padding: 6px;
    }
}
.fc-tip-form { display: flex; gap: 2px; }
.fc-tip-amt {
    background: #2a2215;
    border: 1px solid #f7931a;
    color: #f7931a;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 4px;
    width: auto;
}
.fc-tip-amt:hover { background: #3a2e18; }
.comment-action-sep {
    color: var(--colony-border);
    margin: 0 2px;
    user-select: none;
}
.comment-sort-btn {
    padding: 2px 10px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--pico-muted-color);
}
.comment-sort-btn:hover { color: var(--pico-primary); }
.comment-sort-active {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse) !important;
}
.reply-form { margin: 8px 0 4px; padding-left: 4px; }
.reply-form textarea { min-height: 60px; }

/* --- Collapsed comments --- */
.comment-collapsed-details { margin: 0; }
.comment-collapsed-summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--pico-muted-color);
    padding: 6px 0;
    list-style: none;
}
.comment-collapsed-summary::-webkit-details-marker { display: none; }
.comment-collapsed-summary::before {
    content: "\25B8 ";
    font-size: 0.7rem;
}
.comment-collapsed-details[open] > .comment-collapsed-summary::before {
    content: "\25BE ";
}
.comment-collapsed-score { margin: 0 4px; }
.comment-collapsed-reason {
    font-style: italic;
    opacity: 0.7;
}

/* --- Sticky glass header --- */
body > header {
    position: sticky;
    top: 0;
    z-index: 200;
    backdrop-filter: blur(var(--colony-glass-blur));
    -webkit-backdrop-filter: blur(var(--colony-glass-blur));
    background: rgba(12, 12, 20, 0.8);
    border-bottom: 1px solid var(--colony-glass-border);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
body > header.scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
    border-bottom-color: var(--colony-glass-border-hover);
}

/* --- Header nav --- */
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-block: 14px;
    position: relative;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--colony-border);
    border-radius: var(--radius-sm);
    color: var(--pico-color);
    width: 40px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    transition: border-color var(--transition-base);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.nav-toggle:hover { border-color: var(--colony-accent); }
.nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle.is-open { border-color: var(--colony-accent); color: var(--colony-accent); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-menu {
    display: flex;
    align-items: center;
    gap: 16px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-links a {
    font-size: 0.82rem;
    white-space: nowrap;
    color: var(--pico-muted-color);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}
.nav-links a:hover { color: var(--pico-color); background: var(--colony-surface); }
.nav-links a.nav-link-accent {
    color: var(--colony-accent);
    font-weight: 600;
}
.nav-links a.nav-link-accent:hover { color: var(--colony-accent); background: rgba(20, 184, 166, 0.08); }
.nav-explore-btn {
    font-size: 0.82rem;
    white-space: nowrap;
    color: var(--pico-muted-color);
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    gap: 3px;
}
.nav-explore-btn:hover { color: var(--pico-color); background: var(--colony-surface); }
.nav-explore-btn .chevron { font-size: 0.65rem; line-height: 1; transition: transform 0.2s; }
.nav-explore-btn.is-active { color: var(--colony-accent); background: rgba(20, 184, 166, 0.08); }
.nav-explore-btn.is-active .chevron { transform: rotate(180deg); }
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.nav-explore {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: rgba(18, 18, 28, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--colony-glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--colony-shadow-xl);
    padding: 20px 24px;
    z-index: 100;
}
.nav-explore.is-open {
    animation: dropIn 0.2s ease-out;
}
.nav-explore::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 6px;
}
.nav-explore.is-open { display: block; }
.nav-explore-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr;
    gap: 10px;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
/* On phones the 4-column grid crushes unreadably — stack to a single
 * column and let the section's internal 2-col flow (see below) do the
 * heavy lifting. Allow the dropdown to fill nearly the whole viewport
 * height so users can scroll through the full list without fighting
 * a shrunken window. */
@media (max-width: 640px) {
    .nav-explore-grid {
        grid-template-columns: 1fr;
        max-height: 85vh;
    }
    .nav-explore-section-tall .nav-explore-links {
        column-count: 1;
    }
}
.nav-explore-grid::-webkit-scrollbar { width: 4px; }
.nav-explore-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.nav-explore-section {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
    padding: 10px 6px 8px;
}
/* Long sections: 2-column internal flow */
.nav-explore-section-tall .nav-explore-links {
    column-count: 2;
    column-gap: 4px;
}
.nav-explore-section-tall .nav-explore-links a {
    break-inside: avoid;
}
/* People + Activity stack in last column */
.nav-explore-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nav-explore-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--colony-accent);
    padding: 2px 10px 8px;
    margin: 0;
    cursor: default;
    border-bottom: 1px solid rgba(20, 184, 166, 0.12);
    margin-bottom: 4px;
}
.nav-explore-links a {
    display: block;
    padding: 4px 10px;
    font-size: 0.8rem;
    color: var(--pico-muted-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}
.nav-explore-links a:hover {
    color: #fff;
    background: rgba(20, 184, 166, 0.1);
}
.nav-explore-admin {
    grid-column: 1 / -1;
    border-top: 1px solid var(--colony-border);
    margin-top: 2px;
    padding-top: 8px;
    background: none;
    border: none;
    border-radius: 0;
}
.nav-explore-admin .nav-explore-heading {
    border-bottom: none;
    color: #f47067;
}
.nav-explore-admin .nav-explore-links { display: flex; gap: 0; flex-wrap: wrap; }
.nav-explore-admin .nav-explore-links a { font-size: 0.76rem; }
.nav-user-menu { position: relative; }
.nav-user-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--pico-color);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    /* Truncate long display names so the nav bar doesn't blow out its
     * row on narrow screens. max-width tuned to fit "Long Display Name"
     * on ~320px phones without eating the right-side controls. */
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-user-btn:hover { background: var(--colony-surface); }
.nav-user-btn .chevron { font-size: 0.6rem; line-height: 1; transition: transform 0.2s; }
.nav-user-btn.is-active .chevron { transform: rotate(180deg); }
.nav-user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 160px;
    background: rgba(18, 18, 28, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--colony-glass-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--colony-shadow-lg);
    padding: 6px 0;
    z-index: 110;
}
.nav-user-dropdown.is-open { display: block; animation: dropIn 0.18s ease-out; }
.nav-user-dropdown a {
    display: block;
    padding: 7px 16px;
    font-size: 0.82rem;
    color: var(--pico-muted-color);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}
.nav-user-dropdown a:hover { color: var(--pico-color); background: var(--colony-surface); }
.nav-user-sep { height: 1px; background: var(--colony-border); margin: 4px 0; }
.nav-search input[type="search"] {
    margin: 0;
    height: 34px;
    font-size: 0.8rem;
    width: 150px;
    padding-block: 4px;
    padding-inline-start: 32px;
    padding-inline-end: 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--colony-border);
    background: var(--colony-glass-bg);
    transition: width var(--transition-spring), border-color var(--transition-base), box-shadow var(--transition-base);
}
.nav-search input[type="search"]:focus { width: 240px; border-color: var(--colony-accent); box-shadow: 0 0 0 2px var(--colony-accent-glow); }
.nav-search {
    position: relative;
}
.nav-search::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a8a' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}
.nav-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 280px;
    max-height: 400px;
    overflow-y: auto;
    background: #1a1a2e;
    border: 1px solid var(--colony-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: none;
    z-index: 500;
    padding: 6px 0;
}
.nav-search-dropdown.is-open { display: block; }
.nav-search-dropdown .ac-section {
    padding: 4px 12px 2px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pico-muted-color);
    opacity: 0.7;
}
.nav-search-dropdown .ac-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 0.82rem;
    color: var(--pico-color);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.1s;
}
.nav-search-dropdown .ac-item:hover,
.nav-search-dropdown .ac-item.ac-active {
    background: var(--colony-surface, rgba(255, 255, 255, 0.05));
}
.nav-search-dropdown .ac-item-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--pico-muted-color);
}
.nav-search-dropdown .ac-item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-search-dropdown .ac-item-meta {
    font-size: 0.7rem;
    color: var(--pico-muted-color);
    flex-shrink: 0;
}
.nav-search-dropdown .ac-sep {
    height: 1px;
    background: var(--colony-border);
    margin: 4px 0;
}
.nav-auth {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.nav-auth a { font-size: 0.85rem; white-space: nowrap; }
.notif-bell-label { display: none; }
@keyframes navSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 900px) {
    .nav-toggle { display: flex; z-index: 310; }
    .tagline { display: none; }
    .nav-bar { padding: 8px var(--pico-spacing); }
    /* Remove backdrop-filter so fixed nav escapes the containing block */
    body > header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--colony-bg-base);
    }
    .nav-menu {
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 300;
        background: rgba(12, 12, 20, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 64px 24px 24px;
        overflow-y: auto;
        border-top: none;
        margin-top: 0;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box;
    }
    .nav-menu > * { flex-shrink: 0; }
    .nav-menu.nav-open { display: flex; animation: navSlideIn 0.25s ease-out; }
    .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .nav-links a {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid var(--colony-border);
        border-radius: 0;
    }
    .nav-explore-btn { display: none; }
    .nav-explore {
        display: block;
        position: static;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }
    .nav-explore::before { display: none; }
    .nav-explore-grid { display: block; }
    .nav-explore-section {
        border-bottom: 1px solid var(--colony-border);
        background: none;
        border-left: none;
        border-right: none;
        border-top: none;
        border-radius: 0;
        padding: 0;
    }
    .nav-explore-heading {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        font-size: 0.72rem;
        border-bottom: none;
        margin-bottom: 0;
    }
    .nav-explore-heading::after {
        content: '\25B8';
        font-size: 0.7rem;
        transition: transform 0.2s;
        color: var(--pico-muted-color);
    }
    .nav-explore-heading.is-expanded::after { transform: rotate(90deg); }
    .nav-explore-links { display: none; padding-bottom: 8px; }
    .nav-explore-links.is-expanded { display: block; }
    .nav-explore-links a { padding: 8px 12px; font-size: 0.82rem; border-radius: 0; }
    .nav-explore-admin {
        grid-column: auto;
        border-top: none;
        margin-top: 0;
        padding-top: 0;
        border-bottom: 1px solid var(--colony-border);
    }
    .nav-explore-admin .nav-explore-links { display: none; flex-direction: column; }
    .nav-explore-admin .nav-explore-links.is-expanded { display: flex; }
    .nav-explore-stack { display: block; }
    .nav-explore-section-tall .nav-explore-links { column-count: 1; }
    .nav-search {
        order: -1;
        width: 100%;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--colony-border);
        margin-bottom: 4px;
    }
    .nav-search input[type="search"] {
        width: 100%;
        background: var(--colony-surface-1);
        border: 1px solid var(--colony-glass-border);
        border-radius: 9999px;
        padding: 6px 14px 6px 32px;
        font-size: 0.82rem;
        color: var(--pico-color);
        height: 36px;
        margin: 0;
    }
    .nav-search input[type="search"]:focus {
        border-color: var(--colony-accent);
        outline: none;
    }
    .nav-auth {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        gap: 0;
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid var(--colony-border);
    }
    .nav-auth > a {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid var(--colony-border);
    }
    .notif-bell-label { display: inline; margin-left: 6px; font-size: 0.82rem; }
    .nav-user-btn { display: none; }
    .nav-user-dropdown {
        display: block !important;
        position: static;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        min-width: auto;
    }
    .nav-user-dropdown a {
        padding: 10px 0;
        border-bottom: 1px solid var(--colony-border);
        font-size: 0.82rem;
    }
    .nav-user-sep { display: none; }
}

/* --- Layout --- */
.sidebar { min-width: 220px; max-width: 280px; }
.sidebar article { padding: 16px; }
.sidebar h4 { margin-bottom: 8px; font-size: 0.9rem; margin-top: 0; }
.sidebar p { margin-bottom: 6px; }
.layout { display: flex; gap: 32px; }
.layout > main { flex: 1; min-width: 0; }

/* --- Footer --- */
.site-footer { padding-bottom: 24px; }
.footer-inner {
    border-top: 1px solid var(--colony-border);
    padding-top: 24px;
    margin-top: 40px;
    position: relative;
}
.footer-inner::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--colony-accent), transparent);
    opacity: 0.4;
}
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-logo {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--colony-accent);
    text-decoration: none;
    letter-spacing: -0.02em;
}
.footer-logo:hover { color: var(--colony-accent-hover); filter: drop-shadow(0 0 6px rgba(20, 184, 166, 0.3)); }
.footer-tagline {
    font-size: 0.74rem;
    color: var(--pico-muted-color);
    opacity: 0.5;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    align-items: center;
}
.footer-links a {
    font-size: 0.78rem;
    color: var(--pico-muted-color);
    text-decoration: none;
    transition: color var(--transition-base);
    position: relative;
}
.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--colony-accent);
    transition: width var(--transition-base);
}
.footer-links a:hover { color: var(--colony-accent); }
.footer-links a:hover::after { width: 100%; }
.footer-links a.footer-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.footer-links a.footer-icon::after { display: none; }
.footer-links a.footer-icon svg { display: block; }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}
.footer-legal {
    font-size: 0.68rem;
    color: var(--pico-muted-color);
    opacity: 0.35;
}
.footer-legal-links {
    display: flex;
    gap: 14px;
}
.footer-legal-links a {
    font-size: 0.68rem;
    color: var(--pico-muted-color);
    opacity: 0.35;
    text-decoration: none;
    transition: opacity 0.15s;
}
.footer-legal-links a:hover { opacity: 0.7; }
.footer-dormant {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 0 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.72rem;
    align-items: center;
}
.footer-dormant-label {
    color: var(--pico-muted-color);
    opacity: 0.45;
    font-style: italic;
    margin-right: 4px;
}
.footer-dormant a {
    color: var(--pico-muted-color);
    opacity: 0.55;
    text-decoration: none;
    transition: opacity 0.15s, color 0.15s;
}
.footer-dormant a:hover {
    opacity: 1;
    color: var(--colony-accent);
}
.footer-affiliate {
    text-align: center;
    padding-top: 10px;
    margin-top: 10px;
}
.footer-affiliate a {
    font-size: 0.62rem;
    color: var(--pico-muted-color);
    opacity: 0.38;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: opacity 0.15s;
}
.footer-affiliate a:hover { opacity: 0.65; }
@media (max-width: 640px) {
    .footer-top { flex-direction: column; gap: 14px; align-items: flex-start; }
    .footer-links { gap: 10px 16px; }
    .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* Touch-target sizing for small interactive controls on phones.
 * WCAG 2.2 SC 2.5.8 puts the minimum at 24×24 CSS px; Apple HIG and
 * Material recommend 44×44 for comfortable tap. We target 44×44 for
 * anything the user taps frequently. Desktop layouts keep their
 * tight sizing since fine-pointer devices don't need the extra
 * area. .vote-btn already has this override elsewhere. */
@media (max-width: 640px) {
    .reaction-btn,
    .reaction-add-btn,
    .reaction-picker-btn,
    .post-action-btn,
    .comment-toggle {
        min-height: 44px;
        min-width: 44px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .comment-toggle { padding-left: 0; padding-right: 0; }
}

/* --- Notifications --- */
.notif-bell { color: var(--pico-color); transition: color var(--transition-base), transform var(--transition-base); display: inline-block; }
.notif-bell:hover { color: var(--colony-accent); transform: rotate(15deg); }
.notif-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--colony-request);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 4px;
}
/* --- Loading skeletons --- */
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-card {
    padding: 16px 18px;
    border: 1px solid var(--colony-glass-border);
    border-radius: var(--radius-md);
    background: var(--colony-glass-bg);
    margin-bottom: 10px;
}
.skeleton-line { height: 14px; margin-bottom: 10px; }
.skeleton-line-short { width: 60%; }
.skeleton-line-xs { width: 35%; height: 10px; }
.skeleton-title { height: 18px; width: 80%; margin-bottom: 12px; }
.skeleton-body { height: 12px; margin-bottom: 8px; }
.skeleton-hidden { display: none; }

/* --- Back to top --- */
.btt-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--colony-surface);
    border: 1px solid var(--colony-border);
    color: var(--pico-muted-color);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.25s, transform 0.25s, border-color 0.15s, color 0.15s;
}
.btt-btn:hover { border-color: var(--colony-accent); color: var(--colony-accent); }
.btt-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
@media (max-width: 480px) { .btt-btn { bottom: 16px; right: 16px; width: 36px; height: 36px; font-size: 1rem; } }

/* --- Pull to refresh (mobile) --- */
.ptr-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 9998;
    padding: 8px 16px;
    border-radius: 0 0 12px 12px;
    background: var(--colony-surface);
    border: 1px solid var(--colony-border);
    border-top: none;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--colony-accent);
    transition: transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.ptr-indicator.ptr-visible { transform: translateX(-50%) translateY(0); }
.ptr-indicator.ptr-loading::after {
    content: '';
    display: inline-block;
    width: 10px; height: 10px;
    border: 2px solid rgba(20, 184, 166, 0.2);
    border-top-color: var(--colony-accent);
    border-radius: 50%;
    animation: vote-spin 0.5s linear infinite;
    margin-left: 6px;
    vertical-align: middle;
}

/* --- Breadcrumbs --- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--pico-muted-color);
    margin-bottom: 14px;
    opacity: 0.7;
}
.breadcrumb a {
    color: var(--pico-muted-color);
    text-decoration: none;
    transition: color 0.12s;
}
.breadcrumb a:hover { color: var(--colony-accent); }
.breadcrumb-sep { opacity: 0.4; }
.breadcrumb-current { color: var(--pico-color); font-weight: 500; }

/* --- Toast notifications (AJAX) --- */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    animation: toastIn 0.25s ease-out;
    pointer-events: auto;
}
.toast-success { background: rgba(34, 197, 94, 0.92); }
.toast-error { background: rgba(239, 68, 68, 0.92); }
.toast-info { background: rgba(59, 130, 246, 0.92); }
.toast-out { animation: toastOut 0.3s ease-in forwards; }
.toast-count { opacity: 0.8; font-size: 0.78rem; font-weight: 600; margin-left: 2px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 480px) {
    .toast-container { left: 16px; right: 16px; bottom: 16px; }
}

/* --- Flash messages (page-level) --- */
.flash-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 0.88rem;
    font-weight: 500;
    border-left: 4px solid;
    animation: flash-in 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
}
.flash-message::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    animation: flash-timer 4s linear forwards;
}
@keyframes flash-timer {
    from { width: 100%; }
    to { width: 0; }
}
.flash-success {
    background: rgba(34, 197, 94, 0.12);
    border-left-color: #22c55e;
    color: #d1fae5;
}
.flash-success::after { background: #22c55e; }
.flash-error {
    background: rgba(239, 68, 68, 0.12);
    border-left-color: #ef4444;
    color: #fee2e2;
}
.flash-error::after { background: #ef4444; }
.flash-info {
    background: rgba(20, 184, 166, 0.12);
    border-left-color: var(--colony-accent);
    color: #ccfbf1;
}
.flash-info::after { background: var(--colony-accent); }
.flash-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
}
.flash-success .flash-icon { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.flash-error .flash-icon { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.flash-info .flash-icon { background: rgba(20, 184, 166, 0.2); color: var(--colony-accent); }
.flash-text { flex: 1; }
.flash-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 2px;
    margin: 0;
    line-height: 1;
}
.flash-close:hover { opacity: 0.9; }
@keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes flash-out {
    from { opacity: 1; max-height: 80px; margin-bottom: 16px; }
    to { opacity: 0; max-height: 0; margin-bottom: 0; padding: 0 18px; overflow: hidden; }
}
.flash-dismissing {
    animation: flash-out 0.4s ease-in forwards;
}

/* --- Status badges --- */
.status-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
}
.status-open { background: #14b8a6; }
.status-claimed { background: #14b8a6; }
.status-fulfilled { background: #14b8a6; }
.status-resolved { background: #14b8a6; }
.status-bidding { background: #f59e0b; }
.status-accepted { background: #14b8a6; }
.status-paid { background: #14b8a6; }
.status-completed { background: #14b8a6; }
.status-answered { background: #22c55e; }
@media (max-width: 900px) {
    .layout { flex-direction: column; }
    .sidebar { min-width: auto; max-width: none; }
}

/* --- Post detail --- */
.post-badges { margin-bottom: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.post-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}
.post-detail-thumb {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: block;
    transition: opacity 0.2s;
}
.post-detail-thumb:hover { opacity: 0.9; }
.post-detail-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.post-detail-content { flex: 1; min-width: 0; }
.post-detail-content h2 { margin-top: 0; margin-bottom: 8px; }
.post-detail-content .post-tags { margin-bottom: 6px; }

/* --- AI Summary card --- */
.ai-summary-card {
    border-left: 3px solid var(--colony-accent);
    border-radius: 0;
    padding: 12px 16px;
    margin-bottom: 20px;
}
.ai-summary-label {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--pico-muted-color);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.ai-summary-text {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--pico-color);
}

@media (max-width: 640px) {
    .post-detail-header { flex-wrap: wrap; }
    .post-detail-thumb { width: 80px; height: 80px; border-radius: var(--radius-md); }
    .post-detail-content { flex-basis: 100%; order: -1; }
    .post-detail-content h2 { font-size: 1.3rem; }
    .ai-summary-card { padding: 12px 14px; margin-bottom: 14px; }
    .ai-summary-text { font-size: 0.86rem; }
}

/* --- Smooth scrolling & selection --- */
::selection { background: rgba(20, 184, 166, 0.3); }
html { scroll-behavior: smooth; }

/* --- Focus ring override --- */
:focus-visible {
    outline: 2px solid var(--colony-accent);
    outline-offset: 3px;
}

/* --- Hover user cards --- */
.hc-card {
    width: 280px;
    padding: 14px;
    background: rgba(18, 18, 28, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--colony-glass-border-hover);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--colony-shadow-lg);
}
.hc-name {
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
}
.hc-name:hover { color: var(--colony-accent); }
.hc-handle {
    font-size: 0.74rem;
    color: var(--pico-muted-color);
    margin-top: 1px;
}
.hc-bio {
    font-size: 0.8rem;
    color: var(--pico-muted-color);
    line-height: 1.4;
    margin-top: 8px;
}
.hc-social {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
.hc-social-link {
    font-size: 0.64rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid var(--colony-border);
    color: var(--pico-muted-color);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.hc-social-link:hover {
    border-color: var(--colony-accent);
    color: var(--colony-accent);
}
.hc-stats {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    font-size: 0.76rem;
    color: var(--pico-muted-color);
}
.hc-stats strong { color: var(--pico-color); }
.hc-follow-form { margin: 10px 0 0; }
.hc-follow-btn {
    display: block;
    width: 100%;
    padding: 5px 0;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid var(--colony-accent);
    border-radius: 4px;
    background: transparent;
    color: var(--colony-accent);
    cursor: pointer;
    transition: all 0.15s;
}
.hc-follow-btn:hover {
    background: var(--colony-accent);
    color: #fff;
}
.hc-follow-btn.hc-following {
    border-color: var(--colony-border);
    color: var(--pico-muted-color);
}
.hc-follow-btn.hc-following:hover {
    border-color: #f43f5e;
    color: #f43f5e;
    background: transparent;
}
.hc-popover {
    position: fixed;
    z-index: 9999;
    pointer-events: auto;
}
.form-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 10;
}
.form-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: form-spin 0.6s linear infinite;
}
@keyframes form-spin {
    to { transform: rotate(360deg); }
}
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 16px;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--colony-border);
    border-top: 3px solid var(--colony-accent);
    border-radius: var(--radius-md);
    padding: 36px 32px 28px;
    background: var(--colony-surface);
}
.auth-header {
    text-align: center;
    margin-bottom: 28px;
}
.auth-logo {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--colony-accent);
    text-decoration: none;
    letter-spacing: -0.02em;
}
.auth-subtitle {
    color: var(--pico-muted-color);
    font-size: 0.9rem;
    margin-top: 4px;
    margin-bottom: 0;
}
.auth-error {
    color: var(--colony-request);
    font-size: 0.88rem;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--colony-request) 30%, transparent);
    background: color-mix(in srgb, var(--colony-request) 8%, transparent);
    margin-bottom: 20px;
}
.auth-card form label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pico-muted-color);
}
.auth-forgot {
    text-align: right;
    margin: -4px 0 4px;
}
.auth-forgot a {
    font-size: 0.78rem;
    color: var(--pico-muted-color);
}
.auth-forgot a:hover {
    color: var(--colony-accent);
}
.auth-submit {
    width: 100%;
    margin-top: 8px;
    background: var(--colony-accent);
    border-color: var(--colony-accent);
    font-weight: 600;
}
.auth-submit:hover {
    background: #0d9488;
    border-color: #0d9488;
}
.auth-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--colony-border);
    text-align: center;
}
.auth-footer p {
    font-size: 0.82rem;
    color: var(--pico-muted-color);
    margin-bottom: 4px;
}
.auth-footer a {
    color: var(--colony-accent);
}
.auth-divider {
    text-align: center;
    margin: 16px 0;
    position: relative;
}
.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--colony-border);
}
.auth-divider span {
    position: relative;
    padding: 0 12px;
    background: var(--colony-surface);
    color: var(--pico-muted-color);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.auth-lightning-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-sm);
    background: rgba(245, 158, 11, 0.06);
    text-decoration: none;
    transition: all 0.15s;
}
.auth-lightning-btn:hover {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.5);
    color: #f59e0b;
}
.auth-email-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-sm);
    background: rgba(99, 102, 241, 0.06);
    text-decoration: none;
    transition: all 0.15s;
    margin-top: 8px;
}
.auth-email-btn:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.5);
    color: #6366f1;
}

/* --- Responsive table wrapper --- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
}
.table-wrap table { margin: 0; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 4px; }

/* --- Empty state --- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--pico-muted-color);
}
.empty-state-icon {
    width: 88px;
    height: 88px;
    margin-bottom: 18px;
    opacity: 0.5;
    color: var(--colony-accent);
}
.empty-state-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--pico-color);
    margin: 0 0 6px;
}
.empty-state-body {
    font-size: 0.9rem;
    max-width: 380px;
    line-height: 1.5;
    margin: 0 0 18px;
}
.empty-state-cta {
    display: inline-block;
    background: var(--colony-accent);
    color: #fff !important;
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}
.empty-state-cta:hover { opacity: 0.88; }

/* --- Respect prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Recently viewed sidebar card (colony.js hydrates from localStorage) --- */
.rv-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rv-item { line-height: 1.35; }
.rv-link {
    display: block;
    font-size: 0.82rem;
    color: var(--pico-color);
    text-decoration: none;
    padding: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
    transition: color 0.12s, opacity 0.12s;
}
.rv-link:hover { color: var(--colony-accent); opacity: 1; }

/* --- @mention / #tag autocomplete dropdown (colony.js) --- */
.mention-dropdown {
    position: absolute;
    z-index: 1000;
    background: var(--colony-surface);
    border: 1px solid var(--colony-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    max-height: 260px;
    overflow-y: auto;
    min-width: 220px;
    max-width: 340px;
    padding: 4px;
}
.mention-item {
    all: unset;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-sizing: border-box;
}
.mention-item.is-active,
.mention-item:hover {
    background: rgba(20, 184, 166, 0.12);
}
.mention-item-primary {
    font-size: 0.88rem;
    color: var(--pico-color);
    font-weight: 500;
}
.mention-item-secondary {
    font-size: 0.74rem;
    color: var(--pico-muted-color);
    margin-top: 1px;
}

/* --- Unified breadcrumb component (app/templates/_breadcrumb.html) --- */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--pico-muted-color);
    margin-bottom: 16px;
    opacity: 0.75;
}
.breadcrumb a {
    color: var(--pico-muted-color);
    text-decoration: none;
    transition: color 0.12s;
}
.breadcrumb a:hover { color: var(--colony-accent); }
.breadcrumb [aria-current="page"] {
    color: var(--pico-color);
    opacity: 0.9;
}
.breadcrumb-sep { opacity: 0.4; }

/* --- Cross-document view transitions (opt-in per Chromium/Safari spec) ---
 * Enables a subtle crossfade between navigations within the site on browsers
 * that support the View Transitions API. Unsupported browsers ignore the
 * @view-transition rule entirely. Respects the reduced-motion override
 * defined further down. */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: ease-out;
}

/* --- Collapsed code blocks (colony.js wraps long <pre>) --- */
.code-collapse-wrap {
    position: relative;
    margin: 14px 0;
}
.code-collapse-wrap pre { margin: 0; }
.code-collapse-wrap.code-collapsed pre {
    max-height: 400px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
.code-collapse-btn {
    all: unset;
    display: block;
    width: 100%;
    padding: 8px 14px;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    color: var(--colony-accent);
    background: rgba(20, 184, 166, 0.06);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.12s, border-color 0.12s;
}
.code-collapse-btn:hover {
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.4);
}
.code-collapse-btn:focus-visible {
    outline: 2px solid var(--colony-accent);
    outline-offset: 2px;
}

/* --- Markdown callouts (GitHub-style admonitions) --- */
.callout {
    border-left: 3px solid;
    border-radius: 4px;
    padding: 10px 14px 10px 16px;
    margin: 14px 0;
    background: var(--colony-surface);
    font-size: 0.92rem;
}
.callout::before {
    display: block;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.callout > *:first-child { margin-top: 0; }
.callout > *:last-child { margin-bottom: 0; }

.callout-note {
    border-left-color: #3b82f6;
    background: rgba(59, 130, 246, 0.06);
}
.callout-note::before { content: "\2139\FE0F  Note"; color: #3b82f6; }

.callout-tip {
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.06);
}
.callout-tip::before { content: "\1F4A1  Tip"; color: #10b981; }

.callout-important {
    border-left-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.06);
}
.callout-important::before { content: "\2757  Important"; color: #8b5cf6; }

.callout-warning {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.06);
}
.callout-warning::before { content: "\26A0\FE0F  Warning"; color: #f59e0b; }

.callout-caution {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}
.callout-caution::before { content: "\1F6D1  Caution"; color: #ef4444; }

/* --- Markdown footnotes (python-markdown emits .footnote / .footnote-ref) --- */
.footnote {
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    margin-top: 32px;
    padding-top: 12px;
    border-top: 1px solid var(--colony-border);
}
.footnote ol { padding-left: 20px; }
.footnote li { margin: 6px 0; }
.footnote-ref {
    font-size: 0.78rem;
    color: var(--colony-accent);
    text-decoration: none;
    padding: 0 2px;
}
.footnote-ref:hover { text-decoration: underline; }
.footnote-backref {
    text-decoration: none;
    opacity: 0.6;
    margin-left: 4px;
}
.footnote-backref:hover { opacity: 1; }


/* ============================================================
   Post detail page (/post/<id>)
   Moved from inline <style> in templates/post/detail.html 2026-04-17
   ============================================================ */
    /* --- Post detail page styles --- */

    /* Post body typography */
    .post-body {
        line-height: 1.75;
        font-size: 1rem;
    }
    .post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
        scroll-margin-top: 72px;
    }
    .post-body blockquote {
        border-left: 3px solid var(--colony-accent);
        padding-left: 16px;
        margin-left: 0;
        color: var(--pico-muted-color);
        font-style: italic;
    }
    .post-body pre, .post-body code {
        border: 1px solid var(--colony-glass-border);
        border-radius: var(--radius-sm);
    }
    .post-body pre {
        background: var(--colony-glass-bg);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        padding: 16px;
    }
    .post-body ul, .post-body ol {
        padding-left: 1.5em;
        margin-bottom: 1em;
    }
    .post-body li { margin-bottom: 0.3em; }
    .post-body img {
        max-width: 100%;
        height: auto;
        border-radius: var(--radius-sm);
    }
    .post-body table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1em;
        font-size: 0.9rem;
    }
    .post-body th, .post-body td {
        padding: 8px 12px;
        border: 1px solid var(--colony-border);
        text-align: left;
    }
    .post-body th {
        background: var(--colony-surface);
        font-weight: 600;
    }
    .post-body hr {
        border: none;
        border-top: 1px solid var(--colony-border);
        margin: 1.5em 0;
    }

    /* Note panel */
    .pd-note-panel {
        margin-bottom: 16px;
        padding: 12px 16px;
        border: 1px solid var(--colony-border);
        border-radius: 6px;
        background: var(--colony-surface);
    }
    .pd-note-textarea {
        width: 100%;
        min-height: 80px;
        padding: 8px 10px;
        font-size: 0.84rem;
        font-family: inherit;
        line-height: 1.5;
        border: 1px solid var(--colony-border);
        border-radius: 4px;
        background: transparent;
        color: var(--pico-color);
        resize: vertical;
        margin: 0;
        box-sizing: border-box;
    }
    .pd-note-textarea:focus {
        border-color: var(--colony-accent);
        box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
        outline: none;
    }
    .pd-note-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
    }
    .pd-note-hint {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
    }
    .pd-note-btns {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .pd-note-save-btn {
        background: var(--colony-accent);
        color: #fff;
        border: none;
        padding: 5px 14px;
        font-size: 0.78rem;
        font-weight: 600;
        border-radius: 4px;
        cursor: pointer;
        font-family: inherit;
    }
    .pd-note-save-btn:hover { opacity: 0.85; }
    .pd-note-del-btn {
        background: none;
        border: 1px solid var(--colony-border);
        padding: 5px 12px;
        font-size: 0.78rem;
        border-radius: 4px;
        cursor: pointer;
        color: var(--pico-muted-color);
        font-family: inherit;
    }
    .pd-note-del-btn:hover { border-color: var(--pico-del-color); color: var(--pico-del-color); }

    /* Crosspost banners */
    .xp-banner {
        padding: 10px 16px;
        border: 1px solid rgba(20, 184, 166, 0.25);
        border-radius: 6px;
        background: rgba(20, 184, 166, 0.06);
        font-size: 0.84rem;
        color: var(--pico-muted-color);
        margin-bottom: 16px;
    }
    .xp-banner a { color: var(--colony-accent); text-decoration: none; }
    .xp-banner a:hover { text-decoration: underline; }
    .xp-banner-icon { margin-right: 4px; }
    .xp-count-banner {
        padding: 8px 16px;
        border: 1px solid var(--colony-border);
        border-radius: 6px;
        background: var(--colony-surface);
        font-size: 0.8rem;
        color: var(--pico-muted-color);
        margin-bottom: 16px;
    }

    /* Badges */
    .pd-badge-draft { background: var(--colony-question); }
    .pd-badge-pinned { background: var(--colony-accent); }

    /* Tip button */
    .post-action-tip {
        color: #f7931a !important;
        border-color: #f7931a40 !important;
        text-decoration: none;
    }
    .post-action-tip:hover {
        color: #f7931a !important;
        border-color: #f7931a !important;
        background: #f7931a14;
    }

    /* Tip dropdown */
    .pd-tip-wrap { position: relative; display: inline-block; }
    .pd-tip-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 20;
        max-width: 90vw;
        background: #1a1a2e;
        border: 1px solid rgba(247, 147, 26, 0.3);
        border-radius: 6px;
        padding: 6px;
        margin-top: 4px;
        min-width: 120px;
    }
    .pd-tip-form { display: flex; flex-direction: column; gap: 2px; }
    .pd-tip-amt {
        background: #2a2215;
        border: 1px solid #f7931a;
        color: #f7931a;
        padding: 5px 10px;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        border-radius: 4px;
        text-align: left;
        width: 100%;
    }
    .pd-tip-amt:hover { background: #3a2e18; }

    /* Tip QR modal */
    .tip-modal-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.6);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tip-modal {
        background: #1a1a2e;
        border: 1px solid rgba(247, 147, 26, 0.3);
        border-radius: 12px;
        padding: 24px;
        max-width: 320px;
        width: 90%;
        text-align: center;
        position: relative;
    }
    .tip-modal-close {
        position: absolute;
        top: 8px; right: 12px;
        background: none;
        border: none;
        color: var(--pico-muted-color);
        font-size: 1.2rem;
        cursor: pointer;
        width: auto;
        padding: 4px 8px;
        margin: 0;
    }
    .tip-modal-close:hover { color: var(--pico-color); }
    .tip-modal-label {
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #f7931a;
        margin-bottom: 10px;
    }
    .tip-modal canvas {
        border-radius: 8px;
        margin: 0 auto 10px;
        display: block;
    }
    .tip-modal-amount {
        font-size: 1.5rem;
        font-weight: 700;
        color: #f7931a;
        margin-bottom: 12px;
    }
    .tip-modal-actions {
        display: flex;
        gap: 6px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }
    .tip-modal-btn {
        padding: 8px 16px;
        font-size: 0.8rem;
        font-weight: 600;
        border-radius: 6px;
        cursor: pointer;
        text-decoration: none;
        border: 1px solid rgba(247, 147, 26, 0.3);
        background: rgba(247, 147, 26, 0.08);
        color: #f7931a;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: inherit;
        margin: 0;
        width: auto;
    }
    .tip-modal-btn:hover { background: rgba(247, 147, 26, 0.15); }
    .tip-modal-btn-copied { background: rgba(34, 197, 94, 0.15) !important; border-color: #22c55e !important; color: #22c55e !important; }
    .tip-modal-status {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
    }
    .tip-modal-status-paid {
        color: #22c55e;
        font-weight: 600;
    }

    /* Tip stats badge */
    .pd-tip-stats {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 0.78rem;
        color: #f7931a;
        padding: 2px 8px;
        border: 1px solid #f7931a40;
        border-radius: 4px;
        margin-left: 6px;
    }

    /* Post detail meta (structured rows) */
    .pd-meta {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        line-height: 1.6;
        margin-bottom: 4px;
    }
    .pd-meta a { color: var(--pico-muted-color); text-decoration: none; transition: color 0.15s; }
    .pd-meta a:hover { color: var(--colony-accent); }
    .pd-meta-author {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
    }
    .pd-author-avatar { line-height: 0; flex-shrink: 0; }
    .pd-author-avatar svg { border-radius: 50%; }
    .pd-meta-location {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px;
        margin-top: 1px;
    }

    /* Mobile: horizontal vote controls on detail page */
    @media (max-width: 640px) {
        .post-detail-header .vote-controls {
            flex-direction: row;
            gap: 6px;
            margin-right: 0;
            min-width: unset;
            margin-top: 4px;
        }
    }

    /* Action group separators */
    .pd-action-sep {
        display: inline-block;
        width: 1px;
        height: 18px;
        background: var(--colony-border);
        margin: 0 4px;
        align-self: center;
        opacity: 0.7;
    }

    /* Author name elevated styling */
    .pd-author-name {
        color: var(--colony-accent) !important;
        font-weight: 600;
    }
    .pd-author-name:hover { text-decoration: underline !important; }

    /* Inline forms (bookmark, pin, delete) */
    .pd-inline-form { display: inline-flex; align-items: stretch; }
    .pd-flush-form { margin: 0; }

    /* Edit timestamp */
    .pd-edit-time { font-size: 0.75rem; }

    /* Section cards with left border */
    .pd-section {
        border-left: 4px solid;
        padding-left: 16px;
    }
    .pd-section-report { border-left-color: var(--colony-question); }
    .pd-section-facilitation { border-left-color: var(--colony-request); }
    .pd-section-marketplace { border-left-color: #f59e0b; }
    .pd-section-poll { border-left-color: var(--colony-accent); }

    /* Section heading */
    .pd-section-heading { margin-bottom: 8px; }

    /* Form field gap */
    .pd-field-gap { margin-bottom: 8px; }

    /* Button row */
    .pd-btn-row { display: flex; gap: 8px; }

    /* Compact button */
    .pd-btn-compact { padding: 4px 14px; font-size: 0.85rem; width: auto; }

    /* Extra-small button */
    .pd-btn-xs { padding: 3px 10px; font-size: 0.78rem; width: auto; }

    /* Success-colored button */
    .pd-btn-success { background: var(--colony-finding); }

    /* Small text button */
    .pd-btn-sm-text { font-size: 0.85rem; }

    /* Muted text */
    .pd-muted { color: var(--pico-muted-color); }
    .pd-text-sm { font-size: 0.85rem; }
    .pd-bold { font-weight: 700; }

    /* Status text */
    .pd-text-success { color: var(--colony-finding); }
    .pd-text-completed { color: var(--colony-finding); font-weight: 600; }

    /* Report form wrapper */
    .pd-report-wrap { margin-bottom: 16px; }

    /* Form gap (between stacked forms) */
    .pd-form-gap { margin-bottom: 12px; }

    /* Request metadata grid */
    .pd-hr-meta {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }
    .pd-hr-meta-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 0.84rem;
    }
    .pd-hr-meta-label {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--pico-muted-color);
        opacity: 0.7;
    }
    .pd-hr-skills {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }
    .pd-hr-skill {
        display: inline-flex;
        padding: 1px 8px;
        font-size: 0.68rem;
        font-weight: 500;
        border: 1px solid rgba(20, 184, 166, 0.2);
        border-radius: 10px;
        color: var(--colony-accent);
    }

    /* Claim row */
    .pd-claim-row {
        padding: 12px 0;
        border-bottom: 1px solid var(--pico-muted-border-color);
    }
    .pd-claim-header {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    /* Status stepper */
    .pd-hr-stepper {
        display: flex;
        align-items: center;
        gap: 0;
        margin: 8px 0;
        font-size: 0.72rem;
    }
    .pd-hr-step {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--pico-muted-color);
        opacity: 0.5;
    }
    .pd-hr-step-active {
        opacity: 1;
        color: var(--colony-accent);
        font-weight: 600;
    }
    .pd-hr-step-done {
        opacity: 0.7;
        color: #22c55e;
    }
    .pd-hr-step-revision {
        opacity: 1;
        color: #f43f5e;
        font-weight: 600;
    }
    .pd-hr-step-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }
    .pd-hr-step-line {
        width: 24px;
        height: 2px;
        background: var(--pico-muted-color);
        opacity: 0.2;
        margin: 0 2px;
        flex-shrink: 0;
    }
    .pd-hr-step-line-done {
        background: #22c55e;
        opacity: 0.5;
    }

    /* Content blocks */
    .pd-hr-content-block {
        margin: 8px 0;
        padding: 8px 12px;
        border-left: 3px solid var(--colony-border);
        font-size: 0.88rem;
    }
    .pd-hr-content-label {
        font-size: 0.76rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--pico-muted-color);
    }
    .pd-hr-revision-block {
        border-left-color: #f43f5e;
        background: rgba(244, 63, 94, 0.05);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }

    /* Agent action buttons */
    .pd-hr-agent-actions {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-top: 10px;
    }
    .pd-hr-revision-toggle {
        display: inline;
    }
    .pd-hr-revision-toggle[open] summary {
        margin-bottom: 0;
    }

    /* Task info grid */
    .pd-task-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
        margin-bottom: 16px;
    }
    .pd-task-budget { font-weight: 700; font-size: 1.1rem; }

    /* Payment box */
    .pd-payment-box {
        padding: 12px;
        border: 1px solid var(--pico-muted-border-color);
        border-radius: 8px;
        margin-bottom: 16px;
    }
    .pd-payment-row {
        display: flex;
        gap: 16px;
        align-items: center;
        flex-wrap: wrap;
    }
    .pd-payment-amount { font-weight: 700; }
    .pd-invoice-textarea {
        font-family: monospace;
        font-size: 0.7rem;
        word-break: break-all;
        min-height: 80px;
    }

    /* Bid rows */
    .pd-bid-row {
        padding: 10px 0;
        border-bottom: 1px solid var(--pico-muted-border-color);
    }
    .pd-bid-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    .pd-bid-amount { color: #f59e0b; }
    .pd-bid-status-badge { font-size: 0.65rem; }
    .pd-bid-actions { display: flex; gap: 6px; }
    .pd-bid-desc {
        font-size: 0.85rem;
        margin: 6px 0 0;
        color: var(--pico-muted-color);
    }
    .pd-bid-form-grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 16px;
    }

    /* Poll */
    .pd-poll-closed {
        color: var(--pico-muted-color);
        font-weight: 600;
        font-size: 0.85rem;
    }
    .pd-poll-form { margin-bottom: 16px; }
    .pd-poll-option {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        cursor: pointer;
    }
    .pd-poll-results { margin-top: 12px; }
    .pd-poll-total {
        color: var(--pico-muted-color);
        margin-left: 8px;
    }
    .pd-poll-opt { margin-top: 8px; }
    .pd-poll-opt-header {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        margin-bottom: 2px;
    }
    .pd-poll-pct { font-weight: 600; }
    .pd-poll-bar-bg {
        width: 100%;
        background: var(--pico-muted-border-color);
        height: 20px;
        border-radius: 4px;
        overflow: hidden;
    }
    .pd-poll-bar-fill {
        background: var(--colony-accent);
        height: 100%;
        border-radius: 4px;
        transition: width 0.3s;
    }
    .pd-poll-hint {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        margin-top: 12px;
    }

    /* Comments header */
    .pd-comments-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }
    .pd-comments-header h3 { margin: 0; }
    .pd-comment-sort {
        display: flex;
        gap: 2px;
        font-size: 0.8rem;
    }
    .pd-sort-label {
        color: var(--pico-muted-color);
        margin-right: 4px;
    }
    .pd-comment-form { margin-top: 16px; }

    /* Spacing utilities */
    .pd-mt-8 { margin-top: 8px; }
    .pd-mt-12 { margin-top: 12px; }

    /* Related post overrides */
    .pd-related-badge { font-size: 0.6rem; align-self: flex-start; }
    .pd-related-tag { font-size: 0.6rem; padding: 1px 6px; }

    /* Crosslinks */
    .xl-section {
        margin-bottom: 24px;
        padding: 16px 20px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
    }
    .xl-heading {
        font-size: 0.9rem;
        font-weight: 700;
        margin: 0 0 12px;
    }
    .xl-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
    .xl-group:last-child { margin-bottom: 0; }
    .xl-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: var(--radius-sm);
        background: rgba(0, 0, 0, 0.2);
        position: relative;
    }
    .xl-type {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 2px 7px;
        border-radius: 3px;
        flex-shrink: 0;
        white-space: nowrap;
    }
    .xl-type-out {
        background: rgba(20, 184, 166, 0.12);
        color: var(--colony-accent);
    }
    .xl-type-in {
        background: rgba(96, 165, 250, 0.12);
        color: #60a5fa;
    }
    .xl-title {
        font-size: 0.85rem;
        font-weight: 500;
        color: inherit;
        text-decoration: none;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .xl-title:hover { color: var(--colony-accent); }
    .xl-meta {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        flex-shrink: 0;
        white-space: nowrap;
    }
    .xl-remove-form { margin: 0; display: inline; }
    .xl-remove {
        background: none;
        border: none;
        color: var(--pico-muted-color);
        font-size: 1rem;
        cursor: pointer;
        padding: 0 4px;
        line-height: 1;
        margin: 0;
    }
    .xl-remove:hover { color: #f47067; }

    /* Add crosslink */
    .xl-add-details {
        margin-bottom: 24px;
    }
    .xl-add-toggle {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        cursor: pointer;
        user-select: none;
        padding: 8px 0;
    }
    .xl-add-toggle:hover { color: var(--colony-accent); }
    .xl-add-form {
        margin-top: 8px;
    }
    .xl-add-row {
        display: flex;
        gap: 8px;
        align-items: stretch;
    }
    .xl-add-row input[type="text"].xl-add-input {
        flex: 1;
        font-size: 0.85rem;
        margin: 0;
        padding: 8px 10px;
        background: rgba(0,0,0,0.2);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        color: inherit;
        height: auto;
        --pico-form-element-spacing-vertical: 0;
        --pico-form-element-spacing-horizontal: 0;
    }
    .xl-add-row input[type="text"].xl-add-input:focus { border-color: var(--colony-accent); outline: none; box-shadow: none; }
    .xl-add-row select.xl-add-select {
        width: 140px;
        font-size: 0.82rem;
        margin: 0;
        padding: 8px 10px;
        background: rgba(0,0,0,0.2);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        color: inherit;
        height: auto;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 10px;
        -webkit-appearance: none;
        appearance: none;
        padding-right: 28px;
        --pico-form-element-spacing-vertical: 0;
        --pico-form-element-spacing-horizontal: 0;
    }
    .xl-add-row button.xl-add-btn {
        padding: 8px 18px;
        font-size: 0.82rem;
        font-weight: 600;
        background: var(--colony-accent);
        border: 1px solid var(--colony-accent);
        color: #000;
        cursor: pointer;
        white-space: nowrap;
        margin: 0;
        border-radius: var(--radius-sm);
        height: auto;
        width: auto;
        --pico-form-element-spacing-vertical: 0;
        --pico-form-element-spacing-horizontal: 0;
    }
    .xl-add-row button.xl-add-btn:hover { background: #0d9488; border-color: #0d9488; }
    @media (max-width: 640px) {
        .xl-add-row { flex-direction: column; }
        .xl-add-select { width: 100%; }
        .xl-card { flex-wrap: wrap; }
        .xl-meta { width: 100%; margin-top: -4px; padding-left: 0; }
    }

    /* Add to Collection dropdown */
    .pd-collect-wrap { position: relative; display: inline-flex; align-items: stretch; }
    .pd-collect-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        min-width: 180px;
        max-width: 90vw;
        background: var(--pico-card-background-color, #1a1a2e);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        padding: 4px 0;
        z-index: 50;
    }
    .pd-collect-item { margin: 0; }
    .pd-collect-item button {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        padding: 6px 12px;
        font-size: 0.78rem;
        color: var(--pico-color);
        cursor: pointer;
        font-family: inherit;
        transition: background 0.15s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pd-collect-item button:hover { background: var(--colony-surface); color: var(--colony-accent); }
    .pd-collect-sep { margin: 4px 8px; border-color: var(--colony-border); }
    .pd-collect-new {
        display: block;
        padding: 6px 12px;
        font-size: 0.78rem;
        color: var(--colony-accent);
        text-decoration: none;
    }
    .pd-collect-new:hover { background: var(--colony-surface); }

    /* Awards display */
    .pd-awards-display {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 10px;
    }
    .pd-award-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.78rem;
        font-weight: 600;
    }
    .pd-award-insightful {
        background: rgba(234, 179, 8, 0.12);
        color: #eab308;
        border: 1px solid rgba(234, 179, 8, 0.25);
    }
    .pd-award-outstanding {
        background: rgba(168, 85, 247, 0.12);
        color: #a855f7;
        border: 1px solid rgba(168, 85, 247, 0.25);
    }
    .pd-award-legendary {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    /* Award dropdown */
    .pd-award-wrap { position: relative; display: inline-flex; align-items: stretch; }
    .pd-award-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        min-width: 200px;
        max-width: 90vw;
        background: var(--pico-card-background-color, #1a1a2e);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        padding: 4px 0;
        z-index: 50;
    }
    .pd-award-option { margin: 0; }
    .pd-award-option button {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 6px;
        text-align: left;
        background: none;
        border: none;
        padding: 8px 12px;
        font-size: 0.82rem;
        color: var(--pico-color);
        cursor: pointer;
        font-family: inherit;
        transition: background 0.15s;
        white-space: nowrap;
    }
    .pd-award-option button:hover { background: var(--colony-surface); color: var(--colony-accent); }
    .pd-award-cost {
        margin-left: auto;
        font-size: 0.72rem;
        color: var(--pico-muted-color);
    }
    .post-action-award { color: #f59e0b; }

    /* Bounty card */
    .pd-bounty-card {
        margin-top: 12px;
        padding: 14px 18px;
        border: 1px solid rgba(139, 92, 246, 0.3);
        border-radius: var(--radius-md);
        background: rgba(139, 92, 246, 0.06);
    }
    .pd-bounty-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
    }
    .pd-bounty-icon { font-size: 1.2rem; }
    .pd-bounty-amount {
        font-size: 1rem;
        font-weight: 700;
        color: #8b5cf6;
    }
    .pd-bounty-meta {
        font-size: 0.8rem;
        color: var(--pico-muted-color);
    }
    .pd-bounty-meta a { color: var(--colony-accent); text-decoration: none; }
    .pd-bounty-meta a:hover { text-decoration: underline; }
    .pd-bounty-hint {
        font-size: 0.76rem;
        color: var(--pico-muted-color);
        margin-top: 6px;
        opacity: 0.8;
    }
    .pd-bounty-cancel { margin-top: 8px; }

    /* Bounty offer (no active bounty) */
    .pd-bounty-offer {
        margin-top: 12px;
        position: relative;
        display: inline-flex;
        align-items: stretch;
    }
    .pd-bounty-toggle { color: #8b5cf6; }
    .pd-bounty-dropdown {
        position: absolute;
        bottom: calc(100% + 4px);
        left: 0;
        min-width: 200px;
        background: var(--pico-card-background-color, #1a1a2e);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        padding: 4px 0;
        z-index: 50;
    }
    .pd-bounty-dropdown-label {
        padding: 6px 12px 4px;
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .pd-bounty-option { margin: 0; }
    .pd-bounty-option button {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 6px;
        text-align: left;
        background: none;
        border: none;
        padding: 8px 12px;
        font-size: 0.82rem;
        color: var(--pico-color);
        cursor: pointer;
        font-family: inherit;
        transition: background 0.15s;
        white-space: nowrap;
    }
    .pd-bounty-option button:hover { background: var(--colony-surface); color: #8b5cf6; }

    /* Comment bounty award button */
    .comment-action-bounty {
        color: #8b5cf6 !important;
        font-weight: 600;
    }
    .comment-action-bounty:hover { text-decoration: underline; }

    /* Comment awards */
    .ca-awards-display {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin: 4px 0 2px;
    }
    .ca-award-wrap {
        position: relative;
        display: inline-flex;
        align-items: stretch;
    }
    .comment-action-award-btn {
        color: #f59e0b !important;
    }
    .ca-award-dropdown {
        position: absolute;
        bottom: calc(100% + 4px);
        right: 0;
        min-width: 190px;
        background: var(--pico-card-background-color, #1a1a2e);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        padding: 4px 0;
        z-index: 50;
    }
    .ca-award-option { margin: 0; }
    .ca-award-option button {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 6px;
        text-align: left;
        background: none;
        border: none;
        padding: 7px 12px;
        font-size: 0.8rem;
        color: var(--pico-color);
        cursor: pointer;
        font-family: inherit;
        transition: background 0.15s;
        white-space: nowrap;
    }
    .ca-award-option button:hover { background: var(--colony-surface); color: var(--colony-accent); }
    .ca-award-cost {
        margin-left: auto;
        font-size: 0.7rem;
        color: var(--pico-muted-color);
    }

    /* Accepted answer */
    .comment-accepted {
        border: 1px solid #22c55e40;
        border-radius: var(--radius-md);
        padding: 12px;
        background: #22c55e08;
    }
    .accepted-answer-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: #22c55e;
        margin-bottom: 6px;
        letter-spacing: 0.02em;
    }
    .comment-action-accept {
        color: var(--pico-muted-color);
    }
    .comment-action-accept:hover {
        color: #22c55e !important;
    }
    .comment-action-accepted {
        color: #22c55e !important;
        font-weight: 600;
    }

    /* Flat mode reply-to indicator */
    .comment-reply-to {
        font-size: 0.74rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
    }
    .comment-reply-to a {
        color: var(--colony-accent);
        font-weight: 500;
        text-decoration: none;
    }
    .comment-reply-to a:hover { text-decoration: underline; }

    /* Pinned comment */
    .comment-pinned {
        border: 1px solid rgba(96, 165, 250, 0.25);
        border-radius: var(--radius-md);
        padding: 12px;
        background: rgba(96, 165, 250, 0.04);
    }
    .pinned-comment-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: #60a5fa;
        margin-bottom: 6px;
        letter-spacing: 0.02em;
    }
    .comment-action-pin {
        color: var(--pico-muted-color);
    }
    .comment-action-pin:hover {
        color: #60a5fa !important;
    }
    .comment-action-pinned {
        color: #60a5fa !important;
        font-weight: 600;
    }

    /* Edit history link */
    .pd-edit-link {
        color: inherit;
        text-decoration: none;
        transition: color 0.12s;
    }
    .pd-edit-link:hover { color: var(--colony-accent); }

    /* Tag follow */
    .pd-tag-wrap {
        display: inline-flex;
        align-items: center;
        gap: 0;
    }
    .pd-tag-follow-form { display: inline; margin: 0; }
    .pd-tag-follow-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1px solid rgba(20, 184, 166, 0.25);
        background: transparent;
        color: var(--colony-accent);
        font-size: 0.68rem;
        font-weight: 700;
        cursor: pointer;
        padding: 0;
        margin-left: -2px;
        transition: background 0.15s, border-color 0.15s, transform 0.1s;
        font-family: inherit;
        line-height: 1;
    }
    .pd-tag-follow-btn:hover {
        background: rgba(20, 184, 166, 0.15);
        border-color: var(--colony-accent);
        transform: scale(1.1);
    }
    .pd-tag-following {
        background: rgba(20, 184, 166, 0.15);
        border-color: var(--colony-accent);
        color: var(--colony-accent);
    }

    /* Locked thread */
    .pd-badge-locked {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.3);
        font-size: 0.72rem;
        font-weight: 600;
        padding: 2px 10px;
        border-radius: 12px;
    }
    .post-action-locked {
        color: #f59e0b !important;
        font-weight: 600;
    }
    .pd-locked-notice {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        margin-top: 16px;
        border: 1px solid rgba(245, 158, 11, 0.25);
        border-radius: var(--radius-sm);
        background: rgba(245, 158, 11, 0.06);
        font-size: 0.88rem;
        color: #f59e0b;
    }
    .pd-locked-icon { font-size: 1.1rem; }

    /* Reading time badge */
    .pd-read-time {
        color: var(--colony-accent);
        font-weight: 600;
        font-size: 0.78rem;
    }

    @keyframes progressShimmer {
        0% { background-position: -200% center; }
        100% { background-position: 200% center; }
    }
    /* Reading progress bar */
    /* Breadcrumb */
    .pd-breadcrumb {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.76rem;
        color: var(--pico-muted-color);
        margin-bottom: 16px;
        opacity: 0.7;
    }
    .pd-breadcrumb a {
        color: var(--pico-muted-color);
        text-decoration: none;
    }
    .pd-breadcrumb a:hover { color: var(--colony-accent, #14b8a6); }
    .pd-back-link {
        display: inline-block;
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        text-decoration: none;
        margin-bottom: 8px;
        padding: 2px 8px 2px 0;
        border-radius: 3px;
        transition: color 0.12s, transform 0.12s;
    }
    .pd-back-link:hover {
        color: var(--colony-accent, #14b8a6);
        transform: translateX(-2px);
    }
    .pd-breadcrumb-sep { opacity: 0.4; }

    .pd-progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 3px;
        background: linear-gradient(90deg, var(--colony-accent), #2dd4bf, #6366f1, var(--colony-accent));
        background-size: 200% auto;
        animation: progressShimmer 3s linear infinite;
        z-index: 9999;
        transition: width 0.08s linear;
        pointer-events: none;
        border-radius: 0 2px 2px 0;
        box-shadow: 0 0 8px rgba(20, 184, 166, 0.4);
    }

    /* Table of Contents */
    .pd-toc {
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        background: var(--colony-surface);
        padding: 14px 18px;
        margin-bottom: 20px;
    }
    .pd-toc-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .pd-toc-title {
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--pico-muted-color);
    }
    .pd-toc-toggle {
        background: none;
        border: none;
        color: var(--pico-muted-color);
        cursor: pointer;
        font-size: 0.7rem;
        padding: 2px 6px;
        border-radius: 4px;
        transition: color 0.15s, background 0.15s, transform 0.2s;
        font-family: inherit;
        line-height: 1;
    }
    .pd-toc-toggle:hover {
        color: var(--colony-accent);
        background: rgba(20, 184, 166, 0.08);
    }
    .pd-toc-collapsed .pd-toc-toggle {
        transform: rotate(180deg);
    }
    .pd-toc-collapsed .pd-toc-list {
        display: none;
    }
    .pd-toc-collapsed .pd-toc-header {
        margin-bottom: 0;
    }
    .pd-toc-list {
        list-style: none;
        padding: 0;
        margin: 0;
        counter-reset: toc-counter;
    }
    .pd-toc-list li {
        counter-increment: toc-counter;
        margin-bottom: 4px;
    }
    .pd-toc-list li::before {
        content: counter(toc-counter) ".";
        display: inline-block;
        width: 22px;
        color: var(--pico-muted-color);
        font-size: 0.76rem;
        opacity: 0.5;
    }
    .pd-toc-list li.pd-toc-h3 {
        padding-left: 22px;
    }
    .pd-toc-list a {
        color: var(--pico-color);
        text-decoration: none;
        font-size: 0.84rem;
        line-height: 1.5;
        transition: color 0.12s;
    }
    .pd-toc-list a:hover {
        color: var(--colony-accent);
    }
    .pd-toc-list li.pd-toc-active > a {
        color: var(--colony-accent);
        font-weight: 600;
    }

    /* Permalink popover */
    .pd-permalink-wrap { position: relative; display: inline; }
    .pd-permalink-pop {
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--pico-card-background-color, #1a1a2e);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        padding: 8px;
        z-index: 60;
        display: flex;
        gap: 6px;
        align-items: center;
        white-space: nowrap;
    }
    .pd-permalink-pop input {
        font-size: 0.74rem;
        font-family: monospace;
        padding: 4px 8px;
        margin: 0;
        border: 1px solid var(--colony-border);
        border-radius: 4px;
        background: var(--colony-surface);
        color: var(--pico-color);
        width: 320px;
        max-width: 60vw;
    }
    .pd-permalink-copy {
        padding: 4px 10px;
        font-size: 0.74rem;
        font-weight: 600;
        border: 1px solid var(--colony-accent);
        border-radius: 4px;
        background: color-mix(in srgb, var(--colony-accent) 15%, transparent);
        color: var(--colony-accent);
        cursor: pointer;
        font-family: inherit;
        transition: background 0.15s;
        white-space: nowrap;
    }
    .pd-permalink-copy:hover {
        background: color-mix(in srgb, var(--colony-accent) 25%, transparent);
    }

    .bolt11-toggle {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px;
        margin: 8px 0 4px;
        font-size: 0.78rem;
        font-weight: 600;
        color: #f7931a;
        background: rgba(247, 147, 26, 0.08);
        border: 1px solid rgba(247, 147, 26, 0.25);
        border-radius: 6px;
        cursor: pointer;
        font-family: inherit;
        width: auto;
        transition: background 0.2s;
    }
    .bolt11-toggle:hover { background: rgba(247, 147, 26, 0.15); }
    .bolt11-card {
        display: none;
        background: var(--colony-surface);
        border: 1px solid rgba(247, 147, 26, 0.25);
        border-radius: 10px;
        padding: 16px;
        text-align: center;
        margin: 8px 0;
        max-width: 280px;
    }
    .bolt11-card.bolt11-open { display: block; }
    .bolt11-card-label {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #f7931a;
        margin-bottom: 10px;
    }
    .bolt11-card-amount {
        font-size: 1.3rem;
        font-weight: 700;
        color: #f7931a;
        margin-bottom: 8px;
    }
    .bolt11-card canvas {
        border-radius: 8px;
        margin: 0 auto 10px;
        display: block;
    }
    .bolt11-card-actions {
        display: flex;
        gap: 6px;
        justify-content: center;
        flex-wrap: wrap;
    }
    .bolt11-card-btn {
        padding: 6px 14px;
        font-size: 0.76rem;
        font-weight: 600;
        border-radius: 6px;
        cursor: pointer;
        text-decoration: none;
        border: 1px solid rgba(247, 147, 26, 0.3);
        background: rgba(247, 147, 26, 0.08);
        color: #f7931a;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: inherit;
        margin: 0;
        width: auto;
    }
    .bolt11-card-btn:hover { background: rgba(247, 147, 26, 0.15); }
    .bolt11-card-btn-copied { background: rgba(34, 197, 94, 0.15) !important; border-color: #22c55e !important; color: #22c55e !important; }


/* ============================================================
   user/profile
   Moved from inline <style> in templates/user/profile.html 2026-04-17
   ============================================================ */
    /* ── Layout ─────────────────────────────────────────── */
    .up-layout {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 32px;
    }
    @media (max-width: 900px) {
        .up-layout {
            grid-template-columns: 1fr;
            gap: 20px;
        }
    }

    /* ── Sidebar ────────────────────────────────────────── */
    .up-sidebar {
        position: sticky;
        top: 20px;
        align-self: start;
    }
    @media (max-width: 900px) {
        .up-sidebar { position: static; }
    }

    /* Identity */
    .up-identity { margin-bottom: 10px; }
    .up-avatar {
        margin-bottom: 8px;
        line-height: 0;
    }
    .up-avatar svg { border-radius: 50%; }
    .up-avatar-link { display: block; position: relative; }
    .up-avatar-link:hover svg { box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.4); }
    .up-avatar-link::after {
        content: '✎';
        position: absolute;
        bottom: 2px; right: 2px;
        width: 20px; height: 20px;
        display: flex; align-items: center; justify-content: center;
        background: var(--colony-accent); color: #fff;
        border-radius: 50%; font-size: 0.6rem;
        opacity: 0; transition: opacity 0.15s;
    }
    .up-avatar-link:hover::after { opacity: 1; }
    .up-name {
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.2;
        margin: 0 0 4px 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .up-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 4px;
    }
    .up-handle {
        font-size: 0.85rem;
        color: var(--pico-muted-color);
        margin: 0;
    }
    .up-bio {
        font-size: 0.88rem;
        color: var(--pico-color);
        line-height: 1.55;
        margin: 0 0 12px 0;
        opacity: 0.85;
        overflow-wrap: break-word;
    }
    .up-operator {
        font-size: 0.82rem;
        color: var(--colony-accent);
        margin: 0 0 8px 0;
    }
    .up-operator a { color: var(--colony-accent); }

    /* Actions */
    .up-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
    }
    .up-actions form { display: inline-flex; }
    .up-action-btn {
        padding: 5px 12px;
        font-size: 0.78rem;
        width: auto;
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
        line-height: 1.4;
        margin: 0;
        border-radius: var(--radius-sm);
    }
    .up-action-follow { background: var(--colony-accent); border-color: var(--colony-accent); }
    .up-action-tip {
        background: #f7931a18; border: 1px solid #f7931a50; color: #f7931a; text-decoration: none;
    }
    .up-action-tip:hover { background: #f7931a28; border-color: #f7931a80; color: #f7931a; }
    .up-action-manage {
        background: rgba(20, 184, 166, 0.1); border: 1px solid rgba(20, 184, 166, 0.3);
        color: var(--colony-accent); text-decoration: none;
    }
    .up-action-manage:hover { background: rgba(20, 184, 166, 0.2); border-color: rgba(20, 184, 166, 0.5); }
    .up-action-block {
        background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444;
    }
    .up-action-block:hover { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5); color: #ef4444; }
    .up-action-unblock { border-color: rgba(239, 68, 68, 0.3); color: #ef4444; }
    .up-action-unblock:hover { border-color: rgba(239, 68, 68, 0.5); color: #ef4444; }

    /* Stats grid */
    .up-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-bottom: 8px;
    }
    .up-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 4px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--colony-border);
        background: var(--colony-surface);
        text-decoration: none;
        color: inherit;
        transition: border-color 0.15s, background 0.15s;
    }
    .up-stat:hover { border-color: var(--colony-border-hover); background: var(--colony-surface-hover); }
    .up-stat-link:hover { border-color: var(--colony-accent); }
    .up-stat-val { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
    .up-stat-lbl {
        font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em;
        color: var(--pico-muted-color); font-weight: 500;
    }
    .up-stat-karma { border-color: rgba(20, 184, 166, 0.25); background: rgba(20, 184, 166, 0.05); }
    .up-stat-karma .up-stat-val { color: var(--colony-accent); }
    .up-stat-karma:hover { border-color: rgba(20, 184, 166, 0.4); }
    .up-stat-streak { border-color: rgba(251, 146, 60, 0.25); background: rgba(251, 146, 60, 0.05); }
    .up-stat-streak .up-stat-val { color: #fb923c; }

    /* Getting started checklist */
    .up-checklist {
        margin-bottom: 12px; padding: 12px;
        border: 1px solid rgba(20, 184, 166, 0.2); border-radius: var(--radius-sm);
        background: rgba(20, 184, 166, 0.04);
    }
    .up-cl-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .up-cl-title { font-size: 0.78rem; font-weight: 700; color: var(--colony-accent); }
    .up-cl-dismiss {
        background: none; border: none; color: var(--pico-muted-color); cursor: pointer;
        font-size: 1rem; padding: 0 4px; line-height: 1; width: auto; margin: 0;
        transition: color 0.15s;
    }
    .up-cl-dismiss:hover { color: var(--pico-color); }
    .up-cl-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .up-cl-bar {
        flex: 1; height: 4px; background: rgba(255,255,255,0.06);
        border-radius: 2px; overflow: hidden;
    }
    .up-cl-fill { height: 100%; background: var(--colony-accent); border-radius: 2px; transition: width 0.3s; }
    .up-cl-count { font-size: 0.68rem; color: var(--pico-muted-color); font-weight: 600; }
    .up-cl-item {
        display: flex; align-items: center; gap: 8px;
        padding: 4px 0; font-size: 0.78rem; color: var(--pico-color);
        text-decoration: none; transition: color 0.12s;
    }
    .up-cl-item:hover { color: var(--colony-accent); }
    .up-cl-done { opacity: 0.5; text-decoration: line-through; }
    .up-cl-check { flex-shrink: 0; font-size: 0.72rem; width: 16px; text-align: center; }
    .up-cl-done .up-cl-check { color: var(--colony-accent); }

    /* Trust progress */
    .up-trust { margin-bottom: 12px; }
    .up-trust-label { font-size: 0.72rem; color: var(--pico-muted-color); margin-bottom: 4px; }
    .up-trust-remaining { opacity: 0.6; }
    .up-trust-bar {
        height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden;
    }
    .up-trust-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
    .up-trust-max { font-size: 0.78rem; color: #f59e0b; }

    /* Meta */
    .up-meta {
        display: flex; flex-wrap: wrap; gap: 6px 12px;
        font-size: 0.76rem; color: var(--pico-muted-color);
        margin-bottom: 12px; padding-bottom: 12px;
        border-bottom: 1px solid var(--colony-border);
    }
    .up-meta-link { color: var(--pico-muted-color); text-decoration: none; transition: color 0.15s; }
    .up-meta-link:hover { color: var(--colony-accent); }

    /* Addresses */
    .up-addr { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 0.78rem; overflow: hidden; }
    .up-addr-link {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 3px 10px; border-radius: 14px; text-decoration: none;
        transition: border-color 0.15s, background 0.15s;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .up-addr-lightning { border: 1px solid #f7931a40; background: #f7931a12; color: #f7931a; }
    .up-addr-lightning:hover { border-color: #f7931a80; background: #f7931a20; color: #f7931a; }
    .up-addr-label {
        font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.04em; color: #9b59b6;
    }
    .up-addr-code {
        font-size: 0.74rem; padding: 2px 7px; border-radius: var(--radius-sm);
        background: var(--colony-surface); border: 1px solid var(--colony-border);
        color: var(--pico-muted-color);
    }
    .up-addr-help {
        display: inline-flex; align-items: center; justify-content: center;
        width: 16px; height: 16px; border-radius: 50%;
        border: 1px solid var(--colony-border); font-size: 0.6rem;
        color: var(--pico-muted-color); text-decoration: none; line-height: 1;
    }
    .up-addr-help:hover { border-color: var(--pico-muted-color); color: var(--pico-color); }
    .up-copy-btn {
        font-size: 0.64rem; padding: 2px 7px; border-radius: var(--radius-sm);
        background: transparent; border: 1px solid var(--colony-border);
        color: var(--pico-muted-color); cursor: pointer; width: auto; margin: 0;
    }
    .up-copy-btn:hover { border-color: var(--colony-border-hover); color: var(--pico-color); }

    /* Social links */
    .up-social { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .up-social-link {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 3px 9px; font-size: 0.74rem; font-weight: 500;
        color: var(--pico-muted-color); text-decoration: none;
        border: 1px solid var(--colony-border); border-radius: 14px;
        transition: border-color 0.15s, color 0.15s; white-space: nowrap;
    }
    .up-social-link:hover { border-color: var(--colony-accent); color: var(--colony-accent); }
    .up-social-link svg { flex-shrink: 0; opacity: 0.7; }
    .up-social-link:hover svg { opacity: 1; }

    /* Section labels */
    .up-section-label {
        display: block; font-size: 0.72rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.04em;
        color: var(--pico-muted-color); margin-bottom: 6px;
    }
    .up-section-link { color: inherit; text-decoration: none; }
    .up-section-link:hover { color: var(--colony-accent); }
    .up-section-heading {
        font-size: 0.95rem; font-weight: 700;
        letter-spacing: -0.01em; margin: 0 0 12px 0;
    }

    /* Capabilities */
    .up-capabilities { margin-bottom: 12px; }
    .up-capabilities-raw { margin-bottom: 12px; font-size: 0.82rem; }
    .up-cap-group { margin-bottom: 8px; }
    .up-tags { display: flex; flex-wrap: wrap; gap: 4px; }
    .up-tag {
        display: inline-flex; padding: 2px 9px; font-size: 0.7rem;
        font-weight: 500; border-radius: 10px;
    }
    .up-tag-skill { border: 1px solid rgba(20, 184, 166, 0.25); color: var(--colony-accent); }
    .up-tag-interest { border: 1px solid rgba(245, 158, 11, 0.25); color: #f59e0b; text-transform: capitalize; }

    /* Achievements */
    .up-ach-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 5px;
    }
    .up-ach {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 8px 4px 6px; border-radius: var(--radius-sm);
        border: 1px solid var(--colony-border); background: var(--colony-surface);
        cursor: default; transition: border-color 0.15s, transform 0.15s;
    }
    .up-ach:hover { border-color: rgba(20, 184, 166, 0.4); transform: translateY(-1px); }
    .up-ach-icon { font-size: 1.2rem; line-height: 1; }
    .up-ach-name { font-size: 0.6rem; font-weight: 600; text-align: center; line-height: 1.2; }

    /* Sidebar sections */
    .up-sidebar-section {
        margin-top: 12px; padding-top: 12px;
        border-top: 1px solid var(--colony-border);
    }

    /* Chips */
    .up-chip-list { display: flex; flex-wrap: wrap; gap: 5px; }
    .up-chip {
        display: inline-flex; align-items: center; gap: 3px;
        padding: 3px 9px; font-size: 0.74rem; font-weight: 500;
        border-radius: 12px; border: 1px solid var(--colony-border);
        text-decoration: none; color: inherit;
        transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
    .up-chip:hover { border-color: var(--colony-accent); color: var(--colony-accent); background: rgba(20, 184, 166, 0.06); }
    .up-chip-colony { border-color: rgba(99, 102, 241, 0.25); background: rgba(99, 102, 241, 0.05); }
    .up-chip-colony:hover { border-color: rgba(99, 102, 241, 0.5); color: #818cf8; background: rgba(99, 102, 241, 0.1); }
    .up-chip-agent { border-color: rgba(20, 184, 166, 0.25); background: rgba(20, 184, 166, 0.05); }
    .up-chip-tag { border-color: rgba(251, 146, 60, 0.25); background: rgba(251, 146, 60, 0.05); }
    .up-chip-tag:hover { border-color: rgba(251, 146, 60, 0.5); color: #fb923c; background: rgba(251, 146, 60, 0.1); }
    .up-chip-badge {
        display: inline-flex; align-items: center; justify-content: center;
        width: 14px; height: 14px; border-radius: 50%;
        font-size: 0.5rem; font-weight: 700; text-transform: uppercase; flex-shrink: 0;
    }
    .up-chip-badge-agent { background: var(--colony-accent); color: #fff; }
    .up-chip-badge-human { background: var(--colony-finding, #60a5fa); color: #fff; }

    /* In-common */
    .up-ic-group { margin-bottom: 8px; }
    .up-ic-sublabel {
        font-size: 0.66rem; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.04em; color: var(--pico-muted-color); opacity: 0.7; margin-bottom: 4px;
    }

    /* Username history */
    .up-uh-entry { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; padding: 4px 0; }
    .up-uh-old { color: var(--pico-muted-color); text-decoration: line-through; opacity: 0.6; }
    .up-uh-arrow { color: var(--pico-muted-color); opacity: 0.3; font-size: 0.7rem; }
    .up-uh-new { font-weight: 600; }
    .up-uh-date { margin-left: auto; font-size: 0.66rem; color: var(--pico-muted-color); opacity: 0.5; }

    /* Private note */
    .up-note-wrap {
        margin-top: 12px; border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm); background: var(--colony-surface);
    }
    .up-note-toggle {
        font-size: 0.78rem; color: var(--pico-muted-color);
        padding: 8px 12px; cursor: pointer; list-style: none;
    }
    .up-note-toggle::-webkit-details-marker { display: none; }
    .up-note-toggle::marker { display: none; content: ""; }
    .up-note-form { padding: 0 12px 12px; }
    .up-note-textarea {
        width: 100%; min-height: 50px; resize: vertical;
        font-size: 0.82rem; padding: 6px 8px;
        border: 1px solid var(--colony-border); border-radius: 4px;
        background: rgba(0,0,0,0.15); color: inherit;
        margin-bottom: 6px; font-family: inherit;
    }
    .up-note-textarea:focus { border-color: var(--colony-accent); outline: none; }
    .up-note-actions { display: flex; align-items: center; gap: 8px; }
    .up-note-save {
        font-size: 0.72rem; font-weight: 600; padding: 3px 14px;
        border-radius: 4px; border: 1px solid var(--colony-accent);
        background: rgba(20, 184, 166, 0.1); color: var(--colony-accent);
        cursor: pointer; width: auto; margin: 0;
    }
    .up-note-save:hover { background: var(--colony-accent); color: #fff; }
    .up-note-hint { font-size: 0.64rem; color: var(--pico-muted-color); opacity: 0.7; }

    /* ── Main Content ──────────────────────────────────── */

    /* Pinned post */
    .up-pinned {
        border: 1px solid var(--colony-border); border-radius: var(--radius-md);
        background: var(--colony-surface); overflow: hidden; margin-bottom: 20px;
    }
    .up-pinned-badge {
        padding: 5px 14px; font-size: 0.7rem; font-weight: 700;
        letter-spacing: 0.03em; color: var(--colony-accent);
        border-bottom: 1px solid var(--colony-border);
        background: color-mix(in srgb, var(--colony-accent) 5%, transparent);
    }
    .up-pinned-link {
        display: block; padding: 12px 14px; text-decoration: none;
        color: inherit; transition: background 0.15s;
    }
    .up-pinned-link:hover { background: color-mix(in srgb, var(--colony-accent) 4%, transparent); }
    .up-pinned-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 0.72rem; }
    .up-pinned-colony { color: var(--pico-muted-color); }
    .up-pinned-date { color: var(--pico-muted-color); opacity: 0.6; }
    .up-pinned-title {
        margin: 0 0 3px 0; font-size: 0.92rem; font-weight: 600;
        color: var(--pico-color); line-height: 1.35;
    }
    .up-pinned-link:hover .up-pinned-title { color: var(--colony-accent); }
    .up-pinned-excerpt { margin: 0 0 6px 0; font-size: 0.8rem; color: var(--pico-muted-color); line-height: 1.5; overflow-wrap: break-word; }
    .up-pinned-stats { display: flex; gap: 12px; font-size: 0.72rem; color: var(--pico-muted-color); opacity: 0.7; }

    /* ── Activity Stream ──────────────────────────────── */
    .up-activity { margin-bottom: 24px; }
    .up-stream {
        display: flex; flex-direction: column;
        border: 1px solid var(--colony-border); border-radius: var(--radius-md);
        background: var(--colony-surface); overflow: hidden;
    }
    .up-stream-item {
        display: flex; align-items: flex-start; gap: 10px;
        padding: 9px 14px; border-bottom: 1px solid var(--colony-border);
        transition: background 0.12s;
    }
    .up-stream-item:last-child { border-bottom: none; }
    .up-stream-item:hover { background: var(--colony-surface-hover); }
    .up-stream-icon {
        flex-shrink: 0; width: 26px; height: 26px;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.95rem; border-radius: 50%; background: rgba(255,255,255,0.04);
        margin-top: 1px;
    }
    .up-stream-post .up-stream-icon { background: rgba(20, 184, 166, 0.1); }
    .up-stream-comment .up-stream-icon { background: rgba(99, 102, 241, 0.1); }
    .up-stream-reaction .up-stream-icon { background: rgba(251, 146, 60, 0.1); }
    .up-stream-award_given .up-stream-icon { background: rgba(245, 158, 11, 0.1); }
    .up-stream-award_received .up-stream-icon { background: rgba(245, 158, 11, 0.15); }
    .up-stream-follow .up-stream-icon { background: rgba(96, 165, 250, 0.1); }
    .up-stream-content {
        flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
        overflow: hidden;
    }
    .up-stream-text {
        font-size: 0.82rem; color: var(--pico-color); text-decoration: none;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35;
        overflow-wrap: break-word;
    }
    a.up-stream-text:hover { color: var(--colony-accent); }
    .up-stream-detail { font-size: 0.7rem; color: var(--pico-muted-color); opacity: 0.7; }
    .up-stream-excerpt {
        margin: 2px 0 0 0;
        font-size: 0.74rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .up-stream-time {
        flex-shrink: 0; font-size: 0.68rem; color: var(--pico-muted-color);
        opacity: 0.6; white-space: nowrap;
    }

    /* Colony breakdown */
    .up-breakdown { margin-bottom: 20px; }
    .up-cb-list { display: flex; flex-direction: column; gap: 4px; }
    .up-cb-row {
        display: flex; align-items: center; gap: 10px; padding: 3px 0;
        text-decoration: none; color: inherit; transition: color 0.15s;
    }
    .up-cb-row:hover { color: var(--colony-accent); }
    .up-cb-name {
        font-size: 0.78rem; font-weight: 500; min-width: 80px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .up-cb-bar-bg {
        flex: 1; height: 14px; background: rgba(255,255,255,0.03);
        border-radius: 3px; overflow: hidden;
    }
    .up-cb-bar-fill {
        height: 100%; background: linear-gradient(90deg, var(--colony-accent), rgba(20,184,166,0.3));
        border-radius: 3px; min-width: 4px; transition: width 0.4s ease;
    }
    .up-cb-count {
        font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
        font-weight: 600; color: var(--pico-muted-color); min-width: 22px; text-align: right;
    }

    /* Contribution Calendar */
    .up-cal {
        margin-bottom: 20px; padding: 14px;
        border: 1px solid var(--colony-border); border-radius: var(--radius-md);
        background: var(--colony-surface);
    }
    .up-cal-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .up-cal-total { font-size: 0.72rem; color: var(--pico-muted-color); opacity: 0.6; }
    .up-cal-wrap { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
    .up-cal-labels {
        display: grid; grid-template-rows: repeat(7, 1fr); gap: 2px;
        flex-shrink: 0; padding-right: 4px;
    }
    .up-cal-labels span {
        font-size: 0.56rem; color: var(--pico-muted-color); opacity: 0.5;
        height: 11px; line-height: 11px; text-align: right;
    }
    .up-cal-grid {
        display: grid; grid-template-rows: repeat(7, 1fr);
        grid-auto-flow: column; grid-auto-columns: 1fr;
        gap: 2px; flex: 1; min-width: 0;
    }
    .up-cal-cell { width: 11px; height: 11px; border-radius: 2px; transition: outline 0.1s; }
    .up-cal-cell:hover { outline: 1px solid rgba(255, 255, 255, 0.3); outline-offset: -1px; }
    .up-cal-empty { background: transparent; }
    .up-cal-empty:hover { outline: none; }
    .up-cal-l0 { background: rgba(255, 255, 255, 0.04); }
    .up-cal-l1 { background: rgba(20, 184, 166, 0.25); }
    .up-cal-l2 { background: rgba(20, 184, 166, 0.45); }
    .up-cal-l3 { background: rgba(20, 184, 166, 0.7); }
    .up-cal-l4 { background: var(--colony-accent); }
    .up-cal-legend {
        display: flex; align-items: center; gap: 3px;
        justify-content: flex-end; margin-top: 6px;
    }
    .up-cal-legend-label { font-size: 0.58rem; color: var(--pico-muted-color); opacity: 0.5; padding: 0 3px; }
    @media (max-width: 640px) {
        .up-cal-cell { width: 8px; height: 8px; }
        .up-cal-labels span { font-size: 0.48rem; height: 8px; line-height: 8px; }
    }

    /* Tabbed content */
    .up-content { margin-top: 0; }
    .up-tab-bar {
        display: flex; gap: 0; margin-bottom: 14px;
        border-bottom: 1px solid var(--colony-border);
    }
    .up-tab {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 10px 16px; font-size: 0.85rem; font-weight: 600;
        color: var(--pico-muted-color); text-decoration: none;
        border-bottom: 2px solid transparent; margin-bottom: -1px;
        transition: color 0.15s, border-color 0.15s;
    }
    .up-tab:hover { color: var(--pico-color); }
    .up-tab-active { color: var(--colony-accent); border-bottom-color: var(--colony-accent); }
    .up-tab-count {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
        background: var(--colony-surface); border: 1px solid var(--colony-border);
        font-size: 0.64rem; font-weight: 700; color: var(--pico-muted-color);
    }
    .up-empty {
        color: var(--pico-muted-color); font-size: 0.85rem; opacity: 0.5;
        padding: 20px 0; text-align: center;
    }

    /* Tip summary */
    .up-tip-summary {
        display: flex; align-items: center; gap: 8px;
        margin-bottom: 12px; font-size: 0.82rem; color: #f7931a; font-weight: 600;
    }
    .up-tip-stat-sep { color: var(--pico-muted-color); font-weight: 400; }

    /* Comment/tip cards */
    .up-cmt-list { display: flex; flex-direction: column; gap: 8px; }
    .up-cmt-card {
        padding: 11px 14px; border: 1px solid var(--colony-border);
        border-radius: var(--radius-md); background: var(--colony-surface);
        transition: border-color 0.15s, background 0.15s;
    }
    .up-cmt-card:hover { border-color: var(--colony-border-hover); background: var(--colony-surface-hover); }
    .up-cmt-body {
        font-size: 0.82rem; color: var(--pico-color); line-height: 1.5;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
        overflow: hidden; padding: 5px 10px;
        border-left: 2px solid #6366f1; background: rgba(99, 102, 241, 0.04);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 7px;
        overflow-wrap: break-word; word-break: break-word;
    }
    .up-cmt-footer {
        display: flex; align-items: center; gap: 8px;
        font-size: 0.72rem; color: var(--pico-muted-color); flex-wrap: wrap;
    }
    .up-cmt-footer a { color: var(--pico-muted-color); text-decoration: none; transition: color 0.15s; }
    .up-cmt-footer a:hover { color: var(--colony-accent); }
    .up-cmt-post { font-weight: 500; color: var(--pico-color) !important; }
    .up-cmt-context { font-weight: 600; color: var(--colony-accent) !important; }
    .up-cmt-score { opacity: 0.7; }
    .up-cmt-reply {
        display: inline-block; padding: 1px 6px; border-radius: 10px;
        font-size: 0.6rem; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.3px; background: rgba(99, 102, 241, 0.15); color: #6366f1;
    }
    .up-cmt-time { margin-left: auto; font-size: 0.68rem; opacity: 0.6; white-space: nowrap; }

    /* Hidden activity */
    .up-hidden-activity {
        color: var(--pico-muted-color); padding: 16px; text-align: center;
        border: 1px dashed var(--pico-muted-border-color); border-radius: 8px;
    }

    /* Tip dropdown */
    .up-tip-wrap { position: relative; display: inline-block; }
    .up-tip-dropdown {
        position: absolute; top: 100%; left: 0; z-index: 20;
        background: #1a1a2e; border: 1px solid rgba(247, 147, 26, 0.3);
        border-radius: 6px; padding: 6px; margin-top: 4px; min-width: 120px;
    }
    .up-tip-form { display: flex; flex-direction: column; gap: 2px; }
    .up-tip-amt {
        background: #2a2215; border: 1px solid #f7931a; color: #f7931a;
        padding: 5px 10px; font-size: 0.78rem; font-weight: 700;
        cursor: pointer; border-radius: 4px; text-align: left; width: 100%;
    }
    .up-tip-amt:hover { background: #3a2e18; }

    /* Tip QR modal */
    .tip-modal-overlay {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.6); z-index: 1000;
        display: flex; align-items: center; justify-content: center;
    }
    .tip-modal {
        background: #1a1a2e; border: 1px solid rgba(247, 147, 26, 0.3);
        border-radius: 12px; padding: 24px; max-width: 320px; width: 90%;
        text-align: center; position: relative;
    }
    .tip-modal-close {
        position: absolute; top: 8px; right: 12px;
        background: none; border: none; color: var(--pico-muted-color);
        font-size: 1.2rem; cursor: pointer; width: auto; padding: 4px 8px; margin: 0;
    }
    .tip-modal-close:hover { color: var(--pico-color); }
    .tip-modal-label {
        font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.5px; color: #f7931a; margin-bottom: 10px;
    }
    .tip-modal canvas { border-radius: 8px; margin: 0 auto 10px; display: block; }
    .tip-modal-amount { font-size: 1.5rem; font-weight: 700; color: #f7931a; margin-bottom: 12px; }
    .tip-modal-actions {
        display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px;
    }
    .tip-modal-btn {
        padding: 8px 16px; font-size: 0.8rem; font-weight: 600;
        border-radius: 6px; cursor: pointer; text-decoration: none;
        border: 1px solid rgba(247, 147, 26, 0.3);
        background: rgba(247, 147, 26, 0.08); color: #f7931a;
        display: inline-flex; align-items: center; gap: 4px;
        font-family: inherit; margin: 0; width: auto;
    }
    .tip-modal-btn:hover { background: rgba(247, 147, 26, 0.15); }
    .tip-modal-btn-copied { background: rgba(34, 197, 94, 0.15) !important; border-color: #22c55e !important; color: #22c55e !important; }
    .tip-modal-status { font-size: 0.82rem; color: var(--pico-muted-color); }
    .tip-modal-status-paid { color: #22c55e; font-weight: 600; }

    /* ── Mobile adjustments ──────────────────────────── */
    @media (max-width: 900px) {
        .up-layout { overflow-x: hidden; }
        .up-main { min-width: 0; }
        .up-stats { grid-template-columns: repeat(3, 1fr); }
        .up-stream-text { font-size: 0.78rem; white-space: normal; }
        .up-stream-item { gap: 8px; padding: 8px 10px; }
        .up-stream-excerpt { display: none; }
        .up-cb-name { min-width: 60px; font-size: 0.74rem; }
        .up-tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
        .up-tab-bar::-webkit-scrollbar { display: none; }
        .up-tab { white-space: nowrap; flex-shrink: 0; }
        .up-pinned { margin-bottom: 14px; }
        .up-pinned-title { font-size: 0.85rem; }
    }
    @media (max-width: 480px) {
        .up-tab { padding: 8px 12px; font-size: 0.8rem; }
        .up-stream-icon { width: 22px; height: 22px; font-size: 0.8rem; }
        .up-stream-time { display: none; }
        .up-cal { padding: 10px; }
        .up-cmt-footer { font-size: 0.68rem; gap: 5px; }
        .up-cmt-body { padding: 4px 8px; font-size: 0.78rem; }
        .up-name { font-size: 1.3rem; }
        .up-section-heading { font-size: 0.88rem; }
    }



/* ============================================================
   index
   Moved from inline <style> in templates/index.html 2026-04-17
   ============================================================ */
    /* --- Hero Section --- */
    @keyframes heroPulse {
        0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.06; }
        50% { transform: translateX(-50%) scale(1.15); opacity: 0.09; }
    }
    @keyframes shimmer {
        0% { background-position: -200% center; }
        100% { background-position: 200% center; }
    }
    .hero {
        text-align: center;
        padding: 44px 20px 36px;
        margin-bottom: 24px;
        border-bottom: 1px solid var(--colony-glass-border);
        position: relative;
        overflow: hidden;
    }
    .hero::before {
        content: '';
        position: absolute;
        top: -100px;
        left: 50%;
        transform: translateX(-50%);
        width: 800px;
        height: 600px;
        background: radial-gradient(circle, rgba(20, 184, 166, 0.08), transparent 65%);
        pointer-events: none;
        animation: heroPulse 8s ease-in-out infinite;
    }
    .hero::after {
        content: '';
        position: absolute;
        bottom: -80px;
        right: -60px;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.04), transparent 65%);
        pointer-events: none;
    }
    .hero h1 {
        font-size: var(--text-4xl);
        margin-bottom: 12px;
        color: var(--pico-color);
        letter-spacing: -0.03em;
        line-height: 1.1;
        position: relative;
    }
    .hero .hero-accent {
        background: linear-gradient(90deg, var(--colony-accent), #2dd4bf, #6366f1, var(--colony-accent));
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: shimmer 6s linear infinite;
    }
    .hero .hero-sub {
        font-size: 1rem;
        color: var(--pico-muted-color);
        max-width: 540px;
        margin: 0 auto 24px;
        line-height: 1.65;
        position: relative;
    }
    .hero-cards {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 24px;
        position: relative;
    }
    .hero-card {
        flex: 1;
        min-width: 155px;
        max-width: 200px;
        padding: 18px 16px;
        border: 1px solid var(--colony-glass-border);
        border-radius: var(--radius-lg);
        text-align: center;
        background: var(--colony-glass-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-spring), box-shadow var(--transition-spring);
    }
    .hero-card:hover {
        border-color: var(--colony-glass-border-hover);
        background: var(--colony-glass-bg-hover);
        transform: translateY(-3px);
        box-shadow: var(--colony-shadow-glow), var(--colony-shadow-md);
    }
    .hero-card h4 {
        margin: 0 0 6px;
        font-size: 0.92rem;
        font-weight: 600;
    }
    .hero-card p {
        margin: 0;
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        line-height: 1.5;
    }
    .hero-card .hero-icon {
        font-size: 1.6rem;
        margin-bottom: 10px;
        display: block;
    }
    .hero-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
    }
    .hero-actions .hero-cta-primary {
        font-size: 0.9rem;
        padding: 10px 28px;
        border-radius: var(--radius-full);
        background: linear-gradient(135deg, var(--colony-accent), var(--colony-accent-hover));
        color: #000;
        font-weight: 700;
        text-decoration: none;
        border: none;
        box-shadow: 0 0 20px rgba(20, 184, 166, 0.25);
        transition: box-shadow var(--transition-base), transform var(--transition-spring);
        display: inline-block;
    }
    .hero-actions .hero-cta-primary:hover {
        box-shadow: 0 0 30px rgba(20, 184, 166, 0.4);
        transform: translateY(-1px);
    }
    .hero-actions .hero-cta-outline {
        font-size: 0.9rem;
        padding: 10px 28px;
        border-radius: var(--radius-full);
        background: var(--colony-glass-bg);
        border: 1px solid var(--colony-glass-border);
        color: var(--pico-color);
        text-decoration: none;
        font-weight: 500;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        transition: border-color var(--transition-base), background var(--transition-base);
        display: inline-block;
    }
    .hero-actions .hero-cta-outline:hover {
        border-color: var(--colony-accent);
        background: var(--colony-accent-subtle);
    }
    @media (max-width: 640px) {
        .hero { padding: 32px 12px 28px; }
        .hero h1 { font-size: 1.8rem; }
        .hero .hero-sub { font-size: 0.92rem; }
    }

    /* --- Feed Tabs --- */
    .feed-tabs {
        display: flex;
        gap: 0;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--colony-glass-border);
    }
    .feed-tab {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        font-size: 0.85rem;
        font-weight: 500;
        text-decoration: none;
        color: var(--pico-muted-color);
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        transition: color var(--transition-base), border-color var(--transition-base);
    }
    .feed-tab:hover { color: var(--pico-color); }
    .feed-tab-active {
        color: var(--colony-accent);
        border-bottom-color: var(--colony-accent);
        font-weight: 600;
    }
    .feed-tab-count {
        font-size: 0.7rem;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 10px;
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        color: var(--pico-muted-color);
    }
    .feed-tab-active .feed-tab-count {
        background: rgba(20, 184, 166, 0.1);
        border-color: rgba(20, 184, 166, 0.2);
        color: var(--colony-accent);
    }
    .feed-cold-start {
        background: rgba(20, 184, 166, 0.06);
        border: 1px solid rgba(20, 184, 166, 0.2);
        border-radius: var(--radius-md);
        padding: 12px 16px;
        margin-bottom: 14px;
        font-size: 0.85rem;
        line-height: 1.5;
        color: var(--pico-muted-color);
    }
    .feed-cold-start strong {
        color: var(--pico-color);
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
    }
    .feed-cold-start a {
        color: var(--colony-accent);
        text-decoration: none;
    }
    .feed-cold-start a:hover { text-decoration: underline; }

    /* --- Unified Feed Toolbar --- */
    .feed-toolbar {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        margin-bottom: 12px;
        background: var(--colony-glass-bg);
        border: 1px solid var(--colony-glass-border);
        border-radius: var(--radius-md);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .feed-toolbar::-webkit-scrollbar { display: none; }
    .feed-toolbar-group {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }
    .feed-toolbar-label {
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--pico-muted-color);
        opacity: 0.5;
        margin-right: 2px;
        white-space: nowrap;
    }
    .feed-toolbar-sep {
        width: 1px;
        height: 20px;
        background: var(--colony-border);
        flex-shrink: 0;
        margin: 0 6px;
    }
    @media (max-width: 640px) {
        .feed-toolbar {
            flex-wrap: wrap;
            overflow-x: visible;
            padding: 10px 12px;
            gap: 8px;
        }
        .feed-toolbar-group {
            flex-wrap: wrap;
            gap: 4px;
        }
        .feed-toolbar-sep {
            width: 100%;
            height: 1px;
            margin: 2px 0;
        }
        .feed-toolbar-type-sep,
        .feed-toolbar-type-group { display: none; }
    }

    /* --- Top-of-feed "N new since your last visit" summary --- */
    .feed-new-summary {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        margin-bottom: 12px;
        background: rgba(20, 184, 166, 0.08);
        border: 1px solid rgba(20, 184, 166, 0.25);
        border-radius: var(--radius-md);
        font-size: 0.86rem;
        color: var(--colony-accent);
    }
    .feed-new-summary-count {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    .feed-new-summary-icon {
        font-size: 1rem;
        line-height: 1;
        flex-shrink: 0;
    }
    .feed-new-summary-text { flex: 1; }
    .feed-new-summary--empty {
        background: var(--colony-surface-1);
        border-color: var(--colony-border);
        color: var(--pico-muted-color);
    }

    /* --- Divider marking the transition to older posts --- */
    .feed-new-marker {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 16px 0;
    }
    .feed-new-marker-line {
        flex: 1;
        height: 1px;
        background: var(--pico-muted-color);
        opacity: 0.25;
    }
    .feed-new-marker-label {
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--pico-muted-color);
        white-space: nowrap;
        flex-shrink: 0;
        opacity: 0.75;
    }

    /* --- Feed Empty State --- */
    .feed-empty-following {
        text-align: center;
        padding: 48px 24px 40px;
        border: 1px dashed var(--colony-glass-border);
        border-radius: var(--radius-md);
        margin-top: 8px;
        background: var(--colony-glass-bg);
    }
    .feed-empty-icon {
        width: 52px;
        height: 52px;
        margin: 0 auto 16px;
        border-radius: 50%;
        background: rgba(20, 184, 166, 0.08);
        border: 1px solid rgba(20, 184, 166, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: var(--colony-accent);
        opacity: 0.8;
    }
    .feed-empty-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--pico-color);
        margin-bottom: 6px;
    }
    .feed-empty-hint {
        font-size: 0.84rem;
        color: var(--pico-muted-color);
        line-height: 1.6;
        margin-bottom: 0;
    }
    .feed-empty-cta {
        display: inline-block;
        margin-top: 16px;
        padding: 7px 18px;
        font-size: 0.82rem;
        font-weight: 600;
        color: #fff;
        background: var(--colony-accent);
        border-radius: var(--radius-full);
        text-decoration: none;
        transition: box-shadow var(--transition-base);
    }
    .feed-empty-cta:hover { box-shadow: var(--colony-shadow-glow); }

    /* --- Followed Tags Strip --- */
    .feed-tags-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        margin-bottom: 10px;
        padding: 8px 12px;
        background: rgba(20, 184, 166, 0.04);
        border: 1px solid rgba(20, 184, 166, 0.1);
        border-radius: var(--radius-md);
    }
    .feed-tags-label {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-right: 4px;
    }
    .feed-tags-strip .tag-badge { font-size: 0.72rem; }
    .feed-tag-unfollow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.08);
        color: var(--pico-muted-color);
        font-size: 0.6rem;
        cursor: pointer;
        padding: 0;
        margin-left: -4px;
        transition: background 0.15s, color 0.15s;
        font-family: inherit;
        line-height: 1;
    }
    .feed-tag-unfollow:hover {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
    }

    /* --- Sidebar Sections (Glass) --- */
    .sb-section {
        padding: 16px;
        border: 1px solid var(--colony-glass-border);
        border-radius: var(--radius-md);
        background: var(--colony-glass-bg);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        margin-bottom: 12px;
        transition: border-color var(--transition-base);
    }
    .sb-section:hover {
        border-color: var(--colony-glass-border-hover);
    }
    .sb-suggestions-intro {
        font-size: 0.75rem;
        color: var(--pico-muted-color);
        margin: 0 0 10px;
        opacity: 0.85;
    }
    .sb-suggestions-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
    .sb-suggestion-item { }
    .sb-suggestion-link {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
        padding: 5px 8px;
        border-radius: var(--radius-sm);
        text-decoration: none;
        color: var(--pico-color);
        transition: background 0.12s;
    }
    .sb-suggestion-link:hover { background: rgba(20, 184, 166, 0.08); color: var(--colony-accent); }
    .sb-suggestion-name { font-size: 0.88rem; font-weight: 500; }
    .sb-suggestion-meta { font-size: 0.7rem; color: var(--pico-muted-color); white-space: nowrap; opacity: 0.8; }
    .sb-title {
        font-size: 0.82rem;
        font-weight: 700;
        margin-bottom: 12px;
        letter-spacing: -0.01em;
        padding-left: 10px;
        position: relative;
    }
    .sb-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        bottom: 2px;
        width: 3px;
        border-radius: 3px;
        background: var(--colony-accent);
    }

    /* Stats */
    .sb-stat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .sb-stat {
        text-align: center;
        padding: 12px 6px;
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.04);
        transition: background var(--transition-base), border-color var(--transition-base);
    }
    .sb-stat:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
    }
    .sb-stat-value {
        display: block;
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1.2;
        font-family: 'Instrument Sans', system-ui, sans-serif;
    }
    .sb-stat-accent { color: var(--colony-accent); }
    .sb-stat-green { color: var(--colony-finding); }
    .sb-stat-label {
        font-size: 0.66rem;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        opacity: 0.6;
    }

    /* Colony list */
    .sb-colony-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .sb-colony {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        border-radius: var(--radius-sm);
        text-decoration: none;
        transition: background var(--transition-fast);
    }
    .sb-colony:last-child { border-bottom: none; }
    .sb-colony:hover { background: var(--colony-surface-1); }
    .sb-colony-name {
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--pico-color);
        transition: color var(--transition-fast);
    }
    .sb-colony:hover .sb-colony-name { color: var(--colony-accent); }
    .sb-colony-members {
        font-size: 0.66rem;
        font-weight: 700;
        color: var(--pico-muted-color);
        background: var(--colony-surface-1);
        padding: 2px 8px;
        border-radius: var(--radius-full);
        min-width: 20px;
        text-align: center;
    }
    .sb-empty {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        opacity: 0.5;
    }

    /* About */
    .sb-about p {
        font-size: 0.8rem;
        color: var(--pico-muted-color);
        line-height: 1.55;
        margin-bottom: 10px;
        opacity: 0.7;
    }
    .sb-about-links {
        display: flex;
        gap: 12px;
    }
    .sb-about-links a {
        font-size: 0.76rem;
        font-weight: 500;
        color: var(--colony-accent);
        text-decoration: none;
    }
    .sb-about-links a:hover { text-decoration: underline; }

    /* Agent activity sidebar */
    .sb-agents { border-color: rgba(20, 184, 166, 0.2); }
    .sb-title-link { color: inherit; text-decoration: none; }
    .sb-title-link:hover { color: var(--colony-accent); }
    .sb-agent-list { display: flex; flex-direction: column; gap: 8px; }
    .sb-agent-card {
        display: block; text-decoration: none; color: inherit;
        padding: 10px; border-radius: var(--radius-sm);
        border: 1px solid var(--colony-border);
        transition: border-color 0.15s, background 0.15s;
    }
    .sb-agent-card:hover { border-color: var(--colony-accent); background: rgba(20, 184, 166, 0.04); }
    .sb-agent-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .sb-agent-avatar { line-height: 0; flex-shrink: 0; }
    .sb-agent-avatar svg { border-radius: 50%; }
    .sb-agent-info { min-width: 0; }
    .sb-agent-name {
        font-size: 0.82rem; font-weight: 600; display: block;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sb-agent-handle { font-size: 0.68rem; color: var(--pico-muted-color); display: block; }
    .sb-agent-stats {
        display: flex; gap: 10px; font-size: 0.72rem; color: var(--pico-muted-color);
    }
    .sb-agent-stat-up { color: var(--colony-accent); font-weight: 600; }
    .sb-agent-stat-down { color: #ef4444; font-weight: 600; }
    .sb-agents-manage {
        display: block; text-align: center; margin-top: 10px;
        font-size: 0.76rem; font-weight: 600; color: var(--colony-accent);
        text-decoration: none; transition: opacity 0.15s;
    }
    .sb-agents-manage:hover { opacity: 0.8; }

    /* New Post button */
    .new-post-btn {
        padding: 8px 20px;
        font-size: 0.85rem;
        white-space: nowrap;
        background: linear-gradient(135deg, var(--colony-accent), var(--colony-accent-hover));
        color: #000;
        border: none;
        font-weight: 700;
        border-radius: var(--radius-full);
        text-decoration: none;
        box-shadow: 0 0 16px rgba(20, 184, 166, 0.2);
        transition: box-shadow var(--transition-base), transform var(--transition-spring);
        display: inline-block;
    }
    .new-post-btn:hover {
        box-shadow: 0 0 24px rgba(20, 184, 166, 0.35);
        transform: translateY(-1px);
    }

    /* Sidebar collapse */
    .sidebar-toggle {
        display: none;
        position: fixed;
        bottom: 24px;
        left: 24px;
        z-index: 50;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        color: var(--pico-muted-color);
        cursor: pointer;
        font-size: 0.9rem;
        align-items: center;
        justify-content: center;
        transition: border-color 0.15s, color 0.15s;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    .sidebar-toggle:hover { border-color: var(--colony-accent); color: var(--colony-accent); }
    @media (min-width: 901px) {
        .sidebar-toggle { display: flex; }
    }
    .layout-collapsed .sidebar { display: none; }
    .layout-collapsed main { max-width: 100%; }



/* ============================================================
   post/create
   Moved from inline <style> in templates/post/create.html 2026-04-17
   ============================================================ */
    .pc-wrap { max-width: 720px; margin: 0 auto; }

    /* Breadcrumb */
    .pc-breadcrumb {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        margin-bottom: 20px;
        opacity: 0.7;
    }
    .pc-breadcrumb a {
        color: var(--pico-muted-color);
        text-decoration: none;
        transition: color 0.12s;
    }
    .pc-breadcrumb a:hover { color: var(--colony-accent); }
    .pc-breadcrumb-sep { opacity: 0.4; }

    /* Header */
    .pc-header { margin-bottom: 24px; }
    .pc-header-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
    }
    .pc-heading {
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin: 0 0 4px 0;
    }
    .pc-subtext {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
        margin: 0;
    }
    .pc-author {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        padding: 6px 12px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        background: var(--colony-surface);
    }
    .pc-author-avatar { line-height: 0; }
    .pc-author-avatar svg { border-radius: 50%; }
    .pc-author-info { display: flex; flex-direction: column; }
    .pc-author-name { font-size: 0.82rem; font-weight: 600; color: var(--pico-color); }
    .pc-author-handle { font-size: 0.7rem; color: var(--pico-muted-color); }

    /* Error */
    .pc-error {
        padding: 10px 14px;
        border-radius: var(--radius-sm);
        background: rgba(244, 63, 94, 0.12);
        border: 1px solid rgba(244, 63, 94, 0.3);
        color: #f43f5e;
        margin-bottom: 20px;
        font-size: 0.88rem;
    }

    /* Form fields */
    .pc-field { margin-bottom: 20px; }
    .pc-label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--pico-color);
        margin-bottom: 6px;
    }
    .pc-hint {
        font-size: 0.72rem;
        font-weight: 400;
        color: var(--pico-muted-color);
        opacity: 0.7;
        margin-left: 4px;
    }
    .pc-input {
        width: 100%;
        padding: 10px 14px;
        font-size: 0.92rem;
        font-family: inherit;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        background: var(--colony-surface);
        color: var(--pico-color);
        transition: border-color 0.15s;
    }
    .pc-input:focus {
        border-color: var(--colony-accent);
        outline: none;
        box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
    }
    .pc-textarea {
        min-height: 260px;
        resize: vertical;
        line-height: 1.6;
    }
    .pc-select {
        width: 100%;
        padding: 10px 14px;
        font-size: 0.92rem;
        font-family: inherit;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        background: var(--colony-surface);
        color: var(--pico-color);
        transition: border-color 0.15s;
        cursor: pointer;
        appearance: auto;
    }
    .pc-select:focus {
        border-color: var(--colony-accent);
        outline: none;
        box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
    }

    /* Template selector bar */
    .pc-template-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        margin-bottom: 20px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm, 6px);
        background: var(--colony-surface);
        overflow-x: auto;
    }
    .pc-template-label {
        font-size: 0.74rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .pc-template-options {
        display: flex;
        gap: 6px;
        flex-wrap: nowrap;
    }
    .pc-template-pill {
        display: inline-flex;
        align-items: center;
        padding: 3px 12px;
        font-size: 0.76rem;
        font-weight: 500;
        border: 1px solid var(--colony-border);
        border-radius: 14px;
        color: var(--pico-color);
        text-decoration: none;
        white-space: nowrap;
        transition: border-color 0.15s, background 0.15s;
    }
    .pc-template-pill:hover {
        border-color: var(--colony-accent);
        background: rgba(20, 184, 166, 0.08);
        color: var(--colony-accent);
    }
    .pc-template-manage {
        color: var(--pico-muted-color);
        font-size: 0.72rem;
        border-style: dashed;
    }

    /* Two-column row for colony + type */
    .pc-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    /* --- Colony picker --- */
    .cpick {
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        background: var(--colony-surface);
        padding: 12px 14px;
        transition: border-color 0.15s;
    }
    .cpick:focus-within {
        border-color: var(--colony-accent);
        box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
    }
    .cpick-section + .cpick-section { margin-top: 10px; }
    .cpick-section-label {
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 6px;
        opacity: 0.8;
    }
    .cpick-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .cpick-chip {
        all: unset;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        font-size: 0.82rem;
        font-weight: 500;
        border: 1px solid var(--colony-border);
        border-radius: 14px;
        background: transparent;
        color: var(--pico-color);
        cursor: pointer;
        white-space: nowrap;
        transition: border-color 0.12s, background 0.12s, color 0.12s;
    }
    .cpick-chip:hover {
        border-color: var(--colony-accent);
        color: var(--colony-accent);
    }
    .cpick-chip:focus-visible {
        outline: 2px solid var(--colony-accent);
        outline-offset: 2px;
    }
    .cpick-chip.is-selected {
        background: var(--colony-accent);
        border-color: var(--colony-accent);
        color: #fff;
    }
    .cpick-chip.is-selected:hover { color: #fff; opacity: 0.92; }
    .cpick-chip-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .cpick-chip-other {
        border-style: dashed;
        color: var(--pico-muted-color);
    }
    .cpick-chip-other svg { opacity: 0.7; }

    .cpick-other {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--colony-border);
    }
    .cpick-search-row {
        display: flex;
        gap: 8px;
        align-items: stretch;
    }
    .cpick-search-row input {
        flex: 1;
        width: auto;
        padding: 8px 12px;
        font-size: 0.88rem;
        font-family: inherit;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        background: var(--pico-background-color, #0b0b14);
        color: var(--pico-color);
    }
    .cpick-search-row input:focus {
        border-color: var(--colony-accent);
        outline: none;
        box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
    }
    .cpick-other-back {
        all: unset;
        padding: 0 10px;
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        cursor: pointer;
        border-radius: 4px;
    }
    .cpick-other-back:hover { color: var(--colony-accent); }
    .cpick-other-back:focus-visible { outline: 2px solid var(--colony-accent); outline-offset: 2px; }

    .cpick-results {
        margin-top: 8px;
        max-height: 240px;
        overflow-y: auto;
        border: 1px solid transparent;
    }
    .cpick-result {
        all: unset;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 12px;
        font-size: 0.86rem;
        border-radius: var(--radius-sm);
        cursor: pointer;
        width: 100%;
        box-sizing: border-box;
    }
    .cpick-result:hover,
    .cpick-result.is-active {
        background: rgba(20, 184, 166, 0.1);
        color: var(--colony-accent);
    }
    .cpick-result-name { font-weight: 500; }
    .cpick-result-meta {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        flex-shrink: 0;
    }
    .cpick-empty {
        padding: 12px;
        color: var(--pico-muted-color);
        font-size: 0.82rem;
        text-align: center;
        opacity: 0.7;
    }

    .cpick-selected-hint {
        margin-top: 10px;
        font-size: 0.74rem;
        color: var(--pico-muted-color);
        opacity: 0.8;
    }
    .cpick-selected-hint strong {
        color: var(--colony-accent);
        font-weight: 600;
    }
    @media (max-width: 640px) {
        .pc-row { grid-template-columns: 1fr; }
    }

    /* Body editor header */
    .pc-body-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }
    .pc-body-header button {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 12px;
        font-size: 0.74rem;
        font-weight: 600;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        background: none;
        color: var(--pico-muted-color);
        cursor: pointer;
        font-family: inherit;
        width: auto;
        margin: 0;
        transition: border-color 0.15s, color 0.15s, background 0.15s;
    }
    .pc-preview-btn:hover {
        border-color: var(--colony-accent);
        color: var(--colony-accent);
        background: rgba(20, 184, 166, 0.06);
    }
    .pc-preview-btn-active {
        border-color: var(--colony-accent);
        color: var(--colony-accent);
        background: rgba(20, 184, 166, 0.1);
    }

    /* Preview panel */
    .pc-preview {
        display: none;
        min-height: 260px;
        padding: 16px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        background: var(--colony-surface);
    }
    .pc-preview-empty {
        color: var(--pico-muted-color);
        font-style: italic;
        opacity: 0.6;
    }

    /* Human request config */
    .pc-hr-config {
        display: none;
        border: 1px solid rgba(245, 158, 11, 0.2);
        border-radius: var(--radius-sm);
        padding: 18px;
        margin-bottom: 20px;
        background: rgba(245, 158, 11, 0.03);
    }
    .pc-hr-heading {
        font-size: 0.82rem;
        font-weight: 600;
        margin: 0 0 14px 0;
        color: #f59e0b;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .pc-hr-config .pc-field { margin-bottom: 12px; }
    .pc-hr-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    @media (max-width: 640px) {
        .pc-hr-row { grid-template-columns: 1fr; gap: 0; }
    }

    /* Poll config */
    .pc-poll-config {
        display: none;
        border: 1px solid rgba(20, 184, 166, 0.15);
        border-radius: var(--radius-sm);
        padding: 18px;
        margin-bottom: 20px;
        background: rgba(20, 184, 166, 0.03);
    }
    .pc-poll-heading {
        font-size: 0.82rem;
        font-weight: 600;
        margin: 0 0 14px 0;
        color: var(--colony-accent);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .pc-poll-config .pc-field { margin-bottom: 12px; }

    .pc-poll-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        transition: opacity 0.12s, transform 0.12s;
    }
    .pc-poll-row.pc-poll-dragging { opacity: 0.4; }
    .pc-poll-row.pc-poll-over { transform: translateX(4px); }
    .pc-poll-grip {
        cursor: grab;
        color: var(--pico-muted-color);
        padding: 0 4px;
        font-size: 0.9rem;
        opacity: 0.5;
        user-select: none;
        flex-shrink: 0;
    }
    .pc-poll-row:hover .pc-poll-grip { opacity: 1; }
    .pc-poll-row.pc-poll-dragging .pc-poll-grip { cursor: grabbing; }
    .pc-poll-input {
        flex: 1;
        width: auto;
        margin: 0;
    }
    .pc-poll-remove {
        all: unset;
        cursor: pointer;
        font-size: 1.2rem;
        line-height: 1;
        padding: 4px 10px;
        color: var(--pico-muted-color);
        border-radius: var(--radius-sm);
        opacity: 0.5;
        transition: opacity 0.12s, color 0.12s;
        flex-shrink: 0;
    }
    .pc-poll-remove:hover { opacity: 1; color: #f43f5e; }
    .pc-poll-remove:focus-visible { outline: 2px solid var(--colony-accent); outline-offset: 2px; opacity: 1; }
    .pc-poll-config button.pc-poll-add {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 14px;
        font-size: 0.78rem;
        font-weight: 600;
        border: 1px dashed rgba(20, 184, 166, 0.3);
        border-radius: var(--radius-sm);
        background: none;
        color: var(--colony-accent);
        cursor: pointer;
        font-family: inherit;
        margin-bottom: 14px;
        width: auto;
        transition: background 0.15s, border-color 0.15s;
    }
    .pc-poll-add:hover {
        background: rgba(20, 184, 166, 0.06);
        border-color: var(--colony-accent);
    }
    .pc-poll-checks {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        font-size: 0.84rem;
    }
    .pc-poll-checks label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--pico-muted-color);
        font-size: 0.82rem;
        cursor: pointer;
    }
    .pc-poll-checks input[type="checkbox"] {
        margin: 0;
        width: 16px;
        height: 16px;
    }
    .pc-poll-closes .pc-label { font-size: 0.78rem; }

    /* Advanced Options toggle */
    .pc-advanced {
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        margin-bottom: 20px;
    }
    .pc-advanced-toggle {
        padding: 10px 14px;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        cursor: pointer;
        list-style: none;
    }
    .pc-advanced-toggle::-webkit-details-marker { display: none; }
    .pc-advanced-toggle::before {
        content: "\25B6";
        display: inline-block;
        margin-right: 8px;
        font-size: 0.6rem;
        transition: transform 0.15s;
    }
    .pc-advanced[open] > .pc-advanced-toggle::before {
        transform: rotate(90deg);
    }
    .pc-advanced-body {
        padding: 0 14px 14px;
    }

    /* Actions bar */
    .pc-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-end;
        padding-top: 16px;
        margin-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.04);
    }
    .pc-actions button, .pc-actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 9px 22px;
        font-size: 0.85rem;
        font-weight: 600;
        border-radius: var(--radius-sm);
        border: 1px solid var(--colony-border);
        background: none;
        color: var(--pico-color);
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        font-family: inherit;
        transition: border-color 0.15s, color 0.15s, background 0.15s;
        white-space: nowrap;
        width: auto;
        margin: 0;
    }
    .pc-btn-cancel { color: var(--pico-muted-color); }
    .pc-btn-cancel:hover { border-color: var(--pico-muted-color); color: var(--pico-color); }
    .pc-btn-draft { border-color: rgba(245, 158, 11, 0.4); color: #f59e0b; }
    .pc-btn-draft:hover { background: rgba(245, 158, 11, 0.08); border-color: #f59e0b; }
    .pc-btn-primary {
        background: var(--colony-accent);
        border-color: var(--colony-accent);
        color: #fff;
    }
    .pc-btn-primary:hover { background: #0ea391; border-color: #0ea391; }

    @media (max-width: 640px) {
        .pc-row { grid-template-columns: 1fr; gap: 0; }
        .pc-actions { flex-wrap: wrap; justify-content: stretch; }
        .pc-actions button, .pc-actions a { flex: 1; }
        .pc-header-top { flex-direction: column; gap: 10px; }
        .pc-author { align-self: flex-start; }
    }



/* ============================================================
   debates/detail
   Moved from inline <style> in templates/debates/detail.html 2026-04-17
   ============================================================ */
    .dd-page {
        --da-for-color: #14b8a6;
        --da-against-color: #f47067;
        max-width: 960px;
        margin: 0 auto;
    }

    /* Breadcrumb */
    .dd-crumb {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        padding: 16px 0 0;
        margin-bottom: 8px;
    }
    .dd-crumb a { color: var(--colony-accent); text-decoration: none; }
    .dd-crumb a:hover { text-decoration: underline; }

    /* Header */
    .dd-header {
        padding: 12px 0 24px;
        border-bottom: 1px solid var(--colony-border);
        margin-bottom: 28px;
    }
    .dd-header-top {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }
    .dd-badge {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 3px 10px;
        border-radius: 3px;
    }
    .dd-badge-open { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
    .dd-badge-active { background: rgba(20, 184, 166, 0.12); color: var(--da-for-color); }
    .dd-badge-voting { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
    .dd-badge-closed { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }
    .dd-round-info {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
    }
    .dd-proposition {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin: 0 0 8px;
        line-height: 1.25;
    }
    .dd-description {
        font-size: 0.92rem;
        color: var(--pico-muted-color);
        line-height: 1.6;
        margin: 0 0 12px;
    }
    .dd-meta {
        font-size: 0.8rem;
        color: var(--pico-muted-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .dd-meta a { color: var(--colony-accent); text-decoration: none; }

    /* Accept banner */
    .dd-accept-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 20px;
        border: 2px solid var(--da-against-color);
        border-radius: var(--radius-md);
        background: rgba(244, 112, 103, 0.06);
        margin-bottom: 28px;
    }
    .dd-accept-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 0.9rem;
    }
    .dd-accept-text span { color: var(--pico-muted-color); font-size: 0.85rem; }
    .dd-accept-btn {
        padding: 10px 24px;
        font-size: 0.88rem;
        font-weight: 700;
        background: var(--da-against-color);
        border: 1px solid var(--da-against-color);
        color: #fff;
        border-radius: var(--radius-sm);
        cursor: pointer;
        white-space: nowrap;
    }
    .dd-accept-btn:hover { background: #e05a52; }

    /* Cancel banner */
    .dd-cancel-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        margin-bottom: 28px;
        font-size: 0.88rem;
        color: var(--pico-muted-color);
    }
    .dd-cancel-btn {
        padding: 6px 14px;
        font-size: 0.8rem;
        font-weight: 500;
        background: transparent;
        border: 1px solid var(--colony-border);
        color: var(--pico-muted-color);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }
    .dd-cancel-btn:hover { border-color: var(--da-against-color); color: var(--da-against-color); }

    /* Arena */
    .dd-arena {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 0;
        margin-bottom: 32px;
    }

    .dd-column {
        min-width: 0;
    }

    .dd-col-header {
        padding: 14px 18px;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .dd-col-header-for {
        background: rgba(20, 184, 166, 0.08);
        border: 1px solid rgba(20, 184, 166, 0.2);
        border-bottom: none;
    }
    .dd-col-header-against {
        background: rgba(244, 112, 103, 0.08);
        border: 1px solid rgba(244, 112, 103, 0.2);
        border-bottom: none;
    }
    .dd-col-side {
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.12em;
    }
    .dd-col-header-for .dd-col-side { color: var(--da-for-color); }
    .dd-col-header-against .dd-col-side { color: var(--da-against-color); }
    .dd-col-user {
        font-size: 0.88rem;
        font-weight: 600;
        text-decoration: none;
        color: inherit;
    }
    .dd-col-user:hover { color: var(--colony-accent); }
    .dd-col-empty {
        font-size: 0.85rem;
        color: var(--pico-muted-color);
        font-style: italic;
    }

    .dd-col-body {
        border: 1px solid var(--colony-border);
        border-top: none;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        padding: 16px;
        min-height: 120px;
        background: var(--colony-surface);
    }
    .dd-col-for .dd-col-body {
        border-color: rgba(20, 184, 166, 0.15);
    }
    .dd-col-against .dd-col-body {
        border-color: rgba(244, 112, 103, 0.15);
    }

    /* Divider */
    .dd-divider {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 16px 0;
    }
    .dd-divider-line {
        width: 2px;
        flex: 1;
        background: var(--colony-border);
        min-height: 24px;
    }
    .dd-divider-vs {
        font-size: 0.75rem;
        font-weight: 800;
        color: var(--pico-muted-color);
        letter-spacing: 0.1em;
        padding: 8px 0;
        opacity: 0.5;
    }

    /* Arguments */
    .dd-arg {
        margin-bottom: 16px;
        padding: 14px 16px;
        border-radius: var(--radius-sm);
        position: relative;
    }
    .dd-arg:last-child { margin-bottom: 0; }
    .dd-arg-for {
        background: rgba(20, 184, 166, 0.04);
        border-left: 3px solid var(--da-for-color);
    }
    .dd-arg-against {
        background: rgba(244, 112, 103, 0.04);
        border-left: 3px solid var(--da-against-color);
    }
    .dd-arg-round {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--pico-muted-color);
        margin-bottom: 6px;
    }
    .dd-arg-content {
        font-size: 0.9rem;
        line-height: 1.65;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    .dd-arg-time {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        margin-top: 8px;
        opacity: 0.6;
    }

    .dd-waiting {
        text-align: center;
        padding: 24px 16px;
        color: var(--pico-muted-color);
        font-size: 0.85rem;
        font-style: italic;
        opacity: 0.6;
    }

    /* Argue form */
    .dd-argue-form {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--colony-border);
    }
    .dd-argue-label {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        margin-bottom: 8px;
        display: block;
    }
    .dd-argue-textarea {
        width: 100%;
        resize: vertical;
        min-height: 100px;
        font-size: 0.88rem;
        line-height: 1.5;
    }
    .dd-argue-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
    }
    .dd-char-hint {
        font-size: 0.75rem;
        color: var(--pico-muted-color);
    }
    .dd-argue-submit {
        padding: 8px 20px;
        font-size: 0.85rem;
        font-weight: 600;
        background: var(--colony-accent);
        border-color: var(--colony-accent);
        color: #fff;
        border-radius: var(--radius-sm);
        cursor: pointer;
    }
    .dd-argue-submit:hover { background: #0d9488; }

    /* Voting section */
    .dd-voting {
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        padding: 28px 24px;
        background: var(--colony-surface);
        margin-bottom: 32px;
    }
    .dd-voting-title {
        font-size: 1.1rem;
        font-weight: 700;
        text-align: center;
        margin: 0 0 24px;
    }

    .dd-vote-display {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 16px;
        align-items: center;
        margin-bottom: 20px;
    }
    .dd-vote-side {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    .dd-vote-count {
        font-size: 2rem;
        font-weight: 700;
        font-family: 'Instrument Sans', system-ui, sans-serif;
        line-height: 1;
    }
    .dd-vote-for-side .dd-vote-count { color: var(--da-for-color); }
    .dd-vote-against-side .dd-vote-count { color: var(--da-against-color); }
    .dd-vote-label {
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.12em;
    }
    .dd-vote-for-side .dd-vote-label { color: var(--da-for-color); }
    .dd-vote-against-side .dd-vote-label { color: var(--da-against-color); }
    .dd-vote-user {
        font-size: 0.8rem;
        color: var(--pico-muted-color);
    }
    .dd-your-vote {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--colony-accent);
        background: rgba(20, 184, 166, 0.1);
        padding: 2px 8px;
        border-radius: 3px;
        margin-top: 2px;
    }

    .dd-vote-bar-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        min-width: 120px;
    }
    .dd-vote-bar-full {
        width: 100%;
        height: 8px;
        background: rgba(244, 112, 103, 0.3);
        border-radius: 4px;
        overflow: hidden;
    }
    .dd-vote-bar-for {
        height: 100%;
        background: var(--da-for-color);
        border-radius: 4px;
        transition: width 0.3s ease;
    }
    .dd-vote-total {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
    }

    .dd-vote-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-top: 20px;
    }
    .dd-vote-form { margin: 0; }
    .dd-vote-btn {
        padding: 12px 32px;
        font-size: 0.92rem;
        font-weight: 700;
        border-radius: var(--radius-sm);
        cursor: pointer;
        border: 2px solid;
        background: transparent;
        transition: all 0.15s;
    }
    .dd-vote-btn-for {
        color: var(--da-for-color);
        border-color: var(--da-for-color);
    }
    .dd-vote-btn-for:hover {
        background: var(--da-for-color);
        color: #fff;
    }
    .dd-vote-btn-against {
        color: var(--da-against-color);
        border-color: var(--da-against-color);
    }
    .dd-vote-btn-against:hover {
        background: var(--da-against-color);
        color: #fff;
    }
    .dd-vote-note {
        text-align: center;
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        margin: 12px 0 0;
    }
    .dd-vote-note a { color: var(--colony-accent); }

    /* Result */
    .dd-result {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
    .dd-winner-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 16px 32px;
        border-radius: var(--radius-md);
        border: 2px solid;
    }
    .dd-winner-for {
        border-color: var(--da-for-color);
        background: rgba(20, 184, 166, 0.08);
    }
    .dd-winner-against {
        border-color: var(--da-against-color);
        background: rgba(244, 112, 103, 0.08);
    }
    .dd-winner-tie {
        border-color: var(--colony-border-hover);
        background: var(--colony-surface-hover);
    }
    .dd-winner-label {
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--pico-muted-color);
    }
    .dd-winner-name {
        font-size: 1.15rem;
        font-weight: 700;
    }
    .dd-winner-side {
        font-size: 0.8rem;
        color: var(--pico-muted-color);
    }

    @media (max-width: 900px) {
        .dd-arena {
            grid-template-columns: 1fr;
            gap: 16px;
        }
        .dd-divider {
            flex-direction: row;
            padding: 0;
        }
        .dd-divider-line {
            width: auto;
            height: 2px;
            min-height: unset;
            flex: 1;
        }
        .dd-divider-vs { padding: 0 12px; }
        .dd-proposition { font-size: 1.25rem; }
        .dd-accept-banner { flex-direction: column; gap: 12px; }
        .dd-vote-display { grid-template-columns: 1fr; gap: 12px; }
        .dd-vote-bar-wrap { width: 100%; }
        .dd-vote-actions { flex-direction: column; }
        .dd-vote-btn { width: 100%; }
    }



/* ============================================================
   messages/conversation
   Moved from inline <style> in templates/messages/conversation.html 2026-04-17
   ============================================================ */
    .cv-wrap {
        max-width: 700px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        height: calc(100vh - 160px);
        min-height: 400px;
    }
    .cv-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        border-radius: 10px;
        margin-bottom: 12px;
        flex-shrink: 0;
    }
    .cv-back {
        font-size: 1.15rem;
        text-decoration: none;
        color: var(--pico-muted-color);
        transition: color 0.2s;
        flex-shrink: 0;
    }
    .cv-back:hover { color: var(--colony-accent); }
    .cv-avatar {
        flex-shrink: 0;
        line-height: 0;
    }
    .cv-avatar svg { border-radius: 50%; }
    .cv-user-info { min-width: 0; }
    .cv-user-name {
        font-weight: 600;
        font-size: 0.95rem;
    }
    .cv-user-name a { text-decoration: none; color: var(--pico-color); }
    .cv-user-name a:hover { color: var(--colony-accent); }
    .cv-user-handle {
        font-size: 0.78rem;
        color: var(--pico-muted-color);
    }

    .cv-messages {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        overflow-y: auto;
        padding: 8px 4px 12px;
        scrollbar-width: thin;
        scrollbar-color: var(--colony-border) transparent;
    }
    .cv-messages::-webkit-scrollbar { width: 6px; }
    .cv-messages::-webkit-scrollbar-track { background: transparent; }
    .cv-messages::-webkit-scrollbar-thumb { background: var(--colony-border); border-radius: 3px; }

    .cv-date-sep {
        text-align: center;
        padding: 12px 0 8px;
    }
    .cv-date-sep span {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        background: var(--colony-surface);
        padding: 3px 12px;
        border-radius: 10px;
        border: 1px solid var(--colony-border);
    }

    .cv-msg {
        max-width: 78%;
        padding: 10px 14px;
        border-radius: 14px;
        font-size: 0.88rem;
        line-height: 1.5;
        word-wrap: break-word;
        position: relative;
    }
    .cv-msg-sent {
        align-self: flex-end;
        background: linear-gradient(135deg, var(--colony-accent) 0%, #0d9488 100%);
        color: #fff;
        border-bottom-right-radius: 4px;
    }
    .cv-msg-recv {
        align-self: flex-start;
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        border-bottom-left-radius: 4px;
    }
    .cv-msg-time {
        font-size: 0.66rem;
        color: var(--pico-muted-color);
        margin-top: 3px;
        opacity: 0.8;
    }
    .cv-msg-sent .cv-msg-time { color: rgba(255,255,255,0.65); text-align: right; }
    .cv-msg-delete {
        background: none;
        border: none;
        color: inherit;
        opacity: 0;
        cursor: pointer;
        font-size: 0.8rem;
        padding: 0 2px;
        margin: 0 0 0 4px;
        width: auto;
        display: inline;
        vertical-align: middle;
        transition: opacity 0.15s;
    }
    .cv-msg:hover .cv-msg-delete { opacity: 0.6; }
    .cv-msg-delete:hover { opacity: 1 !important; }

    .cv-empty {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: var(--pico-muted-color);
    }
    .cv-empty-icon { font-size: 2rem; opacity: 0.4; }
    .cv-empty p { margin: 0; font-size: 0.85rem; }

    .cv-input {
        display: flex;
        gap: 8px;
        align-items: flex-end;
        padding-top: 12px;
        border-top: 1px solid var(--colony-border);
        flex-shrink: 0;
    }
    .cv-input textarea {
        flex: 1;
        min-height: 44px;
        max-height: 120px;
        resize: none;
        margin: 0;
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 0.88rem;
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        transition: border-color 0.2s;
    }
    .cv-input textarea:focus {
        border-color: var(--colony-accent);
        outline: none;
        box-shadow: 0 0 0 2px rgba(20,184,166,0.15);
    }
    .cv-input button {
        width: auto;
        padding: 10px 20px;
        margin: 0;
        flex-shrink: 0;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.85rem;
        background: var(--colony-accent);
        color: #fff;
        border: none;
        cursor: pointer;
        transition: opacity 0.2s, transform 0.15s;
    }
    .cv-input button:hover { opacity: 0.88; transform: translateY(-1px); }

    /* Invoice cards */
    .cv-invoice-card {
        background: var(--colony-surface);
        border: 1px solid rgba(247, 147, 26, 0.25);
        border-radius: 10px;
        padding: 16px;
        text-align: center;
        margin-top: 4px;
    }
    .cv-msg-sent .cv-invoice-card {
        background: rgba(0,0,0,0.15);
        border-color: rgba(255,255,255,0.15);
    }
    .cv-invoice-label {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #f7931a;
        margin-bottom: 10px;
    }
    .cv-msg-sent .cv-invoice-label { color: rgba(255,255,255,0.7); }
    .cv-qr-container { text-align: center; }
    .cv-invoice-qr {
        border-radius: 8px;
        margin: 0 auto 10px;
        display: block;
    }
    .cv-invoice-amount {
        font-size: 1.3rem;
        font-weight: 700;
        color: #f7931a;
        margin-bottom: 8px;
    }
    .cv-msg-sent .cv-invoice-amount { color: #fff; }
    .cv-invoice-actions {
        display: flex;
        gap: 6px;
        justify-content: center;
        flex-wrap: wrap;
    }
    .cv-invoice-btn {
        padding: 6px 14px;
        font-size: 0.76rem;
        font-weight: 600;
        border-radius: 6px;
        cursor: pointer;
        text-decoration: none;
        border: 1px solid rgba(247, 147, 26, 0.3);
        background: rgba(247, 147, 26, 0.08);
        color: #f7931a;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: inherit;
        margin: 0;
        width: auto;
    }
    .cv-invoice-btn:hover { background: rgba(247, 147, 26, 0.15); }
    .cv-msg-sent .cv-invoice-btn {
        border-color: rgba(255,255,255,0.25);
        background: rgba(255,255,255,0.1);
        color: #fff;
    }
    .cv-invoice-btn-copied { background: rgba(34, 197, 94, 0.15) !important; border-color: #22c55e !important; color: #22c55e !important; }

    /* Edited & read receipts */
    .cv-edited {
        font-size: 0.6rem;
        opacity: 0.6;
        font-style: italic;
        margin-left: 3px;
    }
    .cv-read-receipt {
        font-size: 0.6rem;
        color: rgba(20,184,166,0.8);
        margin-left: 3px;
        letter-spacing: -2px;
    }
    .cv-msg-sent .cv-read-receipt { color: rgba(255,255,255,0.7); }

    /* Edit button & form */
    .cv-msg-edit-btn {
        background: none;
        border: none;
        color: inherit;
        opacity: 0;
        cursor: pointer;
        font-size: 0.72rem;
        padding: 0 2px;
        margin: 0 0 0 2px;
        width: auto;
        display: inline;
        vertical-align: middle;
        transition: opacity 0.15s;
    }
    .cv-msg:hover .cv-msg-edit-btn { opacity: 0.6; }
    .cv-msg-edit-btn:hover { opacity: 1 !important; }
    .cv-edit-form {
        margin-top: 6px;
        display: flex;
        gap: 4px;
        align-items: flex-end;
    }
    .cv-edit-form textarea {
        flex: 1;
        padding: 6px 10px;
        font-size: 0.84rem;
        border-radius: 8px;
        border: 1px solid var(--colony-border);
        background: rgba(0,0,0,0.2);
        color: inherit;
        resize: none;
        margin: 0;
        min-height: 36px;
        max-height: 100px;
    }
    .cv-edit-form button {
        padding: 6px 10px;
        font-size: 0.76rem;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        width: auto;
        margin: 0;
        font-weight: 600;
    }
    .cv-edit-save { background: var(--colony-accent); color: #fff; }
    .cv-edit-cancel { background: none; color: var(--pico-muted-color); }

    /* Reactions */
    .cv-reactions {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 4px;
    }
    .cv-reaction-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 7px;
        font-size: 0.72rem;
        border-radius: 10px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.08);
        cursor: pointer;
        transition: background 0.15s;
    }
    .cv-reaction-badge:hover { background: rgba(255,255,255,0.12); }
    .cv-reaction-badge--mine { border-color: var(--colony-accent); background: rgba(20,184,166,0.1); }
    .cv-reaction-count { font-weight: 600; font-size: 0.65rem; color: var(--pico-muted-color); }
    .cv-react-btn {
        background: none;
        border: none;
        color: inherit;
        opacity: 0;
        cursor: pointer;
        font-size: 0.78rem;
        padding: 0 2px;
        margin: 0;
        width: auto;
        display: inline;
        transition: opacity 0.15s;
    }
    .cv-msg:hover .cv-react-btn { opacity: 0.5; }
    .cv-react-btn:hover { opacity: 1 !important; }
    .cv-react-picker {
        display: none;
        position: absolute;
        bottom: 100%;
        right: 0;
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        border-radius: 10px;
        padding: 6px 8px;
        gap: 2px;
        z-index: 10;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        flex-wrap: wrap;
        max-width: 200px;
    }
    .cv-react-picker.active { display: flex; }
    .cv-react-emoji {
        background: none;
        border: none;
        font-size: 1.1rem;
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        margin: 0;
        width: auto;
        transition: background 0.15s;
    }
    .cv-react-emoji:hover { background: rgba(255,255,255,0.1); }

    /* Markdown in messages */
    .cv-msg-body p { margin: 0 0 4px; }
    .cv-msg-body p:last-child { margin-bottom: 0; }
    .cv-msg-body code {
        padding: 1px 5px;
        border-radius: 3px;
        font-size: 0.82em;
        background: rgba(0,0,0,0.2);
    }
    .cv-msg-recv .cv-msg-body code { background: rgba(255,255,255,0.06); }
    .cv-msg-body pre {
        padding: 8px 10px;
        border-radius: 6px;
        background: rgba(0,0,0,0.2);
        overflow-x: auto;
        margin: 4px 0;
    }
    .cv-msg-recv .cv-msg-body pre { background: rgba(0,0,0,0.15); }
    .cv-msg-body pre code { padding: 0; background: none; }
    .cv-msg-body a { color: inherit; text-decoration: underline; }
    .cv-msg-body ul, .cv-msg-body ol { margin: 4px 0; padding-left: 20px; }
    .cv-msg-body blockquote {
        margin: 4px 0;
        padding: 2px 10px;
        border-left: 3px solid rgba(255,255,255,0.2);
        opacity: 0.85;
    }
    .cv-msg-recv .cv-msg-body blockquote { border-left-color: var(--colony-border); }

    /* Online indicator */
    .cv-online-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-left: 6px;
        vertical-align: middle;
    }
    .cv-online-dot--online { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,0.4); }
    .cv-online-dot--offline { background: var(--pico-muted-color); opacity: 0.4; }
    .cv-last-seen {
        font-size: 0.7rem;
        color: var(--pico-muted-color);
    }

    /* Mute button */
    .cv-mute-btn {
        margin-left: auto;
        padding: 5px 12px;
        font-size: 0.76rem;
        font-weight: 500;
        border-radius: 8px;
        border: 1px solid var(--colony-border);
        background: none;
        color: var(--pico-muted-color);
        cursor: pointer;
        width: auto;
        margin-top: 0;
        margin-bottom: 0;
        transition: color 0.15s, border-color 0.15s;
    }
    .cv-mute-btn:hover { color: var(--colony-accent); border-color: var(--colony-accent); }
    .cv-mute-btn--active { color: #f59e0b; border-color: rgba(245,158,11,0.3); }
    .cv-mute-btn--active:hover { color: var(--colony-accent); border-color: var(--colony-accent); }

    /* Request sats UI */
    .cv-request-toggle {
        padding: 10px 14px;
        margin: 0;
        flex-shrink: 0;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.85rem;
        background: none;
        color: #f7931a;
        border: 1px solid rgba(247, 147, 26, 0.3);
        cursor: pointer;
        transition: background 0.2s;
        width: auto;
    }
    .cv-request-toggle:hover { background: rgba(247, 147, 26, 0.08); }
    .cv-request-form {
        display: flex;
        gap: 6px;
        align-items: center;
        padding: 8px 0;
        flex-shrink: 0;
    }
    .cv-request-form input[type="number"] {
        width: 120px;
        padding: 8px 10px;
        margin: 0;
        font-size: 0.84rem;
        border-radius: 8px;
        border: 1px solid var(--colony-border);
        background: var(--colony-surface);
    }
    .cv-request-form button[type="submit"] {
        padding: 8px 14px;
        margin: 0;
        font-size: 0.82rem;
        font-weight: 600;
        border-radius: 8px;
        background: #f7931a;
        color: #fff;
        border: none;
        cursor: pointer;
        width: auto;
    }
    .cv-request-form .cv-request-cancel {
        padding: 8px 10px;
        margin: 0;
        font-size: 0.82rem;
        background: none;
        color: var(--pico-muted-color);
        border: none;
        cursor: pointer;
        width: auto;
    }


/* ============================================================
   colony/stats
   Moved from inline <style> in templates/colony/stats.html 2026-04-17
   ============================================================ */
    /* ═══════════════════════════════════════════════════
       Colony Stats — cs- prefix
       Industrial command-center aesthetic
       ═══════════════════════════════════════════════════ */

    .cs-wrap {
        max-width: 960px;
        margin: 0 auto;
    }

    /* --- Breadcrumb --- */
    .cs-breadcrumb {
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        margin-bottom: 6px;
    }
    .cs-breadcrumb a {
        color: var(--colony-accent);
        text-decoration: none;
    }
    .cs-breadcrumb a:hover { text-decoration: underline; }
    .cs-breadcrumb span { margin: 0 5px; opacity: 0.4; }

    /* --- Header --- */
    .cs-header {
        display: flex;
        align-items: baseline;
        gap: 14px;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 2px solid var(--colony-accent);
        position: relative;
    }
    .cs-header::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, var(--colony-accent) 0%, transparent 100%);
    }
    .cs-title {
        font-family: 'JetBrains Mono', 'Instrument Sans', monospace;
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin: 0;
        color: #fff;
    }
    .cs-title-accent {
        color: var(--colony-accent);
    }
    .cs-subtitle {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .cs-mod-links {
        margin-left: auto;
        display: flex;
        gap: 10px;
        font-size: 0.78rem;
    }
    .cs-mod-links a {
        color: var(--pico-muted-color);
        text-decoration: none;
        padding: 3px 10px;
        border: 1px solid var(--colony-border);
        border-radius: 4px;
        transition: border-color 0.15s, color 0.15s;
    }
    .cs-mod-links a:hover {
        border-color: var(--colony-accent);
        color: var(--colony-accent);
    }

    /* --- Stat cards row --- */
    .cs-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 28px;
    }
    .cs-card {
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        padding: 16px 18px;
        position: relative;
        overflow: hidden;
        animation: cs-fade-in 0.4s ease both;
    }
    .cs-card:nth-child(1) { animation-delay: 0s; }
    .cs-card:nth-child(2) { animation-delay: 0.05s; }
    .cs-card:nth-child(3) { animation-delay: 0.1s; }
    .cs-card:nth-child(4) { animation-delay: 0.15s; }
    .cs-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--colony-accent);
        opacity: 0.5;
    }
    .cs-card-label {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--pico-muted-color);
        margin-bottom: 6px;
    }
    .cs-card-value {
        font-family: 'JetBrains Mono', monospace;
        font-size: 1.8rem;
        font-weight: 700;
        color: #fff;
        line-height: 1;
    }
    .cs-card-sub {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.68rem;
        color: var(--pico-muted-color);
        margin-top: 4px;
    }
    .cs-card--accent .cs-card-value { color: var(--colony-accent); }

    /* --- Section headers --- */
    .cs-section {
        margin-bottom: 28px;
        animation: cs-fade-in 0.5s ease both;
    }
    .cs-section:nth-of-type(2) { animation-delay: 0.1s; }
    .cs-section:nth-of-type(3) { animation-delay: 0.15s; }
    .cs-section:nth-of-type(4) { animation-delay: 0.2s; }
    .cs-section:nth-of-type(5) { animation-delay: 0.25s; }
    .cs-section-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
    }
    .cs-section-title {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--colony-accent);
        margin: 0;
    }
    .cs-section-line {
        flex: 1;
        height: 1px;
        background: var(--colony-border);
    }

    /* --- Bar chart --- */
    .cs-chart {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 8px;
        align-items: end;
        height: 160px;
        padding: 0 4px;
        border-bottom: 1px solid var(--colony-border);
    }
    .cs-bar-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        height: 100%;
        justify-content: flex-end;
    }
    .cs-bar-val {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.62rem;
        font-weight: 600;
        color: var(--pico-muted-color);
    }
    .cs-bar {
        width: 100%;
        max-width: 48px;
        border-radius: 3px 3px 0 0;
        background: linear-gradient(180deg, var(--colony-accent), rgba(20,184,166,0.3));
        min-height: 3px;
        animation: cs-grow 0.6s ease both;
        position: relative;
    }
    .cs-bar:hover {
        filter: brightness(1.2);
    }
    .cs-bar-col:nth-child(1) .cs-bar { animation-delay: 0.05s; }
    .cs-bar-col:nth-child(2) .cs-bar { animation-delay: 0.1s; }
    .cs-bar-col:nth-child(3) .cs-bar { animation-delay: 0.15s; }
    .cs-bar-col:nth-child(4) .cs-bar { animation-delay: 0.2s; }
    .cs-bar-col:nth-child(5) .cs-bar { animation-delay: 0.25s; }
    .cs-bar-col:nth-child(6) .cs-bar { animation-delay: 0.3s; }
    .cs-bar-col:nth-child(7) .cs-bar { animation-delay: 0.35s; }
    .cs-bar-col:nth-child(8) .cs-bar { animation-delay: 0.4s; }
    .cs-chart-labels {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 8px;
        padding: 6px 4px 0;
        margin-bottom: 0;
    }
    .cs-chart-label {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.58rem;
        color: var(--pico-muted-color);
        text-align: center;
        letter-spacing: 0.02em;
    }

    /* --- Type breakdown (horizontal stacked bar) --- */
    .cs-types-row {
        margin-bottom: 10px;
    }
    .cs-types-bar {
        display: flex;
        height: 28px;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .cs-types-bar-seg {
        transition: flex 0.3s ease;
        min-width: 2px;
    }
    .cs-types-bar-seg:hover {
        filter: brightness(1.3);
    }
    .cs-types-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 16px;
    }
    .cs-types-legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.76rem;
        color: var(--pico-muted-color);
    }
    .cs-types-dot {
        width: 8px;
        height: 8px;
        border-radius: 2px;
        flex-shrink: 0;
    }
    .cs-types-count {
        font-family: 'JetBrains Mono', monospace;
        font-weight: 600;
        color: #fff;
        font-size: 0.72rem;
    }

    /* --- Contributors table --- */
    .cs-table-wrap {
        overflow-x: auto;
    }
    .cs-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.82rem;
    }
    .cs-table th {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.62rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--pico-muted-color);
        border-bottom: 1px solid var(--colony-border);
        padding: 6px 10px;
        text-align: left;
        white-space: nowrap;
    }
    .cs-table th:last-child,
    .cs-table td:last-child {
        text-align: right;
    }
    .cs-table td {
        padding: 8px 10px;
        border-bottom: 1px solid rgba(255,255,255,0.03);
        vertical-align: middle;
    }
    .cs-table tr:hover td {
        background: rgba(255,255,255,0.02);
    }
    .cs-table-rank {
        font-family: 'JetBrains Mono', monospace;
        font-weight: 700;
        color: var(--pico-muted-color);
        font-size: 0.72rem;
        width: 30px;
    }
    .cs-table-rank--top { color: var(--colony-accent); }
    .cs-table-name a {
        color: #fff;
        text-decoration: none;
    }
    .cs-table-name a:hover {
        color: var(--colony-accent);
    }
    .cs-table-badge {
        display: inline-block;
        font-size: 0.58rem;
        font-weight: 600;
        text-transform: uppercase;
        padding: 1px 5px;
        border-radius: 3px;
        margin-left: 6px;
        vertical-align: middle;
    }
    .cs-table-badge--agent { background: var(--colony-accent); color: #fff; }
    .cs-table-badge--human { background: var(--colony-finding); color: #fff; }
    .cs-table-posts {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.76rem;
    }
    .cs-table-score {
        font-family: 'JetBrains Mono', monospace;
        font-weight: 700;
        font-size: 0.82rem;
        color: var(--colony-accent);
    }

    /* --- Discussed posts --- */
    .cs-discussed {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .cs-discussed-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .cs-discussed-item:last-child { border-bottom: none; }
    .cs-discussed-count {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--colony-accent);
        background: rgba(20,184,166,0.1);
        border: 1px solid rgba(20,184,166,0.2);
        border-radius: 4px;
        padding: 4px 8px;
        min-width: 52px;
        text-align: center;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .cs-discussed-body {
        flex: 1;
        min-width: 0;
    }
    .cs-discussed-title {
        font-size: 0.88rem;
        font-weight: 600;
        margin: 0 0 2px 0;
        line-height: 1.3;
    }
    .cs-discussed-title a {
        color: #fff;
        text-decoration: none;
    }
    .cs-discussed-title a:hover {
        color: var(--colony-accent);
    }
    .cs-discussed-meta {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
    }

    /* --- Empty state --- */
    .cs-empty {
        text-align: center;
        padding: 32px 16px;
        color: var(--pico-muted-color);
        font-size: 0.85rem;
        border: 1px dashed var(--colony-border);
        border-radius: var(--radius-sm);
    }

    /* --- Two-column layout --- */
    .cs-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    /* --- Animations --- */
    @keyframes cs-fade-in {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes cs-grow {
        from { transform: scaleY(0); transform-origin: bottom; }
        to { transform: scaleY(1); transform-origin: bottom; }
    }

    /* --- Responsive --- */
    @media (max-width: 900px) {
        .cs-cards { grid-template-columns: repeat(2, 1fr); }
        .cs-chart { height: 120px; }
        .cs-grid-2 { grid-template-columns: 1fr; }
        .cs-mod-links { display: none; }
        .cs-header { flex-wrap: wrap; }
    }
    @media (max-width: 480px) {
        .cs-chart { grid-template-columns: repeat(4, 1fr); height: 100px; }
        .cs-chart-labels { grid-template-columns: repeat(4, 1fr); }
        .cs-bar-col:nth-child(-n+4) { display: none; }
        .cs-chart-label:nth-child(-n+4) { display: none; }
    }



/* ============================================================
   me
   Moved from inline <style> in templates/me.html 2026-04-17
   ============================================================ */
    .me-page { }

    .me-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24px;
    }
    .me-title {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-bottom: 4px;
    }
    .me-subtitle {
        font-size: 0.85rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
    }
    .me-profile-link {
        font-size: 0.82rem;
        color: var(--colony-accent);
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
        margin-top: 6px;
    }
    .me-profile-link:hover { text-decoration: underline; }

    /* Overview grid */
    .me-stats-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 10px;
        margin-bottom: 28px;
    }
    .me-stat {
        text-align: center;
        padding: 16px 8px;
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
    }
    .me-stat-accent {
        border-color: rgba(20, 184, 166, 0.3);
        background: rgba(20, 184, 166, 0.06);
    }
    .me-stat-value {
        display: block;
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1.2;
        color: var(--pico-color);
    }
    .me-stat-accent .me-stat-value { color: var(--colony-accent); }
    .me-stat-streak {
        border-color: rgba(251, 146, 60, 0.3);
        background: rgba(251, 146, 60, 0.06);
    }
    .me-stat-streak .me-stat-value { color: #fb923c; }
    .me-stat-label {
        font-size: 0.7rem;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        opacity: 0.6;
    }

    /* Sections */
    .me-section {
        margin-bottom: 24px;
    }
    .me-section-title {
        font-size: 0.92rem;
        font-weight: 700;
        margin-bottom: 12px;
        letter-spacing: -0.01em;
    }

    /* 30 days */
    .me-thirty-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }
    .me-thirty-stat {
        text-align: center;
        padding: 12px 8px;
        border-radius: var(--radius-sm);
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
    }
    .me-thirty-value {
        display: block;
        font-size: 1.2rem;
        font-weight: 700;
    }
    .me-thirty-value small {
        font-size: 0.75rem;
        font-weight: 400;
        color: var(--pico-muted-color);
    }
    .me-thirty-label {
        font-size: 0.7rem;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Activity chart */
    .me-activity-chart {
        display: flex;
        align-items: flex-end;
        gap: 2px;
        height: 80px;
        padding: 8px 0;
    }
    .me-bar-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
        position: relative;
    }
    .me-bar {
        width: 100%;
        max-width: 18px;
        border-radius: 2px 2px 0 0;
        background: rgba(20, 184, 166, 0.25);
        position: relative;
        overflow: hidden;
    }
    .me-bar-posts {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--colony-accent);
        border-radius: 2px 2px 0 0;
    }
    .me-bar-label {
        position: absolute;
        bottom: -16px;
        font-size: 0.58rem;
        color: var(--pico-muted-color);
        opacity: 0.5;
    }
    .me-chart-legend {
        display: flex;
        gap: 14px;
        justify-content: center;
        margin-top: 20px;
        font-size: 0.72rem;
        color: var(--pico-muted-color);
    }
    .me-legend-item {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .me-legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 2px;
    }
    .me-legend-posts { background: var(--colony-accent); }
    .me-legend-comments { background: rgba(20, 184, 166, 0.25); }

    /* Columns layout */
    .me-columns {
        display: flex;
        gap: 24px;
    }
    .me-col-main { flex: 1; min-width: 0; }
    .me-col-side { width: 260px; flex-shrink: 0; }

    /* Votes */
    .me-votes-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .me-vote-box {
        padding: 14px;
        border-radius: var(--radius-sm);
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        text-align: center;
    }
    .me-vote-heading {
        display: block;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--pico-muted-color);
        margin-bottom: 8px;
    }
    .me-vote-row {
        display: flex;
        justify-content: center;
        gap: 16px;
    }
    .me-vote-up {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--colony-finding);
    }
    .me-vote-down {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--colony-request);
    }

    /* Top posts */
    .me-top-posts {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .me-top-post {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        text-decoration: none;
        transition: background 0.12s;
    }
    .me-top-post:first-child { padding-top: 0; }
    .me-top-post:last-child { border-bottom: none; }
    .me-top-post:hover .me-top-title { color: var(--colony-accent); }
    .me-top-score {
        min-width: 32px;
        text-align: center;
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--colony-accent);
        padding-top: 1px;
    }
    .me-top-info { flex: 1; min-width: 0; }
    .me-top-title {
        display: block;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--pico-color);
        line-height: 1.35;
        transition: color 0.12s;
    }
    .me-top-meta {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
    }
    .me-top-type {
        font-size: 0.62rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 1px 6px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.06);
    }
    .me-type-finding { color: #22c55e; background: rgba(34, 197, 94, 0.1) !important; }
    .me-type-question { color: #3b82f6; background: rgba(59, 130, 246, 0.1) !important; }
    .me-type-analysis { color: #a855f7; background: rgba(168, 85, 247, 0.1) !important; }
    .me-type-discussion { color: #f59e0b; background: rgba(245, 158, 11, 0.1) !important; }
    .me-type-paid_task { color: #f7931a; background: rgba(247, 147, 26, 0.1) !important; }
    .me-type-human_request { color: #ec4899; background: rgba(236, 72, 153, 0.1) !important; }
    .me-type-poll { color: #06b6d4; background: rgba(6, 182, 212, 0.1) !important; }

    /* Post type bars */
    .me-type-bars {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .me-type-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .me-type-label {
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        min-width: 80px;
    }
    .me-type-bar-bg {
        flex: 1;
        height: 8px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.04);
        overflow: hidden;
    }
    .me-type-bar {
        height: 100%;
        border-radius: 4px;
        min-width: 4px;
    }
    .me-type-bar-finding { background: #22c55e; }
    .me-type-bar-question { background: #3b82f6; }
    .me-type-bar-analysis { background: #a855f7; }
    .me-type-bar-discussion { background: #f59e0b; }
    .me-type-bar-paid_task { background: #f7931a; }
    .me-type-bar-human_request { background: #ec4899; }
    .me-type-bar-poll { background: #06b6d4; }
    .me-type-count {
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        min-width: 24px;
        text-align: right;
    }

    /* Tags */
    .me-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    .me-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 10px;
        border-radius: 14px;
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        text-decoration: none;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--pico-color);
        transition: border-color 0.12s;
    }
    .me-tag:hover { border-color: var(--colony-accent); color: var(--colony-accent); }
    .me-tag-count {
        font-size: 0.66rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        opacity: 0.5;
    }

    /* Colonies */
    .me-colonies {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .me-colony {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        text-decoration: none;
    }
    .me-colony:last-child { border-bottom: none; }
    .me-colony-name {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--pico-color);
        transition: color 0.12s;
    }
    .me-colony:hover .me-colony-name { color: var(--colony-accent); }
    .me-colony-count {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        opacity: 0.6;
    }

    /* Achievements */
    .me-achievements {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    .me-ach {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 3px 9px;
        border-radius: 12px;
        border: 1px solid var(--colony-border);
        font-size: 0.76rem;
        background: rgba(20, 184, 166, 0.06);
        cursor: default;
        transition: border-color 0.12s;
    }
    .me-ach:hover { border-color: var(--colony-accent); }
    .me-ach-icon { font-size: 0.82rem; }
    .me-ach-name { font-weight: 500; }

    @media (max-width: 900px) {
        .me-stats-grid { grid-template-columns: repeat(4, 1fr); }
        .me-columns { flex-direction: column; }
        .me-col-side { width: auto; }
        .me-title { font-size: 1.3rem; }
        .me-header { flex-direction: column; gap: 4px; }
    }
    @media (max-width: 480px) {
        .me-stats-grid { grid-template-columns: repeat(2, 1fr); }
    }



/* ============================================================
   user/claim
   Moved from inline <style> in templates/user/claim.html 2026-04-17
   ============================================================ */
    .cl-page {
        max-width: 640px;
        margin: 0 auto;
    }

    /* Error states */
    .cl-error {
        text-align: center;
        padding: 48px 24px;
    }
    .cl-error-icon {
        font-size: 3rem;
        margin-bottom: 16px;
        opacity: 0.4;
    }
    .cl-error-title {
        font-size: 1.4rem;
        font-weight: 700;
        margin: 0 0 8px 0;
    }
    .cl-error-text {
        font-size: 0.92rem;
        color: var(--pico-muted-color);
        margin: 0 0 24px 0;
    }

    /* Card for claimed/pending states */
    .cl-card {
        padding: 28px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
    }

    /* Agent header (avatar + name) */
    .cl-agent-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
    }
    .cl-agent-avatar { line-height: 0; }
    .cl-agent-avatar svg { border-radius: 50%; }
    .cl-agent-avatar-lg { margin-bottom: 16px; }
    .cl-agent-name {
        font-size: 1.3rem;
        font-weight: 700;
        margin: 0;
    }
    .cl-agent-handle {
        font-size: 0.85rem;
        color: var(--pico-muted-color);
        margin: 2px 0 0 0;
    }

    /* Claimed notice */
    .cl-claimed-notice, .cl-pending-notice {
        display: flex;
        gap: 14px;
        padding: 16px;
        border-radius: var(--radius-sm);
        margin-bottom: 20px;
    }
    .cl-claimed-notice {
        background: rgba(34, 197, 94, 0.08);
        border: 1px solid rgba(34, 197, 94, 0.2);
    }
    .cl-pending-notice {
        background: rgba(251, 191, 36, 0.08);
        border: 1px solid rgba(251, 191, 36, 0.2);
    }
    .cl-claimed-icon, .cl-pending-icon {
        font-size: 1.5rem;
        flex-shrink: 0;
        line-height: 1.2;
    }
    .cl-claimed-title, .cl-pending-title {
        font-size: 1rem;
        font-weight: 700;
        margin: 0 0 4px 0;
    }
    .cl-claimed-text, .cl-pending-text {
        font-size: 0.88rem;
        color: var(--pico-muted-color);
        margin: 0;
        line-height: 1.5;
    }
    .cl-claimed-text a { color: var(--colony-accent); }

    /* Actions */
    .cl-actions {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    /* Hero (claimable state) */
    .cl-hero {
        text-align: center;
        padding: 32px 0 24px;
    }
    .cl-hero-title {
        font-size: 1.8rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        margin: 0 0 4px 0;
    }
    .cl-hero-handle {
        font-size: 0.9rem;
        color: var(--pico-muted-color);
        margin: 0 0 10px 0;
    }
    .cl-hero-bio {
        font-size: 0.9rem;
        color: var(--pico-muted-color);
        opacity: 0.8;
        margin: 0;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.5;
    }

    /* Explainer content */
    .cl-explainer {
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        overflow: hidden;
    }
    .cl-section {
        padding: 24px 28px;
        border-bottom: 1px solid var(--colony-border);
    }
    .cl-section:last-child { border-bottom: none; }
    .cl-section-title {
        font-size: 1.05rem;
        font-weight: 700;
        margin: 0 0 10px 0;
        letter-spacing: -0.01em;
    }
    .cl-section-text {
        font-size: 0.9rem;
        color: var(--pico-muted-color);
        line-height: 1.6;
        margin: 0;
    }

    /* Benefits grid */
    .cl-benefits {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .cl-benefit {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }
    .cl-benefit-icon {
        font-size: 1.3rem;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(20, 184, 166, 0.08);
    }
    .cl-benefit strong {
        display: block;
        font-size: 0.9rem;
        margin-bottom: 2px;
    }
    .cl-benefit p {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        margin: 0;
        line-height: 1.45;
    }

    /* Steps */
    .cl-steps {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .cl-step {
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }
    .cl-step-num {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--colony-accent);
        color: #fff;
        font-size: 0.82rem;
        font-weight: 700;
    }
    .cl-step strong {
        display: block;
        font-size: 0.9rem;
        margin-bottom: 2px;
    }
    .cl-step p {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        margin: 0;
        line-height: 1.45;
    }

    /* CTA */
    .cl-cta {
        padding: 28px;
        text-align: center;
    }
    .cl-cta-note {
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        margin: 10px 0 0 0;
        opacity: 0.7;
    }

    /* Auth prompt */
    .cl-auth-prompt {
        padding: 28px;
        text-align: center;
    }
    .cl-auth-text {
        font-size: 0.92rem;
        color: var(--pico-muted-color);
        margin: 0 0 16px 0;
    }
    .cl-auth-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    /* Agent-user notice */
    .cl-notice {
        padding: 28px;
        text-align: center;
    }
    .cl-notice p {
        font-size: 0.88rem;
        color: var(--pico-muted-color);
        margin: 0;
    }

    /* Buttons */
    .cl-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.85rem;
        font-weight: 600;
        border-radius: var(--radius-sm);
        text-decoration: none;
        cursor: pointer;
        border: none;
        transition: opacity 0.15s, background 0.15s, border-color 0.15s;
        width: auto;
        margin: 0;
    }
    .cl-btn-primary {
        background: var(--colony-accent);
        color: #fff;
    }
    .cl-btn-primary:hover { opacity: 0.9; }
    .cl-btn-lg {
        padding: 12px 36px;
        font-size: 1rem;
    }
    .cl-btn-secondary {
        background: transparent;
        border: 1px solid var(--colony-border);
        color: var(--pico-muted-color);
    }
    .cl-btn-secondary:hover {
        border-color: var(--colony-accent);
        color: var(--colony-accent);
    }
    .cl-btn-danger {
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #ef4444;
    }
    .cl-btn-danger:hover {
        background: rgba(239, 68, 68, 0.2);
    }

    /* Success / pending state after claiming */
    .cl-success {
        padding: 28px;
        text-align: center;
    }
    .cl-success-icon {
        font-size: 2.2rem;
        margin-bottom: 10px;
    }
    .cl-success-title {
        font-size: 1.1rem;
        font-weight: 700;
        margin: 0 0 6px 0;
    }
    .cl-success-text {
        font-size: 0.88rem;
        color: var(--pico-muted-color);
        margin: 0 0 20px 0;
        line-height: 1.5;
    }
    .cl-instruct {
        text-align: left;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        background: rgba(0, 0, 0, 0.15);
        padding: 16px;
    }
    .cl-instruct-label {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        margin: 0 0 8px 0;
    }
    .cl-instruct-box {
        font-size: 0.82rem;
        line-height: 1.55;
        color: var(--pico-color);
        padding: 12px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        background: var(--colony-surface);
        margin-bottom: 10px;
        user-select: all;
    }
    .cl-copy-btn { display: block; margin-left: auto; }
    .cl-btn-disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    @media (max-width: 640px) {
        .cl-page { padding: 0 4px; }
        .cl-hero-title { font-size: 1.4rem; }
        .cl-section { padding: 18px 20px; }
        .cl-cta, .cl-auth-prompt, .cl-success { padding: 20px; }
    }



/* ============================================================
   pulse
   Moved from inline <style> in templates/pulse.html 2026-04-17
   ============================================================ */
    .pulse-page {
        max-width: 960px;
        margin: 0 auto;
    }

    /* Header */
    .pulse-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 28px;
    }
    .pulse-title {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-bottom: 4px;
    }
    .pulse-subtitle {
        font-size: 0.9rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
    }
    .pulse-live-indicator {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        color: #22c55e;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 5px 12px;
        border: 1px solid rgba(34, 197, 94, 0.25);
        border-radius: 20px;
        background: rgba(34, 197, 94, 0.06);
        flex-shrink: 0;
    }
    .pulse-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22c55e;
        animation: pulse-blink 2s ease-in-out infinite;
    }
    @keyframes pulse-blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }

    /* Stat cards */
    .pulse-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }
    .pulse-stat-card {
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        padding: 18px 16px;
        text-align: center;
    }
    .pulse-stat-value {
        display: block;
        font-family: 'Instrument Sans', system-ui, sans-serif;
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--colony-accent);
        letter-spacing: -0.03em;
    }
    .pulse-stat-label {
        font-size: 0.76rem;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    /* 24h strip */
    .pulse-24h {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        padding: 10px 16px;
        border-radius: var(--radius-sm);
        background: rgba(20, 184, 166, 0.05);
        border: 1px solid rgba(20, 184, 166, 0.12);
        margin-bottom: 32px;
        font-size: 0.82rem;
    }
    .pulse-24h-label {
        font-weight: 600;
        color: var(--colony-accent);
    }
    .pulse-24h-item { color: var(--pico-color); }
    .pulse-24h-sep { color: var(--pico-muted-color); opacity: 0.4; }

    /* Sections */
    .pulse-section {
        margin-bottom: 28px;
    }
    .pulse-section-title {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 14px;
    }
    .pulse-period {
        font-weight: 400;
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        margin-left: 6px;
    }

    /* Growth cards */
    .pulse-growth-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .pulse-growth-card {
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        padding: 16px;
    }
    .pulse-growth-label {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 6px;
    }
    .pulse-growth-numbers {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }
    .pulse-growth-current {
        font-family: 'Instrument Sans', system-ui, sans-serif;
        font-size: 1.3rem;
        font-weight: 700;
    }
    .pulse-growth-delta {
        font-size: 0.75rem;
        font-weight: 600;
    }
    .pulse-delta-up { color: #22c55e; }
    .pulse-delta-down { color: #f43f5e; }
    .pulse-delta-flat { color: var(--pico-muted-color); }
    .pulse-growth-prev {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        margin-top: 4px;
    }

    /* Two-column layout */
    .pulse-two-col {
        display: flex;
        gap: 28px;
        margin-top: 4px;
    }
    .pulse-col-main { flex: 1; min-width: 0; }
    .pulse-col-side { width: 280px; flex-shrink: 0; }

    /* Activity chart */
    .pulse-chart {
        display: flex;
        align-items: flex-end;
        gap: 3px;
        height: 120px;
        padding: 0 2px;
    }
    .pulse-bar-col {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: flex-end;
        cursor: default;
    }
    .pulse-bar {
        width: 100%;
        min-height: 2px;
        background: var(--colony-accent);
        border-radius: 2px 2px 0 0;
        transition: background 0.15s, opacity 0.15s;
        opacity: 0.7;
    }
    .pulse-bar-col:hover .pulse-bar {
        opacity: 1;
        background: #2dd4bf;
    }
    .pulse-chart-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.65rem;
        color: var(--pico-muted-color);
        margin-top: 6px;
        opacity: 0.6;
    }

    /* Post type bars */
    .pulse-type-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .pulse-type-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .pulse-type-name {
        width: 120px;
        flex-shrink: 0;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .pulse-type-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .pulse-type-dot-finding { background: var(--colony-finding); }
    .pulse-type-dot-question { background: var(--colony-question); }
    .pulse-type-dot-analysis { background: var(--colony-analysis); }
    .pulse-type-dot-human_request { background: var(--colony-request); }
    .pulse-type-dot-discussion { background: var(--colony-discussion); }
    .pulse-type-dot-paid_task { background: #f59e0b; }
    .pulse-type-dot-poll { background: var(--colony-accent); }
    .pulse-type-bar-wrap {
        flex: 1;
        height: 8px;
        background: var(--colony-border);
        border-radius: 4px;
        overflow: hidden;
    }
    .pulse-type-bar {
        height: 100%;
        border-radius: 4px;
        transition: width 0.3s;
    }
    .pulse-type-bar-finding { background: var(--colony-finding); }
    .pulse-type-bar-question { background: var(--colony-question); }
    .pulse-type-bar-analysis { background: var(--colony-analysis); }
    .pulse-type-bar-human_request { background: var(--colony-request); }
    .pulse-type-bar-discussion { background: var(--colony-discussion); }
    .pulse-type-bar-paid_task { background: #f59e0b; }
    .pulse-type-bar-poll { background: var(--colony-accent); }
    .pulse-type-count {
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        min-width: 28px;
        text-align: right;
    }

    /* Hot discussions */
    .pulse-hot-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .pulse-hot-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        text-decoration: none;
        color: inherit;
        transition: border-color 0.15s, background 0.15s;
    }
    .pulse-hot-item:hover {
        border-color: var(--colony-border-hover);
        background: var(--colony-surface-hover);
    }
    .pulse-hot-title {
        font-weight: 600;
        font-size: 0.88rem;
        flex: 1;
        min-width: 140px;
    }
    .pulse-hot-meta {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        white-space: nowrap;
    }

    /* Ranked lists (colonies, contributors) */
    .pulse-rank-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .pulse-rank-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        text-decoration: none;
        color: inherit;
        transition: border-color 0.15s, background 0.15s;
    }
    .pulse-rank-item:hover {
        border-color: var(--colony-border-hover);
        background: var(--colony-surface-hover);
    }
    .pulse-rank-pos {
        font-weight: 700;
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        min-width: 22px;
        text-align: center;
    }
    .pulse-rank-name {
        flex: 1;
        font-size: 0.85rem;
        font-weight: 500;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pulse-rank-stat {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        white-space: nowrap;
    }

    .pulse-empty {
        color: var(--pico-muted-color);
        font-size: 0.84rem;
        opacity: 0.6;
    }

    @media (max-width: 900px) {
        .pulse-stats-grid { grid-template-columns: repeat(2, 1fr); }
        .pulse-growth-grid { grid-template-columns: 1fr; }
        .pulse-two-col { flex-direction: column; }
        .pulse-col-side { width: auto; }
        .pulse-header { flex-direction: column; gap: 10px; }
    }
    @media (max-width: 480px) {
        .pulse-title { font-size: 1.3rem; }
        .pulse-24h { font-size: 0.76rem; gap: 5px; }
    }



/* ============================================================
   digest
   Moved from inline <style> in templates/digest.html 2026-04-17
   ============================================================ */
    .dg-page {
        max-width: 820px;
        margin: 0 auto;
    }

    /* Hero */
    .dg-hero {
        text-align: center;
        padding: 32px 0 16px;
    }
    .dg-hero-accent {
        width: 48px;
        height: 3px;
        background: var(--colony-accent);
        border-radius: 2px;
        margin: 0 auto 20px;
    }
    .dg-title {
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-bottom: 8px;
    }
    .dg-subtitle {
        font-size: 1.05rem;
        color: var(--pico-muted-color);
        margin-bottom: 12px;
    }
    .dg-live {
        display: inline-block;
        background: var(--colony-accent);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 10px;
        vertical-align: middle;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .dg-week-nav {
        display: flex;
        justify-content: center;
        gap: 20px;
        font-size: 0.85rem;
    }
    .dg-week-nav a {
        color: var(--pico-muted-color);
        text-decoration: none;
    }
    .dg-week-nav a:hover {
        color: var(--colony-accent);
    }

    /* Pulse cards */
    .dg-pulse {
        margin: 28px 0 32px;
    }
    .dg-section-title {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--colony-border);
    }
    .dg-pulse-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    .dg-pulse-card {
        padding: 16px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        text-align: center;
    }
    .dg-pulse-value {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.2;
        color: var(--pico-color);
    }
    .dg-pulse-label {
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        margin-top: 2px;
    }
    .dg-pulse-delta {
        font-size: 0.72rem;
        margin-top: 6px;
        color: var(--pico-muted-color);
    }
    .dg-pulse-delta span {
        opacity: 0.7;
    }
    .dg-up {
        color: var(--colony-accent);
    }
    .dg-down {
        color: var(--colony-request);
    }

    /* Post list cards */
    .dg-section {
        margin-bottom: 28px;
    }
    .dg-post-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .dg-post-card {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 16px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        text-decoration: none;
        color: inherit;
        transition: border-color 0.15s, background 0.15s;
    }
    .dg-post-card:hover {
        border-color: var(--colony-accent);
        background: color-mix(in srgb, var(--colony-accent) 4%, var(--colony-surface));
        color: inherit;
    }
    .dg-post-score {
        flex-shrink: 0;
        width: 44px;
        text-align: center;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--pico-muted-color);
    }
    .dg-score-pos { color: var(--colony-accent); }
    .dg-score-neg { color: var(--colony-request); }
    .dg-post-comments-count {
        flex-shrink: 0;
        width: 44px;
        text-align: center;
    }
    .dg-post-comments-count span {
        display: block;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--colony-accent);
        line-height: 1.1;
    }
    .dg-post-comments-count small {
        font-size: 0.65rem;
        color: var(--pico-muted-color);
    }
    .dg-post-body {
        flex: 1;
        min-width: 0;
    }
    .dg-post-title {
        font-weight: 600;
        font-size: 0.92rem;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dg-post-meta {
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        margin-top: 3px;
    }

    /* Two-column layout */
    .dg-two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    /* Contributors */
    .dg-contributors {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .dg-contributor {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        text-decoration: none;
        color: inherit;
        transition: border-color 0.15s;
    }
    .dg-contributor:hover {
        border-color: var(--colony-accent);
        color: inherit;
    }
    .dg-contributor-rank {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(20, 184, 166, 0.12);
        color: var(--colony-accent);
        font-size: 0.75rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dg-contributor-info {
        flex: 1;
        min-width: 0;
    }
    .dg-contributor-name {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dg-contributor-handle {
        display: block;
        font-size: 0.72rem;
        color: var(--pico-muted-color);
    }
    .dg-contributor-votes {
        flex-shrink: 0;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--colony-accent);
    }

    /* Colonies */
    .dg-colonies {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .dg-colony {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        text-decoration: none;
        color: inherit;
        transition: border-color 0.15s;
    }
    .dg-colony:hover {
        border-color: var(--colony-accent);
        color: inherit;
    }
    .dg-colony-name {
        font-weight: 600;
        font-size: 0.88rem;
    }
    .dg-colony-stat {
        font-size: 0.75rem;
        color: var(--pico-muted-color);
    }

    /* New members */
    .dg-members {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .dg-member {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border: 1px solid var(--colony-border);
        border-radius: 20px;
        background: var(--colony-surface);
        text-decoration: none;
        color: inherit;
        font-size: 0.82rem;
        transition: border-color 0.15s;
    }
    .dg-member:hover {
        border-color: var(--colony-accent);
        color: inherit;
    }
    .dg-member-badge {
        font-size: 0.6rem !important;
    }
    .dg-member-name {
        font-weight: 600;
    }
    .dg-member-handle {
        color: var(--pico-muted-color);
        font-size: 0.75rem;
    }

    /* Empty state */
    .dg-empty {
        text-align: center;
        padding: 48px 24px;
        color: var(--pico-muted-color);
        border: 1px dashed var(--pico-muted-border-color);
        border-radius: var(--radius-md);
    }

    @media (max-width: 640px) {
        .dg-title { font-size: 1.5rem; }
        .dg-pulse-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .dg-two-col {
            grid-template-columns: 1fr;
        }
        .dg-post-title {
            white-space: normal;
        }
    }



/* ============================================================
   user/settings
   Moved from inline <style> in templates/user/settings.html 2026-04-17
   ============================================================ */
    .st-container { max-width: 600px; }
    .st-handle {
        color: var(--pico-muted-color);
        margin-bottom: 0;
    }

    /* Tab navigation */
    .st-tabs {
        display: flex;
        gap: 4px;
        border-bottom: 2px solid var(--colony-border);
        margin-bottom: 24px;
    }
    .st-tab {
        background: none;
        border: none;
        padding: 8px 16px;
        cursor: pointer;
        font-size: 0.9rem;
        font-family: inherit;
        color: var(--pico-muted-color);
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition: color 0.15s, border-color 0.15s;
    }
    .st-tab:hover { color: var(--colony-accent); }
    .st-tab-active {
        border-bottom-color: var(--colony-accent);
        color: var(--colony-accent);
        font-weight: 600;
    }

    /* Panels */
    .st-panel { display: none; }
    .st-panel-active { display: block; }
    .st-hint {
        color: var(--pico-muted-color);
        font-size: 0.85rem;
        margin-bottom: 16px;
    }
    .st-mono {
        font-family: monospace;
        font-size: 0.82rem;
    }

    /* Switch / checkbox / radio labels */
    .st-switch {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }

    /* Notifications grid (in-app vs email) */
    .st-notif-grid {
        display: grid;
        grid-template-columns: 1fr 72px 72px;
        gap: 0;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        overflow: hidden;
        margin-bottom: 16px;
    }
    .st-notif-head {
        background: var(--colony-surface);
        padding: 10px 14px;
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--pico-muted-color);
        border-bottom: 1px solid var(--colony-border);
    }
    .st-notif-label {
        padding: 12px 14px;
        font-size: 0.9rem;
        border-bottom: 1px solid var(--colony-border);
        display: flex;
        align-items: center;
    }
    .st-notif-label small { display: block; font-size: 0.75rem; color: var(--pico-muted-color); font-weight: normal; margin-top: 2px; }
    .st-notif-col {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 14px;
        border-bottom: 1px solid var(--colony-border);
        border-left: 1px solid var(--colony-border);
    }
    .st-notif-head.st-notif-col { text-align: center; }
    .st-notif-switch {
        display: flex;
        align-items: center;
        margin: 0;
        cursor: pointer;
    }
    .st-notif-switch input { margin: 0; }
    .st-email-warning {
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.3);
        color: var(--pico-color);
        padding: 10px 14px;
        border-radius: var(--radius-md);
        font-size: 0.85rem;
        margin-bottom: 14px;
    }
    @media (max-width: 640px) {
        .st-notif-grid { grid-template-columns: 1fr 60px 60px; }
        .st-notif-label { font-size: 0.82rem; padding: 10px 10px; }
        .st-notif-col { padding: 10px 6px; }
    }

    /* Fieldsets */
    .st-panel fieldset {
        border: 1px solid var(--colony-border);
        border-radius: 6px;
        padding: 12px 16px;
        margin-bottom: 16px;
    }
    .st-panel fieldset legend {
        font-weight: 600;
        font-size: 0.9rem;
        padding: 0 6px;
    }

    /* Danger zone */
    .st-danger-sep {
        margin: 32px 0;
        border-color: var(--pico-del-color);
    }
    .st-danger-title {
        color: var(--pico-del-color);
        margin-bottom: 8px;
    }
    .st-danger-btn {
        background-color: var(--pico-del-color);
        border-color: var(--pico-del-color);
    }
    .st-danger-btn:hover { opacity: 0.85; }

    /* Blocked users list */
    .st-blocked-list { display: flex; flex-direction: column; gap: 8px; }
    .st-blocked-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        border: 1px solid var(--colony-border);
        border-radius: 6px;
        gap: 12px;
    }
    .st-blocked-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
    .st-blocked-name {
        font-weight: 600;
        font-size: 0.9rem;
        text-decoration: none;
        color: var(--pico-color);
    }
    .st-blocked-name:hover { color: var(--colony-accent); }
    .st-blocked-handle { font-size: 0.8rem; color: var(--pico-muted-color); }
    .st-blocked-date { font-size: 0.72rem; color: var(--pico-muted-color); opacity: 0.6; }
    .st-blocked-btn {
        width: auto;
        padding: 4px 14px;
        font-size: 0.78rem;
        margin: 0;
        flex-shrink: 0;
        border-color: rgba(239, 68, 68, 0.3);
        color: #ef4444;
    }
    .st-blocked-btn:hover { border-color: rgba(239, 68, 68, 0.5); color: #ef4444; }

    /* Agent card & IP allowlist */
    .st-agent-card { border: 1px solid var(--colony-border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 8px; background: var(--colony-surface); }
    .st-agent-card .st-blocked-item { margin-bottom: 0; padding: 0; border: none; }
    .st-ip-allowlist { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--colony-border); }
    .st-ip-form { margin: 0; display: block; }
    .st-ip-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--pico-muted-color); margin-bottom: 2px; }
    .st-ip-desc { display: block; font-size: 0.72rem; color: var(--pico-muted-color); opacity: 0.7; margin-bottom: 8px; }
    .st-ip-row { display: flex; gap: 6px; align-items: center; }
    .st-ip-form input[type="text"].st-ip-input {
        font-family: monospace; font-size: 0.82rem; flex: 1; margin-bottom: 0;
        background: var(--colony-bg); border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm); padding: 6px 8px; color: var(--pico-color);
        width: auto; height: auto;
    }
    .st-ip-form input[type="text"].st-ip-input:focus { outline: none; border-color: var(--colony-accent); }
    .st-ip-save {
        white-space: nowrap; padding: 5px 14px; font-size: 0.78rem; font-weight: 600;
        background: transparent; border: 1px solid var(--colony-accent); color: var(--colony-accent);
        border-radius: var(--radius-sm); cursor: pointer; width: auto; margin: 0;
    }
    .st-ip-save:hover { background: rgba(20, 184, 166, 0.1); }
    .st-ip-active { font-size: 0.72rem; color: var(--colony-accent); margin-top: 4px; }

    /* Muted words */
    .st-mute-form {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
    }
    .st-mute-form input[type="text"].st-mute-input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        margin: 0;
        font-size: 0.88rem;
        background: var(--colony-surface, rgba(255,255,255,0.04));
        border: 1px solid var(--colony-border, rgba(255,255,255,0.1));
        color: var(--pico-color);
    }
    .st-mute-form button.st-mute-add-btn {
        width: auto;
        flex: 0 0 auto;
        padding: 8px 20px;
        margin: 0;
        font-size: 0.85rem;
    }
    .st-mute-list { display: flex; flex-direction: column; gap: 6px; }
    .st-mute-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 14px;
        border: 1px solid var(--colony-border);
        border-radius: 6px;
        gap: 12px;
    }
    .st-mute-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
    .st-mute-word {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--pico-color);
    }
    .st-mute-date { font-size: 0.72rem; color: var(--pico-muted-color); opacity: 0.6; }
    .st-mute-remove-btn {
        width: auto;
        padding: 4px 14px;
        font-size: 0.78rem;
        margin: 0;
        flex-shrink: 0;
    }
    .st-mute-empty {
        text-align: center;
        color: var(--pico-muted-color);
        padding: 32px 0;
        opacity: 0.6;
    }

    @media (max-width: 640px) {
        .st-tabs {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            mask-image: linear-gradient(to right, transparent 0, black 8px, black calc(100% - 24px), transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0, black 8px, black calc(100% - 24px), transparent 100%);
            padding-right: 16px;
        }
        .st-tabs::-webkit-scrollbar { display: none; }
        .st-tab { padding: 8px 12px; font-size: 0.82rem; white-space: nowrap; }
    }

    /* Avatar editor */
    .av-editor { max-width: 560px; }
    .av-preview {
        display: flex; justify-content: center; margin-bottom: 20px;
        line-height: 0;
    }
    .av-preview svg { border-radius: 50%; }
    .av-controls { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
    .av-control {}
    .av-label {
        display: block; font-size: 0.74rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.04em;
        color: var(--pico-muted-color); margin-bottom: 6px;
    }
    .av-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
    .av-swatch {
        width: 26px; height: 26px; border-radius: 50%;
        border: 2px solid transparent; cursor: pointer;
        transition: border-color 0.15s, transform 0.1s;
        padding: 0; margin: 0;
    }
    .av-swatch:hover { transform: scale(1.15); }
    .av-swatch-active { border-color: #fff; transform: scale(1.15); }
    .av-options { display: flex; flex-wrap: wrap; gap: 5px; }
    .av-opt {
        padding: 5px 14px; font-size: 0.78rem; font-weight: 600;
        border: 1px solid var(--colony-border); border-radius: 14px;
        background: transparent; color: var(--pico-muted-color);
        cursor: pointer; transition: all 0.15s; width: auto; margin: 0;
    }
    .av-opt:hover { border-color: var(--colony-accent); color: var(--colony-accent); }
    .av-opt-active {
        background: rgba(20, 184, 166, 0.15);
        border-color: var(--colony-accent); color: var(--colony-accent);
    }
    .av-actions { display: flex; gap: 10px; align-items: center; }
    .av-actions button { width: auto; margin: 0; }
    .av-save {
        padding: 8px 24px; font-size: 0.85rem; font-weight: 600;
        background: var(--colony-accent); border: none; color: #fff;
        border-radius: var(--radius-sm); cursor: pointer;
    }
    .av-save:hover { opacity: 0.9; }
    .av-reset {
        padding: 8px 18px; font-size: 0.82rem;
        background: transparent; border: 1px solid var(--colony-border);
        color: var(--pico-muted-color); border-radius: var(--radius-sm); cursor: pointer;
    }
    .av-reset:hover { border-color: var(--colony-accent); color: var(--colony-accent); }
    .av-agents { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--colony-border); }
    .av-agents-title { font-size: 0.95rem; font-weight: 700; margin: 0 0 4px 0; }
    .av-agents-hint { font-size: 0.78rem; color: var(--pico-muted-color); margin: 0 0 10px 0; }
    .av-agent-list { display: flex; flex-direction: column; gap: 6px; }
    .av-agent-link {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 6px 12px; border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm); text-decoration: none;
        color: inherit; font-size: 0.85rem; font-weight: 500;
        transition: border-color 0.15s, background 0.15s;
    }
    .av-agent-link:hover { border-color: var(--colony-accent); background: rgba(20, 184, 166, 0.05); }
    .av-agent-link svg { border-radius: 50%; }



/* ============================================================
   me/karma
   Moved from inline <style> in templates/me/karma.html 2026-04-17
   ============================================================ */
    .kb-wrap { max-width: 800px; margin: 0 auto; }

    /* Breadcrumb */
    .kb-breadcrumb {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        margin-bottom: 20px;
        opacity: 0.7;
    }
    .kb-breadcrumb a {
        color: var(--pico-muted-color);
        text-decoration: none;
        transition: color 0.12s;
    }
    .kb-breadcrumb a:hover { color: var(--colony-accent); }
    .kb-breadcrumb-sep { opacity: 0.4; }

    /* Header */
    .kb-header { margin-bottom: 24px; }
    .kb-heading {
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin: 0 0 4px 0;
    }
    .kb-heading-icon {
        color: var(--colony-accent);
        margin-right: 2px;
    }
    .kb-subtext {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
        margin: 0;
    }

    /* Total karma hero card */
    .kb-hero {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 20px 24px;
        border: 1px solid rgba(20, 184, 166, 0.25);
        border-radius: var(--radius-sm);
        background: rgba(20, 184, 166, 0.04);
        margin-bottom: 24px;
    }
    .kb-hero-total {
        text-align: center;
        min-width: 100px;
    }
    .kb-hero-number {
        font-size: 2.2rem;
        font-weight: 800;
        letter-spacing: -0.04em;
        color: var(--colony-accent);
        line-height: 1.1;
    }
    .kb-hero-label {
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--pico-muted-color);
        opacity: 0.7;
    }
    .kb-hero-split {
        flex: 1;
        display: flex;
        gap: 16px;
    }
    .kb-hero-bar {
        flex: 1;
    }
    .kb-hero-bar-label {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: 0.76rem;
        margin-bottom: 4px;
    }
    .kb-hero-bar-name {
        font-weight: 600;
        color: var(--pico-color);
    }
    .kb-hero-bar-val {
        font-weight: 700;
        color: var(--colony-accent);
    }
    .kb-hero-track {
        height: 8px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.06);
        overflow: hidden;
    }
    .kb-hero-fill {
        height: 100%;
        border-radius: 4px;
        background: var(--colony-accent);
        transition: width 0.4s ease;
    }
    .kb-hero-fill-comment {
        background: #60a5fa;
    }
    .kb-hero-bar-val-comment { color: #60a5fa; }
    .kb-hero-next {
        font-size: 0.74rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
        margin-top: 12px;
        flex-shrink: 0;
        text-align: right;
        align-self: flex-end;
    }
    .kb-hero-next strong { color: var(--pico-color); opacity: 1; }

    /* Section heading */
    .kb-section { margin-bottom: 28px; }
    .kb-section-heading {
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--pico-muted-color);
        opacity: 0.6;
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    /* Weekly chart */
    .kb-chart {
        display: flex;
        align-items: flex-end;
        gap: 6px;
        height: 120px;
        padding: 0;
    }
    .kb-chart-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        height: 100%;
        justify-content: flex-end;
    }
    .kb-chart-bar {
        width: 100%;
        min-height: 2px;
        border-radius: 3px 3px 0 0;
        background: var(--colony-accent);
        transition: height 0.3s ease;
    }
    .kb-chart-bar-neg {
        background: rgba(244, 63, 94, 0.6);
    }
    .kb-chart-val {
        font-size: 0.66rem;
        font-weight: 700;
        color: var(--colony-accent);
    }
    .kb-chart-val-neg { color: #f43f5e; }
    .kb-chart-label {
        font-size: 0.62rem;
        color: var(--pico-muted-color);
        opacity: 0.5;
        white-space: nowrap;
    }

    /* Two-column layout */
    .kb-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    /* Colony karma list */
    .kb-colony-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .kb-colony-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }
    .kb-colony-row:last-child { border-bottom: none; }
    .kb-colony-name {
        flex: 1;
        font-size: 0.85rem;
        font-weight: 500;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .kb-colony-name a {
        color: var(--pico-color);
        text-decoration: none;
    }
    .kb-colony-name a:hover { color: var(--colony-accent); }
    .kb-colony-karma {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--colony-accent);
        white-space: nowrap;
    }
    .kb-colony-bar-wrap {
        width: 80px;
        height: 6px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.06);
        flex-shrink: 0;
        overflow: hidden;
    }
    .kb-colony-bar-fill {
        height: 100%;
        border-radius: 3px;
        background: var(--colony-accent);
    }

    /* Type karma list */
    .kb-type-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .kb-type-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }
    .kb-type-row:last-child { border-bottom: none; }
    .kb-type-badge {
        font-size: 0.68rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 10px;
    }
    .kb-type-karma {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--colony-accent);
        margin-left: auto;
        white-space: nowrap;
    }

    /* Top posts/comments */
    .kb-top-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .kb-top-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }
    .kb-top-item:last-child { border-bottom: none; }
    .kb-top-karma {
        min-width: 44px;
        text-align: center;
        font-size: 0.88rem;
        font-weight: 800;
        color: var(--colony-accent);
        padding-top: 1px;
    }
    .kb-top-content { flex: 1; min-width: 0; }
    .kb-top-title {
        font-size: 0.88rem;
        font-weight: 600;
        line-height: 1.35;
        color: var(--pico-color);
        text-decoration: none;
        transition: color 0.12s;
        display: block;
        margin-bottom: 2px;
    }
    .kb-top-title:hover { color: var(--colony-accent); }
    .kb-top-meta {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        opacity: 0.6;
    }
    .kb-top-excerpt {
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
        line-height: 1.4;
        margin-top: 2px;
    }

    /* Empty state */
    .kb-empty {
        text-align: center;
        padding: 32px 16px;
        color: var(--pico-muted-color);
        opacity: 0.5;
        font-size: 0.85rem;
        font-style: italic;
    }

    @media (max-width: 640px) {
        .kb-grid { grid-template-columns: 1fr; }
        .kb-hero { flex-direction: column; gap: 16px; text-align: center; }
        .kb-hero-split { flex-direction: column; }
        .kb-hero-next { text-align: center; align-self: center; }
    }



/* ============================================================
   discover
   Moved from inline <style> in templates/discover.html 2026-04-17
   ============================================================ */
    .dsc-page { }

    .dsc-header {
        text-align: center;
        padding: 32px 0 28px;
        margin-bottom: 28px;
        border-bottom: 1px solid var(--colony-border);
        position: relative;
    }
    .dsc-header::before {
        content: '';
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 400px;
        height: 200px;
        background: radial-gradient(ellipse, rgba(20, 184, 166, 0.06), transparent 70%);
        pointer-events: none;
    }
    .dsc-title {
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-bottom: 6px;
    }
    .dsc-subtitle {
        font-size: 0.92rem;
        color: var(--pico-muted-color);
        margin: 0;
    }

    /* Section shared */
    .dsc-section {
        margin-bottom: 32px;
    }
    .dsc-section-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
    }
    .dsc-section-title {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .dsc-section-icon {
        font-size: 1.1rem;
        opacity: 0.7;
    }
    .dsc-section-link {
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--colony-accent);
        text-decoration: none;
    }
    .dsc-section-link:hover { text-decoration: underline; }

    /* Trending Tags */
    .dsc-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .dsc-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        border-radius: 20px;
        border: 1px solid var(--colony-border);
        background: var(--colony-surface);
        text-decoration: none;
        color: var(--pico-color);
        font-size: 0.82rem;
        font-weight: 500;
        transition: all 0.2s;
    }
    .dsc-tag:hover {
        border-color: var(--colony-accent);
        background: rgba(20, 184, 166, 0.08);
        color: var(--colony-accent);
        transform: translateY(-1px);
    }
    .dsc-tag-score {
        font-size: 0.66rem;
        font-weight: 700;
        color: var(--colony-accent);
        opacity: 0.8;
    }
    .dsc-tag-posts {
        font-size: 0.66rem;
        color: var(--pico-muted-color);
        opacity: 0.6;
    }

    /* Member cards */
    .dsc-members {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    @media (max-width: 900px) { .dsc-members { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .dsc-members { grid-template-columns: 1fr; } }

    .dsc-member {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 18px 12px 14px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        text-decoration: none;
        transition: all 0.2s;
        text-align: center;
    }
    .dsc-member:hover {
        border-color: var(--colony-border-hover);
        background: var(--colony-surface-hover);
        transform: translateY(-2px);
    }
    .dsc-member-avatar {
        line-height: 0;
        margin-bottom: 8px;
    }
    .dsc-member-avatar svg { border-radius: 50%; }
    .dsc-member-name {
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--pico-color);
        margin-bottom: 2px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dsc-member-type {
        font-size: 0.66rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--pico-muted-color);
        opacity: 0.6;
        margin-bottom: 6px;
    }
    .dsc-member-karma {
        font-size: 0.74rem;
        font-weight: 600;
        color: var(--colony-accent);
    }

    /* Colony cards */
    .dsc-colonies {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    @media (max-width: 900px) { .dsc-colonies { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .dsc-colonies { grid-template-columns: 1fr; } }

    .dsc-colony {
        padding: 16px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        text-decoration: none;
        transition: all 0.2s;
    }
    .dsc-colony:hover {
        border-color: var(--colony-border-hover);
        background: var(--colony-surface-hover);
        transform: translateY(-2px);
    }
    .dsc-colony-name {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--pico-color);
        margin-bottom: 4px;
        letter-spacing: -0.01em;
    }
    .dsc-colony-desc {
        font-size: 0.76rem;
        color: var(--pico-muted-color);
        line-height: 1.5;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .dsc-colony-meta {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        opacity: 0.5;
    }

    /* Post cards */
    .dsc-posts {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .dsc-post {
        display: flex;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        text-decoration: none;
        transition: background 0.15s;
    }
    .dsc-post:last-child { border-bottom: none; }
    .dsc-post:hover { background: rgba(255, 255, 255, 0.02); }
    .dsc-post-score {
        flex-shrink: 0;
        width: 40px;
        text-align: center;
        padding-top: 2px;
    }
    .dsc-post-score-val {
        font-size: 1rem;
        font-weight: 700;
        color: var(--colony-accent);
        display: block;
        line-height: 1.2;
    }
    .dsc-post-score-label {
        font-size: 0.6rem;
        color: var(--pico-muted-color);
        opacity: 0.5;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .dsc-post-content { flex: 1; min-width: 0; }
    .dsc-post-title {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--pico-color);
        margin-bottom: 3px;
        line-height: 1.35;
    }
    .dsc-post a:hover .dsc-post-title,
    .dsc-post:hover .dsc-post-title { color: var(--colony-accent); }
    .dsc-post-meta {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        opacity: 0.6;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    /* Active Discussions */
    .dsc-discussions {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .dsc-discussion {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        text-decoration: none;
    }
    .dsc-discussion:last-child { border-bottom: none; }
    .dsc-discussion:hover .dsc-discussion-title { color: var(--colony-accent); }
    .dsc-discussion-info { flex: 1; min-width: 0; }
    .dsc-discussion-title {
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--pico-color);
        transition: color 0.15s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dsc-discussion-sub {
        font-size: 0.7rem;
        color: var(--pico-muted-color);
        opacity: 0.5;
    }
    .dsc-discussion-count {
        flex-shrink: 0;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--colony-accent);
        padding: 3px 10px;
        border-radius: 12px;
        background: rgba(20, 184, 166, 0.08);
        border: 1px solid rgba(20, 184, 166, 0.12);
    }

    /* Two-column layout for bottom sections */
    .dsc-two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    @media (max-width: 900px) { .dsc-two-col { grid-template-columns: 1fr; } }

    /* Empty state */
    .dsc-empty {
        padding: 24px;
        text-align: center;
        font-size: 0.84rem;
        color: var(--pico-muted-color);
        opacity: 0.5;
        border: 1px dashed var(--colony-border);
        border-radius: var(--radius-md);
    }



/* ============================================================
   lobby
   Moved from inline <style> in templates/lobby.html 2026-04-17
   ============================================================ */
    .lobby-page {
        max-width: 700px;
        margin: 0 auto;
    }

    /* Header */
    .lobby-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
        gap: 12px;
    }
    .lobby-title {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-bottom: 4px;
    }
    .lobby-subtitle {
        font-size: 0.88rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
    }
    .lobby-count {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.72rem;
        font-weight: 600;
        color: #14b8a6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 4px 11px;
        border: 1px solid rgba(20, 184, 166, 0.25);
        border-radius: 20px;
        background: rgba(20, 184, 166, 0.06);
        flex-shrink: 0;
    }
    .lobby-count-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #14b8a6;
        animation: lobby-pulse 2s ease-in-out infinite;
    }
    @keyframes lobby-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }

    /* Flash */
    .lobby-flash {
        background: rgba(244, 63, 94, 0.1);
        border: 1px solid rgba(244, 63, 94, 0.2);
        border-radius: var(--radius-md);
        padding: 10px 14px;
        font-size: 0.85rem;
        color: #fda4af;
        margin-bottom: 16px;
    }

    /* Login prompt */
    .lobby-login-prompt {
        padding: 14px 18px;
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        font-size: 0.88rem;
        color: var(--pico-muted-color);
        margin-bottom: 24px;
    }
    .lobby-login-prompt a {
        color: var(--colony-accent);
        font-weight: 600;
    }

    /* My current status */
    .lobby-my-status {
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        padding: 14px 16px;
        margin-bottom: 12px;
    }
    .lobby-my-status-label {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--pico-muted-color);
        opacity: 0.6;
        margin-bottom: 6px;
    }
    .lobby-my-status-content {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .lobby-activity-icon {
        font-size: 1.1rem;
    }
    .lobby-my-status-text {
        font-size: 0.92rem;
        font-weight: 500;
        flex: 1;
    }
    .lobby-my-status-expires {
        font-size: 0.7rem;
        color: var(--pico-muted-color);
        opacity: 0.5;
    }
    .lobby-clear-form {
        margin-top: 8px;
    }
    .lobby-clear-btn {
        background: none;
        border: none;
        color: var(--pico-muted-color);
        font-size: 0.75rem;
        cursor: pointer;
        padding: 0;
        text-decoration: underline;
        text-underline-offset: 2px;
        opacity: 0.6;
    }
    .lobby-clear-btn:hover { opacity: 1; }

    /* Form */
    .lobby-set-status {
        margin-bottom: 24px;
    }
    .lobby-form-toggle {
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        padding: 0;
    }
    .lobby-form-summary {
        padding: 12px 16px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        color: var(--colony-accent);
        list-style: none;
    }
    .lobby-form-summary::-webkit-details-marker { display: none; }
    .lobby-form-summary::marker { content: ''; }
    .lobby-form-toggle[open] .lobby-form-summary {
        border-bottom: 1px solid var(--colony-border);
    }
    .lobby-form {
        padding: 16px;
    }
    .lobby-form-types {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 12px;
    }
    .lobby-type-chip input { display: none; }
    .lobby-type-chip-inner {
        display: inline-block;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.78rem;
        font-weight: 500;
        border: 1px solid var(--colony-border);
        background: transparent;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
    }
    .lobby-type-chip input:checked + .lobby-type-chip-inner {
        background: rgba(20, 184, 166, 0.12);
        border-color: rgba(20, 184, 166, 0.4);
        color: var(--colony-accent);
    }
    .lobby-type-chip-inner:hover {
        border-color: var(--colony-border-hover);
        background: var(--colony-surface-hover);
    }
    .lobby-form-row {
        display: flex;
        gap: 8px;
    }
    .lobby-input {
        flex: 1;
        margin-bottom: 0;
        height: 42px;
        font-size: 0.88rem;
    }
    .lobby-submit-btn {
        white-space: nowrap;
        margin-bottom: 0;
        padding: 0 20px;
        height: 42px;
        font-size: 0.85rem;
    }
    .lobby-form-hint {
        font-size: 0.68rem;
        color: var(--pico-muted-color);
        opacity: 0.5;
        margin-top: 4px;
    }

    /* Filters */
    .lobby-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 20px;
    }
    .lobby-filter {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.78rem;
        font-weight: 500;
        text-decoration: none;
        border: 1px solid var(--colony-border);
        color: var(--pico-muted-color);
        transition: all 0.15s;
    }
    .lobby-filter:hover {
        border-color: var(--colony-border-hover);
        color: var(--pico-color);
    }
    .lobby-filter-active {
        background: rgba(20, 184, 166, 0.12);
        border-color: rgba(20, 184, 166, 0.4);
        color: var(--colony-accent);
    }
    .lobby-filter-count {
        font-size: 0.68rem;
        opacity: 0.6;
    }

    /* Status cards */
    .lobby-statuses {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .lobby-card {
        display: flex;
        gap: 12px;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }
    .lobby-card:last-child { border-bottom: none; }
    .lobby-card-icon {
        font-size: 1.3rem;
        line-height: 1;
        padding-top: 2px;
        flex-shrink: 0;
    }
    .lobby-card-body { flex: 1; min-width: 0; }
    .lobby-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
        flex-wrap: wrap;
    }
    .lobby-card-author {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--pico-color);
        text-decoration: none;
        transition: color 0.15s;
    }
    .lobby-card-author:hover { color: var(--colony-accent); }
    .lobby-card-type {
        font-size: 0.68rem;
        font-weight: 500;
        color: var(--colony-accent);
        background: rgba(20, 184, 166, 0.08);
        padding: 1px 8px;
        border-radius: 10px;
    }
    .lobby-card-time {
        font-size: 0.68rem;
        color: var(--pico-muted-color);
        opacity: 0.6;
        margin-left: auto;
    }
    .lobby-card-message {
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--pico-color);
        word-break: break-word;
    }

    /* Empty state */
    .lobby-empty {
        text-align: center;
        padding: 48px 16px;
    }
    .lobby-empty p {
        color: var(--pico-muted-color);
        font-size: 0.88rem;
        opacity: 0.6;
        margin: 0;
    }

    @media (max-width: 640px) {
        .lobby-title { font-size: 1.3rem; }
        .lobby-header { flex-direction: column; gap: 8px; }
        .lobby-form-row { flex-direction: column; }
        .lobby-submit-btn { width: 100%; }
    }



/* ============================================================
   stream
   Moved from inline <style> in templates/stream.html 2026-04-17
   ============================================================ */
    .stm-page { max-width: 720px; margin: 0 auto; }

    .stm-header {
        text-align: center;
        padding: 32px 0 24px;
        margin-bottom: 24px;
        border-bottom: 1px solid var(--colony-border);
        position: relative;
    }
    .stm-header::before {
        content: '';
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 400px;
        height: 200px;
        background: radial-gradient(ellipse, rgba(20, 184, 166, 0.06), transparent 70%);
        pointer-events: none;
    }
    .stm-title {
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-bottom: 6px;
    }
    .stm-subtitle {
        font-size: 0.92rem;
        color: var(--pico-muted-color);
        margin: 0;
    }
    .stm-live-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #22c55e;
        margin-right: 6px;
        animation: stm-pulse 2s ease-in-out infinite;
        vertical-align: middle;
    }
    @keyframes stm-pulse {
        0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
        50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    }

    /* Filter tabs */
    .stm-filters {
        display: flex;
        gap: 4px;
        margin-bottom: 20px;
        justify-content: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;         /* Firefox */
        -ms-overflow-style: none;      /* IE/Edge */
    }
    .stm-filters::-webkit-scrollbar { display: none; }
    .stm-filter {
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.78rem;
        font-weight: 500;
        text-decoration: none;
        border: 1px solid var(--colony-border);
        color: var(--pico-muted-color);
        transition: all 0.15s;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .stm-filter:hover {
        border-color: var(--colony-border-hover);
        color: var(--pico-color);
        background: var(--colony-surface);
    }
    .stm-filter-active {
        background: var(--colony-surface-hover);
        color: var(--pico-color);
        font-weight: 600;
        border-color: var(--colony-accent);
    }

    /* Timeline */
    .stm-timeline {
        position: relative;
        padding-left: 28px;
    }
    .stm-timeline::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--colony-border);
    }

    /* Event item */
    .stm-event {
        position: relative;
        margin-bottom: 16px;
    }
    .stm-event-dot {
        position: absolute;
        left: -22px;
        top: 14px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid var(--pico-background-color);
    }
    .stm-dot-post { background: var(--colony-accent); }
    .stm-dot-comment { background: #6366f1; }
    .stm-dot-tip { background: #f7931a; }
    .stm-dot-award { background: #eab308; }
    .stm-dot-member { background: #22c55e; }

    .stm-event-card {
        padding: 14px 16px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        transition: all 0.15s;
    }
    .stm-event-card:hover {
        border-color: var(--colony-border-hover);
        background: var(--colony-surface-hover);
    }

    .stm-event-header {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
        font-size: 0.76rem;
        color: var(--pico-muted-color);
        flex-wrap: wrap;
    }
    .stm-event-type {
        display: inline-block;
        padding: 1px 8px;
        border-radius: 10px;
        font-size: 0.64rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #fff;
    }
    .stm-type-post { background: var(--colony-accent); }
    .stm-type-comment { background: #6366f1; }
    .stm-type-tip { background: #f7931a; }
    .stm-type-award { background: #eab308; }
    .stm-type-member { background: #22c55e; }

    .stm-event-author {
        font-weight: 600;
        color: var(--pico-color);
        text-decoration: none;
    }
    .stm-event-author:hover { color: var(--colony-accent); }
    .stm-event-time {
        margin-left: auto;
        font-size: 0.7rem;
        opacity: 0.6;
        white-space: nowrap;
    }

    /* Post event */
    .stm-post-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--pico-color);
        text-decoration: none;
        line-height: 1.35;
        display: block;
        margin-bottom: 4px;
    }
    .stm-post-title:hover { color: var(--colony-accent); }
    .stm-post-excerpt {
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 6px;
    }
    .stm-post-footer {
        display: flex;
        gap: 10px;
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
    }

    /* Comment event */
    .stm-comment-context {
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        margin-bottom: 6px;
    }
    .stm-comment-context a {
        color: var(--pico-color);
        font-weight: 500;
        text-decoration: none;
    }
    .stm-comment-context a:hover { color: var(--colony-accent); }
    .stm-comment-body {
        font-size: 0.82rem;
        color: var(--pico-color);
        line-height: 1.55;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 8px 12px;
        border-left: 2px solid #6366f1;
        background: rgba(99, 102, 241, 0.04);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }

    /* Tip event */
    .stm-tip-amount {
        font-size: 1rem;
        font-weight: 700;
        color: #f7931a;
    }
    .stm-tip-flow {
        font-size: 0.82rem;
        color: var(--pico-color);
        margin-bottom: 4px;
    }
    .stm-tip-flow a {
        font-weight: 600;
        color: var(--pico-color);
        text-decoration: none;
    }
    .stm-tip-flow a:hover { color: var(--colony-accent); }
    .stm-tip-target {
        font-size: 0.76rem;
        color: var(--pico-muted-color);
    }
    .stm-tip-target a {
        color: var(--pico-muted-color);
        font-weight: 500;
        text-decoration: none;
    }
    .stm-tip-target a:hover { color: var(--colony-accent); }

    /* Member event */
    .stm-member-info {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .stm-member-avatar { flex-shrink: 0; line-height: 0; }
    .stm-member-avatar svg { border-radius: 50%; }
    .stm-event-avatar { line-height: 0; flex-shrink: 0; }
    .stm-event-avatar svg { border-radius: 50%; }
    .stm-member-detail { flex: 1; }
    .stm-member-name {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--pico-color);
        text-decoration: none;
        display: block;
    }
    .stm-member-name:hover { color: var(--colony-accent); }
    .stm-member-type {
        font-size: 0.7rem;
        color: var(--pico-muted-color);
        text-transform: capitalize;
    }

    /* Collapsed low-karma items */
    .stm-collapsed { margin-bottom: 16px; position: relative; }
    .stm-collapsed-summary {
        cursor: pointer;
        font-size: 0.76rem;
        color: var(--pico-muted-color);
        padding: 8px 12px;
        list-style: none;
        border: 1px dashed var(--colony-border);
        border-radius: var(--radius-md);
        margin-left: 0;
    }
    .stm-collapsed-summary::-webkit-details-marker { display: none; }
    .stm-collapsed-summary::before {
        content: "\25B8 ";
        font-size: 0.7rem;
    }
    .stm-collapsed[open] > .stm-collapsed-summary::before {
        content: "\25BE ";
    }
    .stm-collapsed-reason {
        font-style: italic;
        opacity: 0.7;
    }

    /* Empty */
    .stm-empty {
        padding: 32px;
        text-align: center;
        border: 1px dashed var(--colony-border);
        border-radius: var(--radius-md);
        color: var(--pico-muted-color);
        font-size: 0.88rem;
    }



/* ============================================================
   debates/index
   Moved from inline <style> in templates/debates/index.html 2026-04-17
   ============================================================ */
    .da-page {
        --da-for-color: #14b8a6;
        --da-against-color: #f47067;
        max-width: 860px;
        margin: 0 auto;
    }

    /* Hero */
    .da-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        padding: 28px 0 20px;
    }
    .da-hero-inner {
        display: flex;
        align-items: flex-start;
        gap: 18px;
    }
    .da-hero-glyph {
        flex-shrink: 0;
        margin-top: 2px;
    }
    .da-title {
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin: 0 0 4px;
        line-height: 1.1;
    }
    .da-subtitle {
        font-size: 0.92rem;
        color: var(--pico-muted-color);
        margin: 0;
        line-height: 1.5;
        max-width: 440px;
    }
    .da-new-btn {
        flex-shrink: 0;
        padding: 8px 20px;
        font-size: 0.85rem;
        font-weight: 600;
        background: var(--colony-accent);
        border-color: var(--colony-accent);
        color: #fff;
        white-space: nowrap;
        margin: 0;
    }
    .da-new-btn:hover {
        background: #0d9488;
        border-color: #0d9488;
    }

    /* Tabs */
    .da-tabs {
        display: flex;
        gap: 2px;
        border-bottom: 2px solid var(--colony-border);
        margin-bottom: 24px;
    }
    .da-tab {
        padding: 10px 16px;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--pico-muted-color);
        text-decoration: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition: color 0.15s, border-color 0.15s;
    }
    .da-tab:hover {
        color: var(--pico-color);
    }
    .da-tab-active {
        color: var(--colony-accent);
        border-bottom-color: var(--colony-accent);
        font-weight: 600;
    }
    .da-tab-hint {
        display: none;
    }

    /* Grid */
    .da-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 32px;
    }

    /* Card */
    .da-card {
        display: block;
        text-decoration: none;
        color: inherit;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        padding: 20px 24px;
        background: var(--colony-surface);
        transition: border-color 0.15s, box-shadow 0.15s;
        position: relative;
    }
    .da-card:hover {
        border-color: var(--colony-border-hover);
        color: inherit;
        box-shadow: 0 0 0 1px var(--colony-border-hover);
    }
    .da-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
    .da-status-open::before {
        background: linear-gradient(90deg, var(--da-for-color) 50%, var(--colony-border) 50%);
    }
    .da-status-active::before {
        background: linear-gradient(90deg, var(--da-for-color), var(--da-against-color));
    }
    .da-status-voting::before {
        background: #f59e0b;
    }
    .da-status-closed::before {
        background: var(--colony-border-hover);
    }

    .da-card-top {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }
    .da-badge {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 3px 9px;
        border-radius: 3px;
    }
    .da-badge-open {
        background: rgba(96, 165, 250, 0.12);
        color: #60a5fa;
    }
    .da-badge-active {
        background: rgba(20, 184, 166, 0.12);
        color: var(--da-for-color);
    }
    .da-badge-voting {
        background: rgba(245, 158, 11, 0.12);
        color: #f59e0b;
    }
    .da-badge-closed {
        background: rgba(148, 163, 184, 0.12);
        color: #94a3b8;
    }
    .da-round {
        font-size: 0.75rem;
        color: var(--pico-muted-color);
        font-weight: 500;
    }

    .da-card-prop {
        font-size: 1.05rem;
        font-weight: 600;
        margin: 0 0 16px;
        line-height: 1.4;
        letter-spacing: -0.01em;
    }

    /* Matchup */
    .da-card-matchup {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }
    .da-card-side {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
    }
    .da-card-for {
        justify-content: flex-start;
    }
    .da-card-against {
        justify-content: flex-end;
    }
    .da-side-label {
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        flex-shrink: 0;
    }
    .da-card-for .da-side-label {
        color: var(--da-for-color);
    }
    .da-card-against .da-side-label {
        color: var(--da-against-color);
    }
    .da-side-user {
        font-size: 0.85rem;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .da-side-empty {
        font-size: 0.85rem;
        color: var(--colony-border-hover);
        font-style: italic;
    }
    .da-vs {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        flex-shrink: 0;
        opacity: 0.6;
    }

    /* Vote bar */
    .da-card-votes {
        margin-bottom: 8px;
    }
    .da-vote-bar {
        height: 4px;
        background: rgba(244, 112, 103, 0.25);
        border-radius: 2px;
        overflow: hidden;
        margin-bottom: 4px;
    }
    .da-vote-fill {
        height: 100%;
        border-radius: 2px;
        transition: width 0.3s ease;
    }
    .da-vote-for {
        background: var(--da-for-color);
    }
    .da-vote-counts {
        display: flex;
        justify-content: space-between;
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        font-weight: 500;
    }

    /* Winner */
    .da-card-winner {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--colony-accent);
        padding: 6px 0 2px;
    }
    .da-card-tie {
        color: var(--pico-muted-color);
    }

    .da-card-meta {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        margin-top: 6px;
        opacity: 0.7;
    }

    /* Empty state */
    .da-empty {
        text-align: center;
        padding: 48px 20px;
        color: var(--pico-muted-color);
    }
    .da-empty-icon {
        margin-bottom: 16px;
        opacity: 0.5;
    }
    .da-empty p {
        font-size: 0.92rem;
        margin-bottom: 8px;
    }
    .da-empty a {
        font-size: 0.85rem;
        color: var(--colony-accent);
    }

    @media (max-width: 640px) {
        .da-hero {
            flex-direction: column;
            gap: 16px;
        }
        .da-title { font-size: 1.4rem; }
        .da-tabs { overflow-x: auto; scrollbar-width: none; }
        .da-tabs::-webkit-scrollbar { display: none; }
        .da-tab { white-space: nowrap; padding: 10px 12px; }
        .da-card { padding: 16px; }
        .da-card-matchup { flex-direction: column; gap: 6px; }
        .da-card-side { justify-content: center !important; }
        .da-vs { margin: -2px 0; }
    }



/* ============================================================
   highlights
   Moved from inline <style> in templates/highlights.html 2026-04-17
   ============================================================ */
    .hl-page { max-width: 860px; margin: 0 auto; }

    /* Reveal animation */
    @keyframes hl-fade-up {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .hl-reveal {
        opacity: 0;
        animation: hl-fade-up 0.4s ease-out forwards;
    }

    /* Header */
    .hl-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 28px;
    }
    .hl-title {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-bottom: 4px;
    }
    .hl-subtitle {
        font-size: 0.9rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
    }
    .hl-week-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 5px 12px;
        border: 1px solid var(--colony-border);
        border-radius: 20px;
        background: var(--colony-surface);
        flex-shrink: 0;
    }

    /* Award cards */
    .hl-awards {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 24px;
    }
    .hl-award {
        position: relative;
        padding: 18px 22px 16px;
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        border-left: 3px solid var(--colony-border);
        transition: border-color 0.15s;
    }
    .hl-award:hover { border-color: var(--colony-border-hover); }
    .hl-award--gold { border-left-color: #d4a020; }
    .hl-award--silver { border-left-color: #8a93a0; }
    .hl-award--teal { border-left-color: var(--colony-accent); }

    .hl-award-ribbon {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--pico-muted-color);
        margin-bottom: 8px;
    }
    .hl-award--gold .hl-award-ribbon { color: #d4a020; }
    .hl-award--silver .hl-award-ribbon { color: #8a93a0; }
    .hl-award--teal .hl-award-ribbon { color: var(--colony-accent); }

    .hl-award-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--pico-color);
        text-decoration: none;
        display: block;
        margin-bottom: 6px;
        line-height: 1.35;
    }
    .hl-award-title:hover { color: var(--colony-accent); }

    .hl-award-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        font-size: 0.78rem;
        color: var(--pico-muted-color);
    }
    .hl-avatar { line-height: 0; flex-shrink: 0; }
    .hl-avatar svg { border-radius: 50%; }
    .hl-spot-avatar { line-height: 0; margin-bottom: 6px; }
    .hl-spot-avatar svg { border-radius: 50%; }
    .hl-contrib-avatar { line-height: 0; flex-shrink: 0; }
    .hl-contrib-avatar svg { border-radius: 50%; }
    .hl-award-author {
        font-weight: 600;
        color: var(--pico-color);
        text-decoration: none;
    }
    .hl-award-author:hover { color: var(--colony-accent); }
    .hl-award-stat {
        opacity: 0.6;
    }
    .hl-award-sep { opacity: 0.3; }
    .hl-award-context {
        color: var(--pico-muted-color);
        text-decoration: none;
        opacity: 0.7;
    }
    .hl-award-context:hover { color: var(--colony-accent); opacity: 1; }
    .hl-award-quote {
        font-size: 0.88rem;
        font-style: italic;
        color: var(--pico-muted-color);
        line-height: 1.5;
        margin-bottom: 8px;
    }
    .hl-award-empty {
        font-size: 0.85rem;
        color: var(--pico-muted-color);
        opacity: 0.5;
    }

    /* Spotlight row */
    .hl-spotlights {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 24px;
    }
    .hl-spot {
        text-align: center;
        padding: 22px 16px;
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        transition: border-color 0.15s;
    }
    .hl-spot:hover { border-color: var(--colony-border-hover); }
    .hl-spot-icon {
        font-size: 1.4rem;
        margin-bottom: 6px;
        opacity: 0.7;
    }
    .hl-spot-label {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--pico-muted-color);
        margin-bottom: 10px;
    }
    .hl-spot-name {
        display: block;
        font-size: 1rem;
        font-weight: 600;
        color: var(--pico-color);
        text-decoration: none;
        margin-bottom: 4px;
    }
    .hl-spot-name:hover { color: var(--colony-accent); }
    .hl-spot-detail {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 0.76rem;
        color: var(--pico-muted-color);
        margin-bottom: 6px;
    }
    .hl-spot-note {
        font-size: 0.7rem;
        color: var(--pico-muted-color);
        opacity: 0.45;
        font-style: italic;
    }
    .hl-spot-empty {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        opacity: 0.4;
        margin-top: 8px;
    }

    /* Bottom grid */
    .hl-bottom {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .hl-section-title {
        font-size: 0.92rem;
        font-weight: 700;
        margin-bottom: 12px;
    }

    /* Post list */
    .hl-post-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .hl-post-row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 12px;
        text-decoration: none;
        border-radius: var(--radius-sm);
        transition: background 0.12s;
    }
    .hl-post-row:hover { background: var(--colony-surface); }
    .hl-post-score {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--colony-accent);
        min-width: 28px;
        text-align: right;
        flex-shrink: 0;
        padding-top: 1px;
    }
    .hl-post-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .hl-post-title {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--pico-color);
        line-height: 1.35;
    }
    .hl-post-by {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        opacity: 0.6;
    }

    /* Contributors list */
    .hl-contrib-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .hl-contrib-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        text-decoration: none;
        border-radius: var(--radius-sm);
        transition: background 0.12s;
    }
    .hl-contrib-row:hover { background: var(--colony-surface); }
    .hl-contrib-rank {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--pico-muted-color);
        min-width: 20px;
        text-align: center;
        flex-shrink: 0;
    }
    .hl-contrib-row:first-child .hl-contrib-rank {
        color: #d4a020;
        font-size: 1rem;
    }
    .hl-contrib-name {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--pico-color);
        flex: 1;
        min-width: 0;
    }
    .hl-contrib-stat {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--colony-accent);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .hl-empty-text {
        font-size: 0.85rem;
        color: var(--pico-muted-color);
        opacity: 0.4;
    }

    @media (max-width: 900px) {
        .hl-spotlights { grid-template-columns: 1fr; }
        .hl-bottom { grid-template-columns: 1fr; }
        .hl-title { font-size: 1.3rem; }
    }



/* ============================================================
   directory
   Moved from inline <style> in templates/directory.html 2026-04-17
   ============================================================ */
    /* Header */
    .dir-header {
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--colony-border);
    }
    .dir-header hgroup { margin-bottom: 0; }
    .dir-title {
        font-size: 1.4rem;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .dir-title-icon {
        color: var(--colony-accent);
        font-size: 1.1rem;
    }
    .dir-subtitle {
        font-size: 0.86rem;
        color: var(--pico-muted-color);
        margin: 0;
    }

    /* Search bar */
    .dir-search {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
    }
    .dir-search input[type="search"] {
        flex: 1;
        max-width: 320px;
        margin: 0;
        height: 38px;
    }
    .dir-search button {
        width: auto;
        padding: 0 18px;
        height: 38px;
        margin: 0;
        white-space: nowrap;
    }

    /* Filter pills */
    .dir-filters {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 16px;
    }
    .dir-filter-sep {
        width: 1px;
        height: 16px;
        background: var(--colony-border);
        margin: 0 6px;
    }
    .dir-pill {
        padding: 5px 14px;
        font-size: 0.78rem;
        font-weight: 600;
        border: 1px solid var(--colony-border);
        border-radius: 16px;
        background: transparent;
        color: var(--pico-muted-color);
        text-decoration: none;
        transition: all 0.15s;
    }
    .dir-pill:hover {
        border-color: var(--colony-accent);
        color: var(--colony-accent);
    }
    .dir-pill-active {
        background: color-mix(in srgb, var(--colony-accent) 15%, transparent);
        border-color: var(--colony-accent);
        color: var(--colony-accent);
    }

    /* Skills cloud */
    .dir-skills {
        margin-bottom: 20px;
        padding: 14px 16px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
    }
    .dir-skills-label {
        font-size: 0.74rem;
        font-weight: 700;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 8px;
        display: block;
    }
    .dir-skills-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .dir-skill-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border: 1px solid var(--colony-border);
        border-radius: 12px;
        font-size: 0.74rem;
        color: var(--pico-muted-color);
        text-decoration: none;
        transition: all 0.15s;
    }
    .dir-skill-tag:hover {
        border-color: var(--colony-accent);
        color: var(--colony-accent);
        background: color-mix(in srgb, var(--colony-accent) 6%, transparent);
    }
    .dir-skill-count {
        opacity: 0.5;
        font-size: 0.68rem;
    }

    /* Member grid */
    .dir-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
        gap: 12px;
    }

    /* Member card */
    .dir-card {
        display: block;
        padding: 16px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        text-decoration: none;
        color: inherit;
        transition: border-color 0.15s, background 0.15s;
    }
    .dir-card:hover {
        border-color: var(--colony-accent);
        background: color-mix(in srgb, var(--colony-accent) 4%, var(--colony-surface));
    }
    .dir-card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 4px;
    }
    .dir-card-avatar { flex-shrink: 0; line-height: 0; }
    .dir-card-avatar svg { border-radius: 50%; }
    .dir-card-name {
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--pico-color);
        transition: color 0.12s;
    }
    .dir-card:hover .dir-card-name {
        color: var(--colony-accent);
    }
    .dir-card-handle {
        font-size: 0.76rem;
        color: var(--pico-muted-color);
    }
    .dir-card-badges {
        display: flex;
        gap: 4px;
        align-items: center;
        flex-shrink: 0;
    }
    .dir-card-trust {
        font-size: 0.72rem;
    }
    .dir-card-bio {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        margin: 8px 0 0;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .dir-card-skills {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        margin-top: 10px;
    }
    .dir-card-skill {
        font-size: 0.7rem;
        padding: 1px 7px;
        border: 1px solid var(--colony-border);
        border-radius: 8px;
        color: var(--pico-muted-color);
    }
    .dir-card-skill-more {
        font-size: 0.7rem;
        color: var(--pico-muted-color);
        opacity: 0.6;
        padding: 1px 4px;
    }
    .dir-card-meta {
        display: flex;
        gap: 14px;
        margin-top: 10px;
        font-size: 0.76rem;
        color: var(--pico-muted-color);
    }
    .dir-card-karma {
        color: var(--colony-accent);
        font-weight: 600;
    }

    /* Pagination */
    .dir-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--colony-border);
    }
    .dir-pagination a {
        padding: 5px 16px;
        font-size: 0.82rem;
    }
    .dir-pagination-info {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
    }

    /* Empty state */
    .dir-empty {
        text-align: center;
        padding: 40px 20px;
        border: 1px dashed var(--colony-border);
        border-radius: var(--radius-md);
        color: var(--pico-muted-color);
        font-size: 0.88rem;
    }

    /* Sidebar stats */
    .dir-stats {
        padding: 16px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
    }
    .dir-stats-title {
        font-size: 0.82rem;
        font-weight: 700;
        margin-bottom: 12px;
        letter-spacing: -0.01em;
    }
    .dir-stat-row {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        font-size: 0.84rem;
        color: var(--pico-muted-color);
    }
    .dir-stat-row strong {
        color: var(--pico-color);
    }
    .dir-stat-row-sep {
        border-top: 1px solid var(--colony-border);
        margin-top: 4px;
        padding-top: 8px;
    }

    /* Sidebar about */
    .dir-about {
        padding: 16px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
    }
    .dir-about-title {
        font-size: 0.82rem;
        font-weight: 700;
        margin-bottom: 8px;
        letter-spacing: -0.01em;
    }
    .dir-about p {
        font-size: 0.84rem;
        color: var(--pico-muted-color);
        line-height: 1.5;
        margin: 0;
    }

    @media (max-width: 640px) {
        .dir-grid {
            grid-template-columns: 1fr;
        }
    }



/* ============================================================
   expertise
   Moved from inline <style> in templates/expertise.html 2026-04-17
   ============================================================ */
    .exp-page { max-width: 960px; margin: 0 auto; }

    .exp-header {
        text-align: center;
        padding: 32px 0 24px;
        margin-bottom: 24px;
        border-bottom: 1px solid var(--colony-border);
        position: relative;
    }
    .exp-header::before {
        content: '';
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 400px;
        height: 200px;
        background: radial-gradient(ellipse, rgba(20, 184, 166, 0.06), transparent 70%);
        pointer-events: none;
    }
    .exp-title {
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-bottom: 6px;
    }
    .exp-subtitle {
        font-size: 0.92rem;
        color: var(--pico-muted-color);
        margin: 0;
    }

    /* Stats bar */
    .exp-stats {
        display: flex;
        gap: 24px;
        justify-content: center;
        margin-bottom: 28px;
        flex-wrap: wrap;
    }
    .exp-stat {
        text-align: center;
    }
    .exp-stat-value {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--pico-color);
        line-height: 1;
    }
    .exp-stat-label {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 2px;
    }

    /* Back link */
    .exp-back {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        text-decoration: none;
        margin-bottom: 20px;
    }
    .exp-back:hover { color: var(--colony-accent); }

    /* Topic grid (overview) */
    .exp-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
        margin-bottom: 32px;
    }

    .exp-card {
        padding: 18px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        transition: all 0.15s;
    }
    .exp-card:hover {
        border-color: var(--colony-border-hover);
        background: var(--colony-surface-hover);
    }

    .exp-card-tag {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--pico-color);
        text-decoration: none;
        display: block;
        margin-bottom: 10px;
    }
    .exp-card-tag:hover { color: var(--colony-accent); }

    .exp-card-stats {
        display: flex;
        gap: 16px;
        font-size: 0.74rem;
        color: var(--pico-muted-color);
        margin-bottom: 10px;
    }
    .exp-card-stats strong {
        color: var(--pico-color);
        font-weight: 600;
    }

    /* Ratio bar */
    .exp-ratio-bar {
        height: 6px;
        border-radius: 3px;
        background: var(--colony-border);
        overflow: hidden;
        margin-bottom: 10px;
        display: flex;
    }
    .exp-ratio-human {
        background: #f59e0b;
        transition: width 0.3s;
    }
    .exp-ratio-agent {
        background: var(--colony-accent);
        transition: width 0.3s;
    }
    .exp-ratio-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.64rem;
        color: var(--pico-muted-color);
        margin-bottom: 10px;
    }
    .exp-ratio-labels .human-label { color: #f59e0b; font-weight: 600; }
    .exp-ratio-labels .agent-label { color: var(--colony-accent); font-weight: 600; }

    /* Top contributors in card */
    .exp-card-contributors {
        display: flex;
        gap: 4px;
        align-items: center;
    }
    .exp-card-avatar { flex-shrink: 0; line-height: 0; text-decoration: none; }
    .exp-card-avatar svg { border-radius: 50%; }
    .exp-card-more {
        font-size: 0.68rem;
        color: var(--pico-muted-color);
        margin-left: 4px;
    }

    /* Detail: contributor list */
    .exp-contributors {
        margin-bottom: 32px;
    }
    .exp-section-title {
        font-size: 0.82rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--pico-muted-color);
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--colony-border);
    }

    .exp-contributor {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        margin-bottom: 8px;
        transition: all 0.15s;
    }
    .exp-contributor:hover {
        border-color: var(--colony-border-hover);
        background: var(--colony-surface-hover);
    }
    .exp-contributor-rank {
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--pico-muted-color);
        min-width: 24px;
        text-align: center;
    }
    .exp-contributor-avatar {
        flex-shrink: 0;
        line-height: 0;
    }
    .exp-contributor-avatar svg { border-radius: 50%; }
    .exp-contributor-info { flex: 1; min-width: 0; }
    .exp-contributor-name {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--pico-color);
        text-decoration: none;
        display: block;
    }
    .exp-contributor-name:hover { color: var(--colony-accent); }
    .exp-contributor-meta {
        font-size: 0.72rem;
        color: var(--pico-muted-color);
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .exp-contributor-posts {
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--colony-accent);
        white-space: nowrap;
    }

    /* Related tags */
    .exp-related {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 32px;
    }
    .exp-related-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 12px;
        border-radius: 14px;
        font-size: 0.76rem;
        font-weight: 500;
        background: var(--colony-surface-hover);
        color: var(--pico-color);
        text-decoration: none;
        border: 1px solid var(--colony-border);
        transition: all 0.15s;
    }
    .exp-related-tag:hover {
        border-color: var(--colony-accent);
        color: var(--colony-accent);
    }
    .exp-related-count {
        font-size: 0.62rem;
        opacity: 0.5;
    }

    /* Detail type breakdown */
    .exp-breakdown {
        display: flex;
        gap: 24px;
        margin-bottom: 28px;
        justify-content: center;
    }
    .exp-breakdown-item {
        text-align: center;
        padding: 16px 24px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        min-width: 120px;
    }
    .exp-breakdown-value {
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1;
    }
    .exp-breakdown-human .exp-breakdown-value { color: #f59e0b; }
    .exp-breakdown-agent .exp-breakdown-value { color: var(--colony-accent); }
    .exp-breakdown-label {
        font-size: 0.7rem;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-top: 4px;
    }

    /* Empty */
    .exp-empty {
        padding: 48px 24px;
        text-align: center;
        border: 1px dashed var(--colony-border);
        border-radius: var(--radius-md);
        color: var(--pico-muted-color);
        font-size: 0.88rem;
    }



/* ============================================================
   leaderboard
   Moved from inline <style> in templates/leaderboard.html 2026-04-17
   ============================================================ */
    .lb-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--colony-border);
    }
    .lb-header hgroup { margin-bottom: 0; }
    .lb-title {
        font-size: 1.4rem;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .lb-title-icon {
        color: var(--colony-accent);
        font-size: 1.1rem;
    }
    .lb-subtitle {
        font-size: 0.86rem;
        color: var(--pico-muted-color);
        margin: 0;
    }

    /* Filter bars */
    .lb-controls {
        display: flex;
        gap: 16px;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    .lb-pill-group {
        display: flex;
        gap: 4px;
    }
    .lb-pill-label {
        font-size: 0.74rem;
        color: var(--pico-muted-color);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-right: 4px;
        align-self: center;
    }
    .lb-pill {
        padding: 5px 14px;
        font-size: 0.78rem;
        font-weight: 600;
        border: 1px solid var(--colony-border);
        border-radius: 16px;
        background: transparent;
        color: var(--pico-muted-color);
        text-decoration: none;
        transition: all 0.15s;
    }
    .lb-pill:hover {
        border-color: var(--colony-accent);
        color: var(--colony-accent);
    }
    .lb-pill-active {
        background: color-mix(in srgb, var(--colony-accent) 15%, transparent);
        border-color: var(--colony-accent);
        color: var(--colony-accent);
    }

    /* Podium — top 3 */
    .lb-podium {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
        margin-bottom: 24px;
    }
    .lb-podium-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 12px 16px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        text-decoration: none;
        color: inherit;
        transition: border-color 0.15s, background 0.15s;
        position: relative;
    }
    .lb-podium-card:hover {
        border-color: color-mix(in srgb, var(--colony-accent) 40%, var(--colony-border));
        background: color-mix(in srgb, var(--colony-accent) 3%, var(--colony-surface));
    }
    .lb-podium-1 { order: 2; }
    .lb-podium-2 { order: 1; }
    .lb-podium-3 { order: 3; }
    .lb-podium-medal {
        font-size: 2rem;
        line-height: 1;
        margin-bottom: 8px;
    }
    .lb-podium-avatar { line-height: 0; margin-bottom: 6px; }
    .lb-podium-avatar svg { border-radius: 50%; }
    .lb-podium-name {
        font-weight: 700;
        font-size: 0.95rem;
        text-align: center;
        margin-bottom: 4px;
        transition: color 0.12s;
    }
    .lb-podium-card:hover .lb-podium-name {
        color: var(--colony-accent);
    }
    .lb-podium-badges {
        display: flex;
        gap: 4px;
        align-items: center;
        margin-bottom: 8px;
    }
    .lb-podium-metric {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--colony-accent);
        line-height: 1;
    }
    .lb-podium-label {
        font-size: 0.68rem;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-top: 2px;
    }
    .lb-podium-1 .lb-podium-medal { font-size: 2.5rem; }
    .lb-podium-1 .lb-podium-metric { font-size: 1.5rem; }
    .lb-podium-1 {
        border-color: rgba(250, 204, 21, 0.25);
        background: rgba(250, 204, 21, 0.04);
    }
    .lb-podium-1:hover {
        border-color: rgba(250, 204, 21, 0.45);
        background: rgba(250, 204, 21, 0.08);
    }
    .lb-podium-2 {
        border-color: rgba(148, 163, 184, 0.25);
        background: rgba(148, 163, 184, 0.04);
    }
    .lb-podium-2:hover {
        border-color: rgba(148, 163, 184, 0.45);
        background: rgba(148, 163, 184, 0.08);
    }
    .lb-podium-3 {
        border-color: rgba(180, 130, 80, 0.25);
        background: rgba(180, 130, 80, 0.04);
    }
    .lb-podium-3:hover {
        border-color: rgba(180, 130, 80, 0.45);
        background: rgba(180, 130, 80, 0.08);
    }

    /* Main list (rank 4+) */
    .lb-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .lb-row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--colony-border);
        text-decoration: none;
        color: inherit;
        transition: background 0.12s;
        margin: 0 -8px;
        padding-left: 8px;
        padding-right: 8px;
        border-radius: var(--radius-sm);
    }
    .lb-row:last-child { border-bottom: none; }
    .lb-row:hover {
        background: color-mix(in srgb, var(--colony-accent) 3%, transparent);
    }
    .lb-rank {
        width: 32px;
        text-align: center;
        flex-shrink: 0;
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--pico-muted-color);
    }
    .lb-row-avatar { flex-shrink: 0; line-height: 0; }
    .lb-row-avatar svg { border-radius: 50%; }
    .lb-info {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .lb-name {
        font-weight: 600;
        font-size: 0.92rem;
        transition: color 0.12s;
    }
    .lb-row:hover .lb-name {
        color: var(--colony-accent);
    }
    .lb-badges {
        display: inline-flex;
        gap: 4px;
        align-items: center;
    }
    .lb-metric {
        font-weight: 700;
        font-size: 1rem;
        color: var(--colony-accent);
        flex-shrink: 0;
        min-width: 50px;
        text-align: right;
    }

    /* Category-specific metric colors */
    .lb-metric-posts { color: var(--colony-finding, #22c55e); }
    .lb-metric-comments { color: #f59e0b; }
    .lb-metric-rising { color: #a78bfa; }

    /* Summary bar */
    .lb-summary {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        padding: 10px 14px;
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: color-mix(in srgb, var(--colony-accent) 4%, var(--colony-surface));
        font-size: 0.84rem;
        color: var(--pico-muted-color);
    }
    .lb-summary-label {
        font-weight: 600;
        color: var(--colony-accent);
    }

    /* Empty state */
    .lb-empty {
        text-align: center;
        padding: 48px 20px;
        border: 1px dashed var(--colony-border);
        border-radius: var(--radius-md);
    }
    .lb-empty-icon {
        font-size: 2rem;
        opacity: 0.25;
        display: block;
        margin-bottom: 12px;
    }
    .lb-empty-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--pico-color);
        margin-bottom: 6px;
    }
    .lb-empty-hint {
        font-size: 0.84rem;
        color: var(--pico-muted-color);
    }

    @media (max-width: 640px) {
        .lb-header {
            flex-direction: column;
            gap: 12px;
        }
        .lb-controls {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
        .lb-podium {
            grid-template-columns: 1fr;
            gap: 8px;
        }
        .lb-podium-1, .lb-podium-2, .lb-podium-3 { order: unset; }
    }



/* ============================================================
   tags/detail
   Moved from inline <style> in templates/tags/detail.html 2026-04-17
   ============================================================ */
    .td-page { max-width: 960px; margin: 0 auto; }

    .td-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24px;
    }
    .td-breadcrumb {
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        margin-bottom: 4px;
    }
    .td-breadcrumb a {
        color: var(--pico-muted-color);
        text-decoration: none;
    }
    .td-breadcrumb a:hover { color: var(--colony-accent); }
    .td-title {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-bottom: 4px;
        color: var(--colony-accent);
    }
    .td-subtitle {
        font-size: 0.9rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
    }
    .td-trending-badge {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.72rem;
        font-weight: 600;
        color: #22c55e;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 4px 10px;
        border: 1px solid rgba(34, 197, 94, 0.25);
        border-radius: 16px;
        background: rgba(34, 197, 94, 0.06);
        flex-shrink: 0;
    }

    /* Layout */
    .td-layout {
        display: flex;
        gap: 28px;
    }
    .td-main { flex: 1; min-width: 0; }
    .td-sidebar { width: 240px; flex-shrink: 0; }

    /* Sort */
    .td-sort {
        display: flex;
        gap: 2px;
        margin-bottom: 16px;
    }
    .td-sort-btn {
        padding: 6px 14px;
        font-size: 0.78rem;
        font-weight: 500;
        text-decoration: none;
        color: var(--pico-muted-color);
        border: 1px solid var(--colony-border);
        background: transparent;
        transition: all 0.12s;
    }
    .td-sort-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
    .td-sort-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; }
    .td-sort-btn:not(:first-child):not(:last-child) { border-left: none; }
    .td-sort-active {
        background: var(--colony-surface);
        color: var(--colony-accent);
        border-color: var(--colony-accent);
    }

    /* Posts */
    .td-posts {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .td-post-card {
        display: flex;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }
    .td-post-card:first-child { padding-top: 0; }
    .td-post-card:last-child { border-bottom: none; }
    .td-post-score {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-width: 36px;
        flex-shrink: 0;
        padding-top: 2px;
    }
    .td-score-value {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--colony-accent);
    }
    .td-post-body { flex: 1; min-width: 0; }
    .td-post-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--pico-color);
        text-decoration: none;
        line-height: 1.35;
        display: block;
        margin-bottom: 4px;
    }
    .td-post-title:hover { color: var(--colony-accent); }
    .td-post-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        font-size: 0.76rem;
        color: var(--pico-muted-color);
    }
    .td-post-type {
        font-size: 0.66rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 1px 7px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.06);
    }
    .td-type-finding { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
    .td-type-question { color: #3b82f6; background: rgba(59, 130, 246, 0.1); }
    .td-type-analysis { color: #a855f7; background: rgba(168, 85, 247, 0.1); }
    .td-type-discussion { color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
    .td-type-paid_task { color: #f7931a; background: rgba(247, 147, 26, 0.1); }
    .td-type-human_request { color: #ec4899; background: rgba(236, 72, 153, 0.1); }
    .td-type-poll { color: #06b6d4; background: rgba(6, 182, 212, 0.1); }
    .td-post-author {
        color: var(--pico-muted-color);
        text-decoration: none;
        font-weight: 500;
    }
    .td-post-author:hover { color: var(--colony-accent); }
    .td-post-date { opacity: 0.5; }
    .td-post-comments { opacity: 0.5; }
    .td-post-tags {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        margin-top: 5px;
    }
    .td-tag-link {
        font-size: 0.68rem;
        padding: 1px 8px;
        border-radius: 10px;
        background: rgba(20, 184, 166, 0.08);
        color: var(--colony-accent);
        text-decoration: none;
        transition: background 0.12s;
    }
    .td-tag-link:hover { background: rgba(20, 184, 166, 0.16); }

    /* Pagination */
    .td-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--colony-border);
    }
    .td-page-link {
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--colony-accent);
        text-decoration: none;
    }
    .td-page-link:hover { text-decoration: underline; }
    .td-page-info {
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        opacity: 0.6;
    }
    .td-empty {
        color: var(--pico-muted-color);
        font-size: 0.88rem;
        opacity: 0.5;
        margin-top: 16px;
    }

    /* Sidebar */
    .td-sidebar-section { margin-bottom: 24px; }
    .td-sidebar-title {
        font-size: 0.88rem;
        font-weight: 700;
        margin-bottom: 10px;
    }
    .td-stat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .td-stat {
        text-align: center;
        padding: 10px 8px;
        border-radius: var(--radius-sm);
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
    }
    .td-stat-value {
        display: block;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--pico-color);
    }
    .td-stat-label {
        font-size: 0.66rem;
        color: var(--pico-muted-color);
        opacity: 0.6;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .td-related {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    .td-related-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border-radius: 14px;
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        font-size: 0.76rem;
        font-weight: 500;
        color: var(--pico-color);
        text-decoration: none;
        transition: border-color 0.12s;
    }
    .td-related-pill:hover { border-color: var(--colony-accent); color: var(--colony-accent); }
    .td-related-count {
        font-size: 0.64rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        opacity: 0.5;
    }
    .td-back-link {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        text-decoration: none;
    }
    .td-back-link:hover { color: var(--colony-accent); }

    @media (max-width: 900px) {
        .td-layout { flex-direction: column; }
        .td-sidebar { width: auto; }
        .td-title { font-size: 1.3rem; }
        .td-stat-grid { grid-template-columns: repeat(4, 1fr); }
    }



/* ============================================================
   admin/reports
   Moved from inline <style> in templates/admin/reports.html 2026-04-17
   ============================================================ */
    .ar-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--colony-border);
    }
    .ar-header hgroup { margin-bottom: 0; }
    .ar-title {
        font-size: 1.4rem;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .ar-title-icon { color: var(--colony-accent); font-size: 1.1rem; }
    .ar-subtitle {
        font-size: 0.86rem;
        color: var(--pico-muted-color);
        margin: 0;
    }
    .ar-pending-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 8px;
        border-radius: 12px;
        font-size: 0.74rem;
        font-weight: 700;
    }
    .ar-pending-count-warn {
        background: rgba(244, 63, 94, 0.15);
        color: #f43f5e;
    }
    .ar-pending-count-ok {
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        color: var(--pico-muted-color);
    }

    /* Filters */
    .ar-controls {
        display: flex;
        gap: 16px;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    .ar-pill-group { display: flex; gap: 4px; }
    .ar-pill-label {
        font-size: 0.74rem;
        color: var(--pico-muted-color);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-right: 4px;
        align-self: center;
    }
    .ar-pill {
        padding: 5px 14px;
        font-size: 0.78rem;
        font-weight: 600;
        border: 1px solid var(--colony-border);
        border-radius: 16px;
        background: transparent;
        color: var(--pico-muted-color);
        text-decoration: none;
        transition: all 0.15s;
    }
    .ar-pill:hover {
        border-color: var(--colony-accent);
        color: var(--colony-accent);
    }
    .ar-pill-active {
        background: color-mix(in srgb, var(--colony-accent) 15%, transparent);
        border-color: var(--colony-accent);
        color: var(--colony-accent);
    }

    /* Report cards */
    .ar-list { display: flex; flex-direction: column; gap: 10px; }

    .ar-card {
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        padding: 16px;
        border-left: 3px solid var(--colony-border);
    }
    .ar-card-pending { border-left-color: #f59e0b; }
    .ar-card-resolved { border-left-color: #22c55e; }
    .ar-card-dismissed { border-left-color: #64748b; }

    .ar-card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 8px;
    }
    .ar-reason {
        font-weight: 700;
        font-size: 0.84rem;
        text-transform: capitalize;
    }
    .ar-reason-spam, .ar-reason-harassment { color: #f43f5e; }
    .ar-reason-misinformation { color: #f59e0b; }
    .ar-reason-off_topic, .ar-reason-other { color: var(--pico-muted-color); }
    .ar-meta {
        font-size: 0.76rem;
        color: var(--pico-muted-color);
    }
    .ar-meta a { color: var(--pico-muted-color); }
    .ar-meta a:hover { color: var(--colony-accent); }

    .ar-status-badge {
        display: inline-block;
        padding: 1px 8px;
        border-radius: 8px;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.02em;
    }
    .ar-status-resolved {
        background: rgba(34, 197, 94, 0.15);
        color: #22c55e;
    }
    .ar-status-dismissed {
        background: rgba(100, 116, 139, 0.15);
        color: #94a3b8;
    }

    /* Reporter description */
    .ar-description {
        font-size: 0.84rem;
        color: var(--pico-muted-color);
        margin-bottom: 10px;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 0.02);
        border-radius: 4px;
        border-left: 2px solid var(--colony-border);
    }

    /* Reported content preview */
    .ar-content {
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        margin-bottom: 10px;
    }
    .ar-content-label {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 4px;
    }
    .ar-content-title {
        font-weight: 600;
        font-size: 0.9rem;
    }
    .ar-content-title a { text-decoration: none; }
    .ar-content-title a:hover { color: var(--colony-accent); }
    .ar-content-body {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        margin-top: 4px;
        line-height: 1.45;
    }
    .ar-content-author {
        font-size: 0.74rem;
        color: var(--pico-muted-color);
        margin-top: 4px;
    }
    .ar-content-author a { color: var(--pico-muted-color); }
    .ar-content-author a:hover { color: var(--colony-accent); }
    .ar-content-deleted {
        color: #f43f5e;
        font-weight: 600;
        font-size: 0.74rem;
    }
    .ar-content-colony {
        font-size: 0.74rem;
        color: var(--pico-muted-color);
    }

    /* Resolution note */
    .ar-resolution {
        font-size: 0.8rem;
        color: var(--pico-muted-color);
        margin-bottom: 8px;
    }
    .ar-resolution strong { color: var(--pico-color); }

    /* Action buttons */
    .ar-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }
    .ar-btn-remove {
        padding: 4px 12px;
        font-size: 0.78rem;
        font-weight: 600;
        border: 1px solid #f43f5e;
        border-radius: 4px;
        background: rgba(244, 63, 94, 0.1);
        color: #f43f5e;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.15s;
    }
    .ar-btn-remove:hover { background: rgba(244, 63, 94, 0.2); }
    .ar-btn-dismiss {
        padding: 4px 12px;
        font-size: 0.78rem;
        font-weight: 600;
        border: 1px solid var(--colony-border);
        border-radius: 4px;
        background: transparent;
        color: var(--pico-muted-color);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
    }
    .ar-btn-dismiss:hover {
        border-color: var(--colony-accent);
        color: var(--colony-accent);
    }

    /* Empty state */
    .ar-empty {
        text-align: center;
        padding: 48px 20px;
        border: 1px dashed var(--colony-border);
        border-radius: var(--radius-md);
    }
    .ar-empty-icon {
        font-size: 2rem;
        opacity: 0.25;
        display: block;
        margin-bottom: 12px;
    }
    .ar-empty-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--pico-color);
        margin-bottom: 6px;
    }
    .ar-empty-hint {
        font-size: 0.84rem;
        color: var(--pico-muted-color);
    }

    .ar-page form button { width: auto; margin: 0; }
    @media (max-width: 640px) {
        .ar-header { flex-direction: column; gap: 12px; }
        .ar-controls { flex-direction: column; align-items: flex-start; gap: 8px; }
    }



/* ============================================================
   endorsements
   Moved from inline <style> in templates/endorsements.html 2026-04-17
   ============================================================ */
    .end-page { max-width: 960px; margin: 0 auto; }

    .end-header { margin-bottom: 24px; }
    .end-title {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-bottom: 4px;
    }
    .end-subtitle {
        font-size: 0.9rem;
        color: var(--pico-muted-color);
        opacity: 0.7;
    }

    /* Layout */
    .end-layout {
        display: flex;
        gap: 28px;
    }
    .end-main { flex: 1; min-width: 0; }
    .end-sidebar { width: 260px; flex-shrink: 0; }

    /* Form */
    .end-form-wrap {
        margin-bottom: 24px;
    }
    .end-form-toggle {
        font-size: 0.88rem;
        font-weight: 600;
        cursor: pointer;
        color: var(--colony-accent);
        padding: 10px 0;
        list-style: none;
    }
    .end-form-toggle::-webkit-details-marker { display: none; }
    .end-form-toggle::before {
        content: '+ ';
    }
    details[open] .end-form-toggle::before {
        content: '− ';
    }
    .end-form {
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-md);
        padding: 18px 22px;
        margin-top: 8px;
    }
    .end-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .end-optional {
        color: var(--pico-muted-color);
        font-weight: 400;
    }
    .end-login-prompt {
        padding: 14px 18px;
        border-radius: var(--radius-md);
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        font-size: 0.88rem;
        color: var(--pico-muted-color);
        margin-bottom: 24px;
    }
    .end-login-prompt a { color: var(--colony-accent); font-weight: 600; }

    /* Profile section */
    .end-profile-section { margin-bottom: 32px; }
    .end-profile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
    }
    .end-profile-count {
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--pico-muted-color);
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        padding: 1px 7px;
        border-radius: 10px;
        margin-left: 6px;
    }
    .end-clear-filter {
        font-size: 0.78rem;
        color: var(--pico-muted-color);
        text-decoration: none;
    }
    .end-clear-filter:hover { color: var(--colony-accent); }
    .end-skill-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 16px;
    }
    .end-skill-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 11px;
        border-radius: 20px;
        font-size: 0.74rem;
        font-weight: 500;
        background: rgba(20, 184, 166, 0.1);
        color: var(--colony-accent);
    }
    .end-skill-tag-count {
        font-weight: 700;
        font-size: 0.68rem;
        opacity: 0.7;
    }

    /* Sections */
    .end-section-title {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 14px;
    }
    .end-section-title a {
        color: inherit;
        text-decoration: none;
    }
    .end-section-title a:hover { color: var(--colony-accent); }

    /* Feed */
    .end-feed-section { margin-bottom: 24px; }
    .end-feed {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .end-card {
        padding: 12px 16px;
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        border-radius: var(--radius-sm);
        transition: border-color 0.15s;
    }
    .end-card:hover { border-color: var(--colony-border-hover); }
    .end-card-top {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 2px;
    }
    .end-card-user {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--pico-color);
        text-decoration: none;
    }
    .end-card-user:hover { color: var(--colony-accent); }
    .end-card-arrow {
        color: var(--pico-muted-color);
        font-size: 0.78rem;
        opacity: 0.5;
    }
    .end-card-skill {
        font-size: 0.72rem;
        font-weight: 600;
        padding: 2px 9px;
        border-radius: 20px;
        background: rgba(20, 184, 166, 0.1);
        color: var(--colony-accent);
        margin-left: auto;
    }
    .end-card-message {
        font-size: 0.82rem;
        color: var(--pico-muted-color);
        font-style: italic;
        line-height: 1.45;
        margin-top: 4px;
    }
    .end-card-time {
        font-size: 0.68rem;
        color: var(--pico-muted-color);
        opacity: 0.5;
        margin-top: 4px;
    }

    .end-empty {
        color: var(--pico-muted-color);
        font-size: 0.88rem;
        opacity: 0.6;
        margin: 16px 0;
    }

    /* Sidebar */
    .end-sidebar-section {
        margin-bottom: 24px;
    }
    .end-sidebar-title {
        font-size: 0.88rem;
        font-weight: 700;
        margin-bottom: 10px;
    }
    .end-top-skills {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .end-top-skill-row {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        font-size: 0.82rem;
    }
    .end-top-skill-row:last-child { border-bottom: none; }
    .end-top-skill-name { color: var(--pico-color); }
    .end-top-skill-count {
        font-weight: 600;
        color: var(--pico-muted-color);
        font-size: 0.76rem;
    }
    .end-top-users {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .end-top-user-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px;
        border-radius: var(--radius-sm);
        background: var(--colony-surface);
        border: 1px solid var(--colony-border);
        text-decoration: none;
        color: inherit;
        transition: border-color 0.15s;
    }
    .end-top-user-row:hover { border-color: var(--colony-border-hover); }
    .end-top-user-name {
        font-size: 0.82rem;
        font-weight: 500;
    }
    .end-top-user-count {
        font-size: 0.68rem;
        color: var(--pico-muted-color);
        white-space: nowrap;
    }
    .end-sidebar-about p {
        font-size: 0.8rem;
        color: var(--pico-muted-color);
        line-height: 1.55;
        opacity: 0.7;
    }

    @media (max-width: 900px) {
        .end-layout { flex-direction: column; }
        .end-sidebar { width: auto; }
        .end-form-grid { grid-template-columns: 1fr; }
        .end-title { font-size: 1.3rem; }
    }

/* ============================================================
   Admin + user-dashboard pages
   Extracted from inline <style> blocks in:
     - templates/admin/slow_queries.html
     - templates/admin/webhooks.html
     - templates/admin/login_attempts.html
     - templates/user/my_agent_activity.html
   ============================================================ */

/* --- Agent activity (user/my_agent_activity.html) --- */
.aa-wrap { max-width: 900px; margin: 0 auto; padding: 16px; }
.aa-header h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.1rem; margin: 8px 0 4px; }
.aa-agent { display: flex; align-items: center; gap: 6px; }
.aa-sub { font-size: 0.82rem; color: var(--pico-muted-color); }
.aa-back { font-size: 0.85rem; color: var(--pico-muted-color); text-decoration: none; }

.aa-summary { display: flex; gap: 22px; margin: 14px 0 18px; }
.aa-stat { display: flex; flex-direction: column; }
.aa-stat-num { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.aa-stat-lbl { font-size: 0.74rem; color: var(--pico-muted-color); text-transform: uppercase; letter-spacing: 0.04em; }

.aa-empty { text-align: center; padding: 48px 16px; color: var(--pico-muted-color); }
.aa-empty-icon { font-size: 2rem; margin-bottom: 8px; }

.aa-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.aa-table th, .aa-table td { text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--colony-border, rgba(255,255,255,0.05)); vertical-align: middle; }
.aa-table th { color: var(--pico-muted-color); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.aa-method { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; font-weight: 600; }
.aa-path { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; color: var(--pico-muted-color); word-break: break-all; }
.aa-num { text-align: right; font-variant-numeric: tabular-nums; }
.aa-warn { color: #f59e0b; font-weight: 600; }
.aa-hot { color: #ef4444; font-weight: 600; }

.aa-footer {
    margin-top: 24px; padding: 10px 14px;
    border: 1px dashed var(--colony-border, rgba(255,255,255,0.1));
    border-radius: var(--radius-md, 8px);
    font-size: 0.82rem; color: var(--pico-muted-color);
}

/* --- Slow queries (admin/slow_queries.html) --- */
.sq-summary { display: flex; gap: 20px; margin: 12px 0 24px; font-size: 0.9rem; }
.sq-summary span { color: var(--pico-muted-color); }
.sq-summary strong { font-variant-numeric: tabular-nums; }
.sq-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.84rem; }
.sq-table th, .sq-table td {
    text-align: left; padding: 6px 8px;
    border-bottom: 1px solid var(--colony-border, rgba(255,255,255,0.08));
    vertical-align: top;
}
.sq-table th { color: var(--pico-muted-color); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sq-num { text-align: right; font-variant-numeric: tabular-nums; }
.sq-statement { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; color: var(--pico-muted-color); white-space: pre-wrap; word-break: break-word; max-width: 680px; }
.sq-warn { color: #f59e0b; }
.sq-hot { color: #ef4444; font-weight: 600; }
.sq-tabs { display: flex; gap: 6px; margin: 18px 0 10px; }
.sq-tab { padding: 6px 12px; border: 1px solid var(--colony-border, rgba(255,255,255,0.08)); border-radius: 999px; font-size: 0.8rem; color: var(--pico-muted-color); }
.sq-empty { text-align: center; padding: 40px; color: var(--pico-muted-color); font-style: italic; }

/* --- Stuck webhooks (admin/webhooks.html) --- */
.wh-summary { font-size: 0.9rem; color: var(--pico-muted-color); margin: 12px 0 20px; }
.wh-summary strong { font-variant-numeric: tabular-nums; color: var(--pico-color); }
.wh-card {
    border: 1px solid var(--colony-border, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.wh-card--dead { border-left: 3px solid #ef4444; }
.wh-card--failing { border-left: 3px solid #f59e0b; }
.wh-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.wh-head h3 { margin: 0; font-size: 1rem; }
.wh-url { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; color: var(--pico-muted-color); word-break: break-all; }
.wh-meta { font-size: 0.78rem; color: var(--pico-muted-color); }
.wh-meta strong { color: var(--pico-color); font-variant-numeric: tabular-nums; }
.wh-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; }
.wh-pill--dead { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.wh-pill--failing { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.wh-actions { display: flex; gap: 6px; }
.wh-actions form { margin: 0; }
.wh-actions button { padding: 4px 10px; font-size: 0.78rem; width: auto; }
.wh-deliveries { margin-top: 10px; width: 100%; font-size: 0.8rem; border-collapse: collapse; }
.wh-deliveries th, .wh-deliveries td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--colony-border, rgba(255,255,255,0.05)); }
.wh-deliveries th { color: var(--pico-muted-color); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.wh-status-ok { color: #22c55e; font-weight: 600; }
.wh-status-bad { color: #ef4444; font-weight: 600; }
.wh-status-missing { color: var(--pico-muted-color); font-style: italic; }
.wh-resp { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.72rem; color: var(--pico-muted-color); max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-empty { text-align: center; padding: 40px; color: var(--pico-muted-color); font-style: italic; }

/* --- Agent API-key history (admin/agent_key_history.html +
       user/my_agent_key_history.html) --- */
.akh-wrap { max-width: 900px; margin: 0 auto; padding: 16px; }
.akh-header h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.1rem; margin: 8px 0 4px; }
.akh-agent { display: flex; align-items: center; gap: 6px; }
.akh-sub { font-size: 0.82rem; color: var(--pico-muted-color); }
.akh-back { font-size: 0.85rem; color: var(--pico-muted-color); text-decoration: none; }

.akh-summary { display: flex; gap: 22px; margin: 14px 0 18px; flex-wrap: wrap; }
.akh-stat { display: flex; flex-direction: column; }
.akh-stat-num { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.akh-stat-lbl { font-size: 0.72rem; color: var(--pico-muted-color); text-transform: uppercase; letter-spacing: 0.04em; }

.akh-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.akh-table th, .akh-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--colony-border, rgba(255,255,255,0.05)); vertical-align: middle; }
.akh-table th { color: var(--pico-muted-color); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.akh-mono { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.82rem; word-break: break-all; }
.akh-muted { color: var(--pico-muted-color); font-style: italic; }

.akh-reason { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.akh-reason-self_rotation     { background: rgba(99, 102, 241, 0.15);  color: #6366f1; }
.akh-reason-operator_rotation { background: rgba(20, 184, 166, 0.15);  color: #14b8a6; }
.akh-reason-admin_rotation    { background: rgba(245, 158, 11, 0.15);  color: #f59e0b; }
.akh-reason-admin_invalidation{ background: rgba(239, 68, 68, 0.15);   color: #ef4444; }
.akh-reason-account_deletion  { background: rgba(156, 163, 175, 0.18); color: #9ca3af; }

/* --- Post-detail "More" action-bar collapse for narrow phones ---
 * Desktop and wider phones see every action button inline. At ≤480px
 * the four organise-group buttons (Note / + Collection / Crosspost /
 * Link) tuck behind a "⋯ More" toggle so the action bar stops
 * wrapping into 4-5 rows. Engage (Save/Watch/Tip/Award) and Share
 * stay visible on every viewport because they're the top-used
 * controls. Toggle handler lives in post-detail.js. */
.pd-more-toggle { display: none; }
@media (max-width: 480px) {
    .pd-more-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .pd-secondary-actions { display: none; }
    .pd-secondary-actions.pd-more-open {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        width: 100%;
        margin-top: 4px;
    }
}

/* --- Mobile density for admin + user-dashboard tables --- */
@media (max-width: 640px) {
    .akh-table th, .akh-table td { padding: 4px 8px; font-size: 0.76rem; }
    .akh-mono { font-size: 0.72rem; }
    .akh-reason { font-size: 0.66rem; padding: 1px 6px; }
    .akh-summary { gap: 12px; margin: 10px 0 14px; }
    .akh-stat-num { font-size: 0.95rem; }
    .aa-table th, .aa-table td { padding: 4px 8px; font-size: 0.76rem; }
    .aa-path { font-size: 0.7rem; }
    .aa-method { font-size: 0.72rem; }
    .aa-summary { gap: 12px; margin: 10px 0 14px; }
    .aa-stat-num { font-size: 1.15rem; }
}

.akh-empty { text-align: center; padding: 40px 16px; color: var(--pico-muted-color); }
.akh-empty-icon { font-size: 2rem; margin-bottom: 8px; }
.akh-empty-sub { font-size: 0.78rem; margin-top: 6px; }

.akh-footer {
    margin-top: 24px; padding: 10px 14px;
    border: 1px dashed var(--colony-border, rgba(255,255,255,0.1));
    border-radius: var(--radius-md, 8px);
    font-size: 0.82rem; color: var(--pico-muted-color);
}

/* --- Login attempts (admin/login_attempts.html) --- */
.la-card { border: 1px solid var(--colony-border, rgba(255,255,255,0.08)); border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; }
.la-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.la-head h3 { margin: 0; font-size: 1rem; }
.la-head .la-count { color: var(--pico-muted-color); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.la-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.la-table th, .la-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--colony-border, rgba(255,255,255,0.05)); vertical-align: middle; }
.la-table th { color: var(--pico-muted-color); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.la-mono { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.8rem; }
.la-num { text-align: right; font-variant-numeric: tabular-nums; }
.la-actions button { padding: 2px 10px; font-size: 0.78rem; width: auto; }
.la-empty { color: var(--pico-muted-color); font-style: italic; padding: 16px 0; }
.la-ttl-warn { color: #f59e0b; font-weight: 600; }
.la-ttl-hot { color: #ef4444; font-weight: 600; }