/* ============================================================
   Stack Commander — Mission Control
   ------------------------------------------------------------
   Astronomy & astrophotography social network.

   Design direction: a field notebook from tomorrow's observatory.
   Deep navy night-sky surfaces, layered accent halos borrowed
   from the hero's radial-gradient vocabulary, an editorial serif
   (Fraunces) used for marquee moments paired with a refined
   geometric sans (Geist) for everything else and a clean
   monospace (Geist Mono) for any number, timestamp, or
   coordinate. The primary accent is a cool sky-blue (a B-type
   main sequence colour); a warm Carina coral appears sparingly
   as a secondary accent, and a violet for plate-solve states.

   Class names are stable: this stylesheet restyles existing
   markup, not refactors it.
   ============================================================ */

/* ---------- Design tokens ------------------------------------ */
:root {
    /* Surfaces — slightly cooler than before to bring out the
       night-sky undertone. */
    --sc-bg:            #0a0d14;
    --sc-bg-elev:       #10141d;
    --sc-surface:       #161b27;
    --sc-surface-2:     #1d2331;
    --sc-border:        #252b3a;
    --sc-border-strong: #313a50;

    /* Foreground */
    --sc-fg:        #e8ecf3;
    --sc-fg-dim:    #8893a8;
    --sc-fg-muted:  #566174;

    /* Accents */
    --sc-accent:            #5cb0ff;   /* cool sky blue, primary */
    --sc-accent-hover:      #82c4ff;
    --sc-accent-deep:       #3b8fdf;
    --sc-accent-warm:       #ff9568;   /* Carina coral, secondary */
    --sc-accent-warm-hover: #ffaf8a;
    --sc-accent-violet:     #9c7fff;   /* plate-solve / annotation */

    --sc-danger:    #ff7a7a;
    --sc-success:   #6cd49f;

    /* Glow tokens — used in layered box-shadows */
    --sc-glow-blue:      rgba( 92, 176, 255, .22);
    --sc-glow-blue-soft: rgba( 92, 176, 255, .10);
    --sc-glow-warm:      rgba(255, 149, 104, .22);
    --sc-glow-violet:    rgba(156, 127, 255, .22);

    /* Spacing */
    --sc-s-1: .25rem; --sc-s-2: .5rem;  --sc-s-3: .75rem;
    --sc-s-4: 1rem;   --sc-s-5: 1.5rem; --sc-s-6: 2rem;
    --sc-s-7: 3rem;   --sc-s-8: 4.5rem;

    /* Radii */
    --sc-r-sm: 6px; --sc-r-md: 10px; --sc-r-lg: 14px;
    --sc-r-xl: 20px; --sc-r-pill: 999px;

    /* Easing */
    --sc-ease:     cubic-bezier(.4, 0, .2, 1);
    --sc-ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Type */
    --sc-font-sans:    'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sc-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --sc-font-mono:    'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* ---------- Generic page headings (Privacy, Settings, etc.) -- */
.container > h1,
main > .container > h1 {
    font-family: var(--sc-font-display);
    font-size: clamp(1.9rem, 3.4vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-top: var(--sc-s-5);
    margin-bottom: var(--sc-s-3);
    color: var(--sc-fg);
    font-variation-settings: 'opsz' 100, 'SOFT' 50;
}
.container > h2 {
    font-family: var(--sc-font-display);
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--sc-fg);
    margin-top: var(--sc-s-5);
}

/* ---------- Bootstrap .card skin (used by Features page) ----- */
.card {
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    border: 1px solid var(--sc-border);
    color: var(--sc-fg);
    border-radius: var(--sc-r-lg);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.card-title {
    font-family: var(--sc-font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--sc-fg);
    letter-spacing: -.015em;
    margin-bottom: .55rem;
}
.card-text { color: var(--sc-fg-dim); line-height: 1.65; font-size: .95rem; }
.card-body { padding: 1.25rem 1.4rem; }

/* ---------- Base reset / typography -------------------------- */
html, body {
    background: var(--sc-bg);
    color: var(--sc-fg);
    font-family: var(--sc-font-sans);
    font-size: 15.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    margin-bottom: 60px;
    min-height: 100vh;
    position: relative;
    overflow-x: clip;
}

/* Fixed atmospheric backdrop: faint accent radial bleeds at the
   top of the viewport, like the residual glow of a distant city
   under a horizon. Doesn't move on scroll. */
body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1400px 700px at 18% -12%, rgba(92,176,255,.08), transparent 60%),
        radial-gradient( 900px 500px at 105%  4%, rgba(156,127,255,.06), transparent 60%),
        radial-gradient( 700px 400px at 50% 110%, rgba(255,149,104,.03), transparent 70%);
    z-index: -1;
}

a {
    color: var(--sc-accent);
    text-decoration: none;
    transition: color .15s var(--sc-ease);
}
a:hover { color: var(--sc-accent-hover); text-decoration: underline; }

::selection { background: rgba(92, 176, 255, .35); color: #fff; }

/* Tracked-uppercase eyebrow / section title. The original
   class name (.sc-profile-section-title) is kept for backwards
   compatibility. */
.sc-eyebrow,
.sc-profile-section-title {
    font-family: var(--sc-font-sans);
    color: var(--sc-fg-dim);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    font-weight: 600;
    margin: var(--sc-s-2) 0 var(--sc-s-3);
}

/* Hairline divider that fades at the ends — the "horizon"
   motif used as a section break. */
.sc-horizon {
    height: 1px; border: 0;
    margin: var(--sc-s-5) 0;
    background: linear-gradient(90deg,
        transparent,
        var(--sc-border) 12%,
        var(--sc-border-strong) 50%,
        var(--sc-border) 88%,
        transparent);
}

/* ============================================================
   Navbar — atmospheric, blurred over the page backdrop.
   The brand wordmark uses the editorial serif so the rest of
   the chrome can stay quiet around it.
   ============================================================ */
.sc-navbar {
    background: rgba(10, 13, 20, .78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--sc-border);
    padding: .55rem 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.sc-navbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(92, 176, 255, .35) 50%, transparent);
    opacity: .4;
    pointer-events: none;
}

.sc-navbar .navbar-brand {
    font-family: var(--sc-font-display);
    color: var(--sc-fg) !important;
    font-weight: 600;
    font-size: 1.28rem;
    letter-spacing: -.015em;
    font-variation-settings: 'opsz' 36, 'SOFT' 30;
    line-height: 1;
}
.sc-navbar .navbar-brand:hover { color: var(--sc-fg) !important; }
.sc-navbar .navbar-brand img { border-radius: 5px; }

.sc-navbar .nav-link {
    color: var(--sc-fg-dim) !important;
    font-weight: 500;
    font-size: .92rem;
    padding: .55rem .85rem !important;
    position: relative;
    transition: color .15s var(--sc-ease);
}
.sc-navbar .nav-link:hover,
.sc-navbar .nav-link.active { color: var(--sc-fg) !important; }

/* Tiny indicator dot under the active link. Hover hints at it
   so the navigation feels alive without animating colour shifts. */
.sc-navbar .nav-link::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 2px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--sc-accent);
    transform: translate(-50%, 6px);
    opacity: 0;
    transition: transform .22s var(--sc-ease), opacity .18s var(--sc-ease), box-shadow .25s var(--sc-ease);
}
.sc-navbar .nav-link:hover::after { transform: translate(-50%, 0); opacity: .5; }
.sc-navbar .nav-link.active::after {
    transform: translate(-50%, 0);
    opacity: 1;
    box-shadow: 0 0 10px var(--sc-accent), 0 0 4px rgba(92,176,255,.8);
}

.sc-navbar .navbar-toggler { border-color: var(--sc-border); }
.sc-navbar form { margin: 0; display: inline-flex; align-items: center; }

/* ============================================================
   Hero (marketing landing)
   ============================================================ */
.sc-hero {
    background:
        radial-gradient(1200px 500px at 18% -8%,  rgba(92,176,255,.24), transparent 60%),
        radial-gradient( 900px 400px at 112% 8%,  rgba(156,127,255,.18), transparent 60%),
        radial-gradient( 700px 300px at 50% 110%, rgba(255,149,104,.10), transparent 60%),
        linear-gradient(180deg, var(--sc-bg), var(--sc-bg-elev));
    border-bottom: 1px solid var(--sc-border);
    padding: 5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

/* Hand-placed "stars" over the hero — a CSS-only star atlas. */
.sc-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 22%, rgba(255,255,255,.55), transparent 50%),
        radial-gradient(1px 1px at 27% 68%, rgba(255,255,255,.40), transparent 50%),
        radial-gradient(1px 1px at 44% 38%, rgba(255,255,255,.55), transparent 50%),
        radial-gradient(1px 1px at 58% 14%, rgba(255,255,255,.35), transparent 50%),
        radial-gradient(2px 2px at 72% 78%, rgba(255,255,255,.65), transparent 50%),
        radial-gradient(1px 1px at 84% 30%, rgba(255,255,255,.40), transparent 50%),
        radial-gradient(1px 1px at 92% 62%, rgba(255,255,255,.50), transparent 50%),
        radial-gradient(1px 1px at 16% 88%, rgba(255,255,255,.30), transparent 50%);
    pointer-events: none;
    opacity: .9;
}
.sc-hero::after {
    /* A wide grain wash so the gradient bleeds don't read as
       banded posterization on cheaper displays. */
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,.012) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none;
    opacity: .35;
}

.sc-hero > .container { position: relative; z-index: 1; }

.sc-hero h1 {
    font-family: var(--sc-font-display);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.04;
    margin: 0 0 var(--sc-s-3);
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.sc-hero-icon {
    filter: drop-shadow(0 0 20px rgba(92,176,255,.55));
    border-radius: 12px;
}
.sc-hero p.lead {
    color: var(--sc-fg-dim);
    font-size: 1.18rem;
    max-width: 680px;
    line-height: 1.55;
}

/* ============================================================
   Card primitive
   ============================================================ */
.sc-card {
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-lg);
    padding: var(--sc-s-5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 1px 2px rgba(0, 0, 0, .35);
    transition: border-color .18s var(--sc-ease), transform .25s var(--sc-ease);
}
.sc-card:hover { border-color: var(--sc-border-strong); }
.sc-card h4 {
    font-family: var(--sc-font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 .55rem;
    color: var(--sc-fg);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    font-family: var(--sc-font-sans);
    font-weight: 500;
    letter-spacing: 0;
    border-radius: var(--sc-r-md);
    transition:
        background .18s var(--sc-ease),
        border-color .18s var(--sc-ease),
        color .18s var(--sc-ease),
        box-shadow .22s var(--sc-ease),
        transform .15s var(--sc-ease);
}
.btn-lg { padding: .65rem 1.25rem; font-size: 1rem; }
.btn-sm { padding: .3rem .75rem; font-size: .82rem; }

.btn-sc, .btn-sc-primary {
    background: linear-gradient(180deg, var(--sc-accent), var(--sc-accent-deep));
    border: 1px solid var(--sc-accent-deep);
    color: #061320;
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 1px 0 rgba(0, 0, 0, .25),
        0 0 0 0 rgba(92, 176, 255, 0);
}
.btn-sc:hover, .btn-sc-primary:hover {
    background: linear-gradient(180deg, var(--sc-accent-hover), var(--sc-accent));
    border-color: var(--sc-accent-hover);
    color: #061320;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 2px 0 rgba(0, 0, 0, .25),
        0 0 28px var(--sc-glow-blue);
    transform: translateY(-1px);
}
.btn-sc:active, .btn-sc-primary:active { transform: translateY(0); }

.btn-sc-outline {
    background: transparent;
    border: 1px solid var(--sc-border-strong);
    color: var(--sc-fg);
}
.btn-sc-outline:hover {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(92, 176, 255, .5);
    color: var(--sc-fg);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(92, 176, 255, .38);
}

/* ============================================================
   Forms
   ============================================================ */
.form-control, .form-select {
    background: var(--sc-bg-elev);
    color: var(--sc-fg);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-md);
    font-family: var(--sc-font-sans);
    transition:
        border-color .15s var(--sc-ease),
        box-shadow .18s var(--sc-ease),
        background .15s var(--sc-ease);
}
.form-control:focus, .form-select:focus {
    background: var(--sc-bg-elev);
    color: var(--sc-fg);
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 3px rgba(92, 176, 255, .22);
}
.form-control::placeholder { color: var(--sc-fg-dim); }
.form-label {
    color: var(--sc-fg-dim);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.form-check-input:checked {
    background-color: var(--sc-accent);
    border-color: var(--sc-accent);
}

/* ============================================================
   Tables (admin / wiki)
   ============================================================ */
.table { color: var(--sc-fg); }
.table > :not(caption) > * > * {
    background: var(--sc-surface);
    border-bottom-color: var(--sc-border);
}
.table thead th {
    background: var(--sc-bg-elev);
    color: var(--sc-fg-dim);
    border-bottom: 1px solid var(--sc-border);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .76rem;
    font-weight: 600;
}

/* ============================================================
   Wiki / Manual
   ============================================================ */
.wiki-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--sc-s-5);
}
@media (max-width: 768px) { .wiki-layout { grid-template-columns: 1fr; } }

.wiki-nav {
    background: linear-gradient(180deg, var(--sc-bg-elev), var(--sc-bg));
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-lg);
    padding: var(--sc-s-3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    position: sticky;
    top: 5rem;
    align-self: start;
}
.wiki-nav a {
    display: block;
    padding: .4rem .7rem;
    border-radius: var(--sc-r-sm);
    color: var(--sc-fg-dim);
    font-size: .92rem;
}
.wiki-nav a:hover,
.wiki-nav a.active {
    background: var(--sc-surface);
    color: var(--sc-fg);
    text-decoration: none;
}
.wiki-nav a.active {
    box-shadow: inset 3px 0 0 var(--sc-accent);
    padding-left: 1rem;
}

.wiki-content {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-lg);
    padding: var(--sc-s-5) 2rem;
    line-height: 1.7;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.wiki-content h1,
.wiki-content h2,
.wiki-content h3 {
    font-family: var(--sc-font-display);
    color: var(--sc-fg);
    margin-top: 1.75rem;
    letter-spacing: -.012em;
    font-weight: 600;
}
.wiki-content h1 { font-size: 2.1rem; }
.wiki-content h2 { font-size: 1.55rem; }
.wiki-content h3 { font-size: 1.2rem; }
.wiki-content code,
.wiki-content pre {
    font-family: var(--sc-font-mono);
    background: #0a0d16;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-sm);
    font-size: .9rem;
}
.wiki-content pre { padding: .85rem 1.1rem; overflow-x: auto; }
.wiki-content code { padding: .12rem .38rem; }
.wiki-content blockquote {
    border-left: 3px solid var(--sc-accent);
    padding: .25rem 1.1rem;
    color: var(--sc-fg-dim);
    margin: 1.25rem 0;
    font-style: italic;
    background: rgba(92, 176, 255, .04);
    border-radius: 0 var(--sc-r-sm) var(--sc-r-sm) 0;
}
.wiki-content img { max-width: 100%; border-radius: var(--sc-r-md); }

/* ============================================================
   Footer
   ============================================================ */
.sc-footer {
    background: linear-gradient(180deg, transparent, rgba(10, 13, 20, .6));
    border-top: 1px solid var(--sc-border);
    color: var(--sc-fg-muted);
    padding: 1.5rem 0;
    margin-top: var(--sc-s-7);
    font-size: .85rem;
    position: relative;
}
.sc-footer::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -1px; height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--sc-border) 30%, var(--sc-border) 70%, transparent);
}
.sc-footer a { color: var(--sc-fg-dim); }
.sc-footer a:hover { color: var(--sc-fg); text-decoration: none; }

/* ============================================================
   Quill editor (Manual editing)
   ============================================================ */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--sc-border) !important;
    background: var(--sc-bg-elev);
}
.ql-toolbar.ql-snow .ql-stroke { stroke: var(--sc-fg-dim); }
.ql-toolbar.ql-snow .ql-fill { fill: var(--sc-fg-dim); }
.ql-toolbar.ql-snow .ql-picker-label { color: var(--sc-fg-dim); }
.ql-editor {
    background: var(--sc-bg-elev);
    color: var(--sc-fg);
    min-height: 320px;
    font-family: var(--sc-font-sans);
}

/* ============================================================
   Pills (status chips)
   ============================================================ */
.sc-pill {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: var(--sc-r-pill);
    font-size: .74rem;
    background: var(--sc-bg-elev);
    border: 1px solid var(--sc-border);
    color: var(--sc-fg-dim);
    letter-spacing: .04em;
    font-weight: 600;
    text-transform: uppercase;
}
.sc-pill.new        { color: var(--sc-accent);  border-color: rgba( 92, 176, 255, .45); background: rgba( 92, 176, 255, .10); }
.sc-pill.resolved   { color: var(--sc-success); border-color: rgba(108, 212, 159, .45); background: rgba(108, 212, 159, .10); }
.sc-pill.critical   { color: var(--sc-danger);  border-color: rgba(255, 122, 122, .45); background: rgba(255, 122, 122, .10); }
a.sc-pill-solve {
    text-decoration: none;
    color: var(--sc-accent-violet);
    border-color: rgba(156, 127, 255, .42);
    background: rgba(156, 127, 255, .10);
}
a.sc-pill-solve:hover { background: rgba(156, 127, 255, .18); }

.sc-meta { color: var(--sc-fg-dim); font-size: .88rem; }
.sc-meta code {
    font-family: var(--sc-font-mono);
    background: var(--sc-bg-elev);
    padding: .1rem .35rem;
    border-radius: var(--sc-r-sm);
    border: 1px solid var(--sc-border);
    color: var(--sc-fg-dim);
    font-size: .82rem;
}

/* ============================================================
   Social feed shell
   ============================================================ */
.sc-feed {
    max-width: 660px;
    margin: 1.75rem auto;
    padding: 0 1rem;
    position: relative;
}

.sc-composer-signin {
    background: linear-gradient(180deg, var(--sc-bg-elev), var(--sc-bg));
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-lg);
    padding: 1rem 1.2rem;
    color: var(--sc-fg-dim);
    margin-bottom: var(--sc-s-5);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.sc-composer-signin a { font-weight: 600; }

/* ---------- Composer ---------------------------------------- */
.sc-composer {
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-lg);
    margin-bottom: var(--sc-s-5);
    transition: border-color .18s var(--sc-ease), box-shadow .22s var(--sc-ease);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 1px 2px rgba(0, 0, 0, .35);
}
.sc-composer:focus-within {
    border-color: var(--sc-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 0 0 3px rgba(92, 176, 255, .18),
        0 0 28px var(--sc-glow-blue);
}

.sc-composer-bar { padding: 1rem 1.2rem; }
.sc-composer-text {
    width: 100%;
    resize: none;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--sc-fg);
    font-size: 1.02rem;
    line-height: 1.55;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
    font-family: inherit;
}
.sc-composer-text::placeholder { color: var(--sc-fg-dim); }
.sc-composer[data-state="expanded"] .sc-composer-text { min-height: 6rem; }
.sc-composer-expanded { padding: 0 1.2rem 1rem; display: flex; flex-direction: column; gap: .85rem; }

/* Drop zone */
.sc-dropzone {
    position: relative;
    border: 1px dashed var(--sc-border-strong);
    border-radius: var(--sc-r-md);
    background: rgba(255, 255, 255, .015);
    transition: border-color .15s var(--sc-ease), background .15s var(--sc-ease), box-shadow .2s var(--sc-ease);
    cursor: pointer;
    min-height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-dropzone:hover,
.sc-dropzone:focus-visible {
    border-color: var(--sc-accent);
    background: rgba(92, 176, 255, .05);
    outline: none;
}
.sc-dropzone.is-dragging {
    border-color: var(--sc-accent);
    background: rgba(92, 176, 255, .10);
    box-shadow: inset 0 0 32px rgba(92, 176, 255, .12);
}
.sc-dropzone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sc-dropzone-prompt {
    text-align: center;
    color: var(--sc-fg-dim);
    padding: 1.25rem;
    pointer-events: none;
}
.sc-dropzone-prompt svg { color: var(--sc-fg-dim); margin-bottom: .4rem; }
.sc-dropzone-link { color: var(--sc-accent); text-decoration: underline; }
.sc-dropzone:has(.js-thumb-grid:not([hidden])) { padding: .75rem; }
.sc-dropzone:has(.js-thumb-grid:not([hidden])) .sc-dropzone-prompt { display: none; }

/* Thumbnail grid in the composer */
.sc-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .65rem;
    width: 100%;
}
.sc-thumb {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s var(--sc-ease);
}
.sc-thumb:hover { border-color: var(--sc-border-strong); }
.sc-thumb-img { aspect-ratio: 4 / 3; background: var(--sc-bg); object-fit: cover; width: 100%; }
.sc-thumb-caption {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--sc-border);
    background: var(--sc-bg-elev);
    color: var(--sc-fg);
    padding: .4rem .55rem;
    font-size: .82rem;
}
.sc-thumb-caption:focus { outline: none; background: var(--sc-bg); }
.sc-thumb-remove {
    position: absolute; top: .3rem; right: .3rem;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 22px; height: 22px;
    line-height: 1;
    cursor: pointer;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}
.sc-thumb-remove:hover { background: var(--sc-danger); }
.sc-thumb-wrap { position: relative; }
.sc-thumb-solve {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--sc-border);
    background: var(--sc-bg-elev);
    color: var(--sc-fg-dim);
    padding: .4rem .55rem;
    font-size: .68rem;
    cursor: pointer;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    transition: all .15s var(--sc-ease);
}
.sc-thumb-solve:hover { color: var(--sc-fg); background: var(--sc-bg); }
.sc-thumb-solve.is-on {
    background: linear-gradient(180deg, rgba(156, 127, 255, .22), rgba(156, 127, 255, .08));
    color: #f0eaff;
    border-top-color: rgba(156, 127, 255, .55);
    box-shadow: inset 0 0 14px rgba(156, 127, 255, .22);
}

/* Composer footer */
.sc-composer-footer { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.sc-composer-visibility { display: inline-flex; }
.sc-visibility-select { width: auto; min-width: 9.5rem; }
.sc-composer-actions { margin-left: auto; display: inline-flex; gap: .35rem; align-items: center; position: relative; }

/* Composer group selector — sits next to the visibility select. */
.sc-composer-group { display: inline-flex; }
.sc-group-select { width: auto; min-width: 9rem; max-width: 14rem; }

/* ============================================================
   Groups — list page, detail header, card chrome
   ============================================================ */
.sc-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.sc-group-card {
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-lg);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    transition: border-color .18s var(--sc-ease), box-shadow .22s var(--sc-ease);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.sc-group-card:hover {
    border-color: var(--sc-border-strong);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 6px 28px rgba(0, 0, 0, .4),
        0 0 0 1px rgba(92, 176, 255, .08);
}
.sc-group-card-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: inherit;
    text-decoration: none;
}
.sc-group-card-head:hover { text-decoration: none; }
.sc-group-card-identity { display: flex; flex-direction: column; min-width: 0; gap: .15rem; }
.sc-group-card-name {
    font-family: var(--sc-font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--sc-fg);
    margin: 0;
    letter-spacing: -.012em;
}
.sc-group-card-slug { color: var(--sc-fg-dim); font-family: var(--sc-font-mono); font-size: .8rem; }
.sc-group-card-desc {
    color: var(--sc-fg-dim);
    font-size: .9rem;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-group-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    color: var(--sc-fg-dim);
    font-size: .85rem;
    align-items: center;
}
.sc-group-card-meta strong { color: var(--sc-fg); font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }

/* Group icons — rounded squares, distinct from circular user avatars. */
.sc-group-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--sc-r-md);
    object-fit: cover;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    display: inline-block;
}
.sc-group-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-fg);
    font-weight: 700;
    font-family: var(--sc-font-display);
    font-size: 1.2rem;
    background: linear-gradient(135deg, #2a3548, #3d4d6b);
}
.sc-group-icon-lg { width: 64px; height: 64px; font-size: 1.6rem; }
.sc-group-icon-xl {
    width: 96px; height: 96px;
    font-size: 2.2rem;
    border-radius: var(--sc-r-lg);
    box-shadow:
        0 0 0 4px var(--sc-bg-elev),
        0 0 0 5px var(--sc-border-strong),
        0 0 32px rgba(92, 176, 255, .14);
}

/* Group detail header */
.sc-group-header {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 0 1.5rem;
    border-bottom: 1px solid var(--sc-border);
    margin-bottom: 1.25rem;
    position: relative;
}
.sc-group-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--sc-border-strong) 30%, var(--sc-border-strong) 70%, transparent);
    pointer-events: none;
}
.sc-group-identity { flex: 1 1 auto; min-width: 0; padding-top: .35rem; }
.sc-group-name {
    font-family: var(--sc-font-display);
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 600;
    margin: 0 0 .35rem;
    color: var(--sc-fg);
    letter-spacing: -.022em;
    line-height: 1.1;
}
.sc-group-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    color: var(--sc-fg-dim);
    font-size: .88rem;
    align-items: center;
}
.sc-group-meta strong { color: var(--sc-fg); font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; }
.sc-group-meta a { color: var(--sc-fg); }
.sc-group-meta a:hover { color: var(--sc-accent); text-decoration: none; }

/* ============================================================
   Left side panel — "Your groups" quick-access
   Fixed-position so it floats next to the centred feed without
   pushing the feed off-axis. Hidden on viewports under 1100px
   where there isn't room beside the feed column.
   ============================================================ */
.sc-side-panel {
    position: fixed;
    top: 5rem;
    /* Anchor the panel's right edge to the feed column's left edge
       (feed is max-width: 660px centred), leaving a 1.5rem gap. */
    left: calc(50% - 330px - 260px - 1.5rem);
    width: 260px;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    z-index: 10;
}
@media (max-width: 1100px) { .sc-side-panel { display: none; } }

.sc-side-panel-head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--sc-border);
    background: linear-gradient(180deg, rgba(92, 176, 255, .05), transparent);
}
.sc-side-panel-title {
    font-family: var(--sc-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--sc-fg);
    margin: 0;
    letter-spacing: -.005em;
}
.sc-side-panel-count {
    margin-left: auto;
    font-family: var(--sc-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--sc-fg-dim);
    font-size: .75rem;
}
.sc-side-panel-empty {
    padding: 1rem .9rem;
    color: var(--sc-fg-dim);
    font-size: .85rem;
    line-height: 1.45;
}
.sc-side-panel-empty a { color: var(--sc-accent); }

.sc-side-group-list { list-style: none; padding: .35rem; margin: 0; }
.sc-side-group-row { margin: 0; }
.sc-side-group-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .55rem;
    border-radius: var(--sc-r-sm);
    text-decoration: none;
    color: var(--sc-fg);
    transition: background .15s var(--sc-ease), color .15s var(--sc-ease);
}
.sc-side-group-link:hover { background: rgba(255, 255, 255, .04); color: var(--sc-fg); text-decoration: none; }
.sc-side-group-icon { width: 28px; height: 28px; font-size: .85rem; border-radius: 6px; flex: 0 0 auto; }
.sc-side-group-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sc-side-group-count {
    flex: 0 0 auto;
    font-family: var(--sc-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--sc-fg-muted);
    font-size: .72rem;
}

.sc-side-panel-foot {
    border-top: 1px solid var(--sc-border);
    background: rgba(0, 0, 0, .15);
}
.sc-side-panel-foot a {
    display: block;
    padding: .55rem .9rem;
    color: var(--sc-accent);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}
.sc-side-panel-foot a:hover { background: rgba(92, 176, 255, .07); color: var(--sc-accent-hover); text-decoration: none; }

/* ============================================================
   /groups/Mine — membership management list
   ============================================================ */
.sc-my-groups-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.sc-my-groups-row {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .85rem 1rem;
    background: var(--sc-bg-elev);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-md);
    transition: border-color .15s var(--sc-ease), background .15s var(--sc-ease);
}
.sc-my-groups-row:hover { border-color: var(--sc-border-strong); background: var(--sc-surface); }
.sc-my-groups-link {
    flex: 1 1 auto;
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.sc-my-groups-link:hover { text-decoration: none; }
.sc-my-groups-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.sc-my-groups-head { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.sc-my-groups-name {
    font-family: var(--sc-font-display);
    color: var(--sc-fg);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -.008em;
}
.sc-my-groups-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    color: var(--sc-fg-dim);
    font-size: .82rem;
}
.sc-my-groups-meta strong { color: var(--sc-fg); font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; }
.sc-my-groups-desc {
    color: var(--sc-fg-dim);
    font-size: .88rem;
    line-height: 1.45;
    margin-top: .15rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-my-groups-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; }

/* Group badge on feed cards */
.sc-feed-card-byline-line {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    line-height: 1.25;
}
.sc-feed-card-group-sep { color: var(--sc-fg-muted); font-size: .85rem; }
.sc-feed-card-group {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--sc-fg-dim);
    font-weight: 500;
    font-size: .92rem;
    text-decoration: none;
    padding: 1px 0;
    border-radius: var(--sc-r-sm);
    transition: color .15s var(--sc-ease);
}
.sc-feed-card-group:hover { color: var(--sc-accent); text-decoration: none; }
.sc-feed-card-group-icon {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid var(--sc-border);
}

/* Composer emoji picker — a quiet smiley toggle that opens a grid
   panel above the composer actions. The toggle's <details> dismissal
   is handled by the same outside-click code as the bell/profile menus
   (selector list in site.js). */
.sc-composer-emoji { position: relative; }
.sc-composer-emoji summary { list-style: none; cursor: pointer; }
.sc-composer-emoji summary::-webkit-details-marker { display: none; }
.sc-composer-emoji summary::marker { content: ''; display: none; }
.sc-composer-emoji-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--sc-r-sm);
    color: var(--sc-fg-dim);
    background: transparent;
    border: 1px solid transparent;
    transition: all .15s var(--sc-ease);
}
.sc-composer-emoji-toggle:hover {
    color: var(--sc-fg);
    background: rgba(255, 255, 255, .04);
    border-color: var(--sc-border);
}
.sc-composer-emoji[open] .sc-composer-emoji-toggle {
    color: var(--sc-fg);
    background: rgba(92, 176, 255, .08);
    border-color: rgba(92, 176, 255, .35);
}
.sc-composer-emoji-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + .4rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    padding: .55rem;
    width: 320px;
    max-width: calc(100vw - 1.5rem);
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    border: 1px solid var(--sc-border-strong);
    border-radius: var(--sc-r-md);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
    z-index: 20;
    animation: sc-menu-rise .18s var(--sc-ease-out);
}
.sc-composer-cancel { color: var(--sc-fg-dim); }
.sc-composer-cancel:hover { color: var(--sc-fg); }

/* ============================================================
   Empty state
   ============================================================ */
.sc-empty {
    text-align: center;
    padding: var(--sc-s-7) 1.25rem;
    color: var(--sc-fg-dim);
    border: 1px dashed var(--sc-border);
    border-radius: var(--sc-r-lg);
    background:
        radial-gradient(420px 220px at 50% 0%, rgba(92, 176, 255, .07), transparent 70%),
        var(--sc-bg-elev);
}
.sc-empty-title {
    font-family: var(--sc-font-display);
    color: var(--sc-fg);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: .35rem;
}
.sc-empty a { color: var(--sc-accent); font-weight: 500; }

/* ============================================================
   Feed cards
   ============================================================ */
.sc-feed-list { display: flex; flex-direction: column; gap: 1.1rem; }
.sc-feed-card {
    background: var(--sc-bg-elev);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-lg);
    overflow: hidden;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 1px 2px rgba(0, 0, 0, .25);
    transition:
        border-color .2s var(--sc-ease),
        box-shadow .26s var(--sc-ease);
}
.sc-feed-card:hover {
    border-color: var(--sc-border-strong);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 6px 32px rgba(0, 0, 0, .4),
        0 0 0 1px rgba(92, 176, 255, .10);
}

.sc-feed-card-header { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.15rem .35rem; }
.sc-feed-card-byline { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sc-feed-card-author { color: var(--sc-fg); font-weight: 600; text-decoration: none; }
.sc-feed-card-author:hover { color: var(--sc-accent); text-decoration: none; }
.sc-feed-card-time {
    color: var(--sc-fg-dim);
    font-size: .78rem;
    text-decoration: none;
    font-family: var(--sc-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.sc-feed-card-time:hover { color: var(--sc-fg); text-decoration: none; }

.sc-feed-card-body { display: block; padding: .35rem 1.15rem 1rem; color: var(--sc-fg); }
.sc-feed-card-text {
    word-wrap: break-word;
    margin: 0;
    line-height: 1.6;
    white-space: normal;
    font-size: 1rem;
}
.sc-feed-card-text a { color: var(--sc-accent); word-break: break-word; }
.sc-feed-card-text a:hover { color: var(--sc-accent-hover); }

/* Link preview card */
.sc-linkpreview {
    display: flex;
    align-items: stretch;
    margin: 0 1.15rem 1rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--sc-fg);
    transition: border-color .15s var(--sc-ease), background .15s var(--sc-ease);
}
.sc-linkpreview:hover {
    border-color: var(--sc-accent);
    background: var(--sc-surface-2);
    color: var(--sc-fg);
    text-decoration: none;
}
.sc-linkpreview-thumb {
    flex: 0 0 130px;
    background: var(--sc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sc-linkpreview-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    min-height: 100px;
}
.sc-linkpreview-body {
    flex: 1 1 auto;
    padding: .8rem .95rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.sc-linkpreview-host {
    color: var(--sc-fg-dim);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    font-family: var(--sc-font-mono);
}
.sc-linkpreview-title {
    font-weight: 600;
    color: var(--sc-fg);
    font-size: .96rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-linkpreview-desc {
    color: var(--sc-fg-dim);
    font-size: .85rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 540px) {
    .sc-linkpreview-thumb { flex-basis: 100px; }
    .sc-linkpreview-thumb img { min-height: 80px; }
}

/* Feed card media */
.sc-feed-card-media {
    position: relative;
    display: block;
    background: var(--sc-bg);
    border-top: 1px solid var(--sc-border);
    border-bottom: 1px solid var(--sc-border);
}
.sc-feed-card-media img {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: cover;
}
.sc-feed-card-media-more {
    position: absolute;
    bottom: .7rem; right: .7rem;
    background: rgba(10, 13, 20, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: .28rem .7rem;
    border-radius: var(--sc-r-pill);
    font-size: .76rem;
    font-weight: 600;
    font-family: var(--sc-font-mono);
    font-variant-numeric: tabular-nums;
    border: 1px solid rgba(255, 255, 255, .1);
    letter-spacing: .02em;
}

/* Feed card actions row */
.sc-feed-card-actions {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    padding: .65rem 1.15rem .9rem;
}
.sc-action {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--sc-fg-dim);
    text-decoration: none;
    font-size: .88rem;
    padding: .35rem .55rem;
    border-radius: var(--sc-r-sm);
    transition: color .15s var(--sc-ease), background .15s var(--sc-ease);
}
.sc-action:hover {
    color: var(--sc-fg);
    background: rgba(255, 255, 255, .04);
    text-decoration: none;
}
.sc-action-static { cursor: default; }
.sc-action-static:hover { background: transparent; color: var(--sc-fg-dim); }
.sc-action.is-active {
    color: var(--sc-accent);
    background: rgba(92, 176, 255, .12);
}
.sc-action.is-active:hover {
    color: var(--sc-accent-hover);
    background: rgba(92, 176, 255, .18);
}
.sc-action .js-comment-count,
.sc-action [class$="-count"] {
    font-family: var(--sc-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: .84rem;
}

/* Pager */
.sc-pager { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; }
.sc-pager .page-link {
    background: var(--sc-bg-elev);
    border-color: var(--sc-border);
    color: var(--sc-fg-dim);
    transition: all .15s var(--sc-ease);
}
.sc-pager .page-item.active .page-link {
    background: var(--sc-accent);
    border-color: var(--sc-accent);
    color: #061320;
    box-shadow: 0 0 18px rgba(92, 176, 255, .42);
    font-weight: 700;
}
.sc-pager .page-link:hover {
    background: var(--sc-surface);
    color: var(--sc-fg);
}

@media (max-width: 540px) {
    .sc-feed { padding: 0 .65rem; }
    .sc-feed-card-actions { gap: .9rem; }
}

/* ============================================================
   Comments
   ============================================================ */
.sc-comment-panel {
    border-top: 1px solid var(--sc-border);
    background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 80%);
}
.sc-comment-panel[hidden] { display: none; }
.sc-comment-panel-inner {
    padding: .85rem 1.15rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.sc-comment-loading { padding: 1rem; color: var(--sc-fg-dim); text-align: center; font-size: .9rem; }
.sc-comment-empty,
.sc-comment-signin { color: var(--sc-fg-dim); font-size: .9rem; }

.sc-comment-form { display: flex; flex-direction: column; gap: .4rem; }
.sc-comment-input {
    width: 100%;
    resize: none;
    background: var(--sc-bg-elev);
    color: var(--sc-fg);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-md);
    padding: .6rem .75rem;
    font-size: .92rem;
    line-height: 1.5;
    min-height: 2.5rem;
    max-height: 18rem;
    overflow-y: auto;
    font-family: inherit;
    transition: border-color .15s var(--sc-ease), box-shadow .15s var(--sc-ease);
}
.sc-comment-input:focus {
    outline: none;
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 3px rgba(92, 176, 255, .20);
}
.sc-comment-input::placeholder { color: var(--sc-fg-dim); }
.sc-comment-cancel { color: var(--sc-fg-dim); padding: .15rem .55rem; }
.sc-comment-cancel:hover { color: var(--sc-fg); }
.sc-comment-reply-form,
.sc-comment-edit-inline { margin-top: .45rem; }
.sc-comment-edit-inline {
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-md);
    padding: .6rem .7rem;
}
.sc-comment-edit-inline .sc-comment-form-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    justify-content: flex-end;
    margin-top: .5rem;
}
.sc-comment-edit-inline .sc-comment-form-actions .js-comment-error { margin-right: auto; }

/* Input-group composer */
.sc-comment-input-group { align-items: stretch; }
.sc-comment-input-group .sc-comment-input {
    font-size: .92rem;
    line-height: 1.5;
    min-height: 2.5rem;
    max-height: 14rem;
    resize: none;
    overflow-y: auto;
}
.sc-comment-input-group .sc-comment-input:focus { z-index: 3; }
.sc-comment-input-group .sc-comment-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .95rem;
    line-height: 1;
}
.sc-comment-input-group .sc-comment-send svg { display: block; }
.sc-comment-input-group .btn-outline-secondary {
    color: var(--sc-fg-dim);
    border-color: var(--sc-border);
    background: transparent;
}
.sc-comment-input-group .btn-outline-secondary:hover {
    color: var(--sc-fg);
    background: rgba(255, 255, 255, .06);
    border-color: var(--sc-border);
}

/* Comment node */
.sc-comment-node { margin-top: .7rem; }
.sc-comment-node:first-child { margin-top: 0; }
.sc-comment-row { display: flex; align-items: flex-start; gap: .7rem; }
.sc-comment-content { flex: 1 1 auto; min-width: 0; }
.sc-comment-meta {
    font-size: .78rem;
    color: var(--sc-fg-dim);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
    line-height: 1.2;
}
.sc-comment-author { color: var(--sc-fg); font-weight: 600; text-decoration: none; }
.sc-comment-author:hover { color: var(--sc-accent); text-decoration: none; }
.sc-comment-time,
.sc-comment-edited {
    color: var(--sc-fg-dim);
    font-family: var(--sc-font-mono);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.sc-comment-body {
    color: var(--sc-fg);
    font-size: .94rem;
    line-height: 1.55;
    margin-top: .2rem;
    word-wrap: break-word;
}
.sc-comment-body p { margin: 0 0 .4rem; }

.sc-comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-top: .35rem;
    font-size: .78rem;
}
.sc-comment-actions .sc-like { padding: .15rem .35rem; font-size: .78rem; }
.sc-comment-actions .sc-like svg { width: 14px; height: 14px; }
.sc-comment-actions .sc-like-form { margin: 0; }
.sc-comment-actions form.d-inline { margin: 0; }
.sc-comment-action {
    color: var(--sc-fg-dim);
    background: transparent;
    border: 0;
    padding: .18rem .45rem;
    border-radius: var(--sc-r-sm);
    cursor: pointer;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 500;
    transition: all .15s var(--sc-ease);
}
.sc-comment-action:hover {
    color: var(--sc-fg);
    background: rgba(255, 255, 255, .04);
    text-decoration: none;
}
.sc-comment-action-danger:hover {
    color: var(--sc-danger);
    background: rgba(255, 122, 122, .08);
}

/* Like button */
.sc-like-form { margin: 0; padding: 0; display: inline-flex; }
.sc-like {
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: var(--sc-r-sm);
    transition: color .15s var(--sc-ease), background .15s var(--sc-ease), transform .15s var(--sc-ease);
}
button.sc-like { padding: .3rem .45rem; }
.sc-like:hover {
    color: var(--sc-danger);
    background: rgba(255, 122, 122, .12);
}
.sc-like[data-liked="true"] { color: var(--sc-danger); }
.sc-like[data-liked="true"] svg path { fill: var(--sc-danger); }
.sc-like[data-liked="true"]:hover { background: rgba(255, 122, 122, .18); }
.sc-like[data-liked="true"]:active { transform: scale(.92); }
.sc-like-static { cursor: default; opacity: .85; }
.sc-like-static:hover { color: var(--sc-fg-dim); background: transparent; }

/* First-comment teaser */
.sc-feed-card-firstcomment {
    display: block;
    padding: .65rem 1.15rem .3rem;
    color: var(--sc-fg);
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, .04);
    cursor: pointer;
    transition: background .15s var(--sc-ease);
}
.sc-feed-card-firstcomment:hover {
    background: rgba(255, 255, 255, .02);
    color: var(--sc-fg);
    text-decoration: none;
}
.sc-feed-card-firstcomment-author { font-weight: 600; color: var(--sc-fg); margin-right: .35rem; }
.sc-feed-card-firstcomment-text {
    color: var(--sc-fg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: .92rem;
    line-height: 1.5;
}
.sc-feed-card-firstcomment-more {
    display: block;
    color: var(--sc-fg-dim);
    font-size: .8rem;
    margin-top: .2rem;
}

/* ============================================================
   Profile
   ============================================================ */
.sc-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
}
.sc-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-fg);
    font-weight: 600;
    background: linear-gradient(135deg, #232a3a, #364257);
}
.sc-avatar-link { text-decoration: none; flex: 0 0 auto; }
.sc-avatar-sm { width: 28px; height: 28px; font-size: .8rem; }
.sc-avatar-md { width: 48px; height: 48px; font-size: 1.05rem; }
.sc-avatar-lg { width: 64px; height: 64px; font-size: 1.4rem; }
.sc-avatar-xl {
    width: 112px; height: 112px;
    font-size: 2.35rem;
    box-shadow:
        0 0 0 4px var(--sc-bg-elev),
        0 0 0 5px var(--sc-border-strong),
        0 0 32px rgba(92, 176, 255, .14);
}

.sc-profile-header {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    padding: 1.75rem 0 1.5rem;
    border-bottom: 1px solid var(--sc-border);
    margin-bottom: 1.5rem;
    position: relative;
}
.sc-profile-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--sc-border-strong) 30%, var(--sc-border-strong) 70%, transparent);
    pointer-events: none;
}
.sc-profile-identity { flex: 1 1 auto; min-width: 0; padding-top: .25rem; }
.sc-profile-name {
    font-family: var(--sc-font-display);
    font-size: clamp(1.75rem, 3.2vw, 2.15rem);
    font-weight: 600;
    margin: 0 0 .4rem;
    color: var(--sc-fg);
    letter-spacing: -.024em;
    line-height: 1.08;
    font-variation-settings: 'opsz' 100, 'SOFT' 50;
}
.sc-profile-name a { color: inherit; }
.sc-profile-name a:hover { color: var(--sc-accent); text-decoration: none; }
.sc-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    color: var(--sc-fg-dim);
    font-size: .88rem;
    align-items: center;
}
.sc-profile-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.sc-profile-bio {
    color: var(--sc-fg);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    padding: .9rem 1.15rem;
    background: var(--sc-bg-elev);
    border: 1px solid var(--sc-border);
    border-left: 3px solid var(--sc-accent);
    border-radius: 0 var(--sc-r-md) var(--sc-r-md) 0;
    font-size: .98rem;
}

.sc-profile-header-compact { padding: 1.1rem 0 1rem; margin-bottom: 1rem; }
.sc-profile-header-compact .sc-profile-name { font-size: 1.4rem; }

.sc-profile-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.sc-profile-stats {
    display: flex;
    gap: 1.75rem;
    padding: 0 0 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--sc-border);
}
.sc-profile-stat {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    color: var(--sc-fg-dim);
    text-decoration: none;
    font-size: .9rem;
    transition: color .15s var(--sc-ease);
}
.sc-profile-stat:hover { color: var(--sc-fg); text-decoration: none; }
.sc-profile-stat-value {
    color: var(--sc-fg);
    font-weight: 700;
    font-size: 1.15rem;
    font-family: var(--sc-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.sc-profile-stat-label {
    color: var(--sc-fg-dim);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
}

.sc-follow-form { display: inline-flex; margin: 0; }
.sc-follow-form .btn { white-space: nowrap; }

/* ============================================================
   Profile "More" menu (⋯) — a <details> dropdown next to the
   Follow button. Pure HTML + CSS for the open/close; site.js
   handles click-outside and Escape dismissal. Default disclosure
   marker is stripped because this isn't a content-disclosure
   widget visually.
   ============================================================ */
.sc-profile-menu { position: relative; display: inline-block; }
.sc-profile-menu summary { list-style: none; cursor: pointer; }
.sc-profile-menu summary::-webkit-details-marker { display: none; }
.sc-profile-menu summary::marker { content: ''; display: none; }

.sc-profile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--sc-r-md);
    background: transparent;
    border: 1px solid var(--sc-border-strong);
    color: var(--sc-fg-dim);
    padding: 0;
    transition: all .15s var(--sc-ease);
}
.sc-profile-menu-toggle:hover {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(92, 176, 255, .5);
    color: var(--sc-fg);
}
.sc-profile-menu[open] .sc-profile-menu-toggle {
    background: rgba(255, 255, 255, .05);
    border-color: var(--sc-border-strong);
    color: var(--sc-fg);
}

.sc-profile-menu-panel {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    min-width: 14rem;
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    border: 1px solid var(--sc-border-strong);
    border-radius: var(--sc-r-md);
    padding: .35rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 12px 32px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(0, 0, 0, .25);
    z-index: 100;
    animation: sc-menu-rise .18s var(--sc-ease-out);
}
@keyframes sc-menu-rise {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.sc-profile-menu-panel form { margin: 0; }

.sc-profile-menu-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .55rem .75rem;
    background: transparent;
    border: 0;
    border-radius: var(--sc-r-sm);
    color: var(--sc-fg);
    font-size: .9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .12s var(--sc-ease), color .12s var(--sc-ease);
}
.sc-profile-menu-item:hover { background: rgba(255, 255, 255, .05); }
.sc-profile-menu-item svg { flex: 0 0 auto; opacity: .85; }
.sc-profile-menu-item-danger { color: var(--sc-danger); }
.sc-profile-menu-item-danger:hover {
    color: #ff9c9c;
    background: rgba(255, 122, 122, .10);
}

/* Static (non-link) follow-list row — used by the Blocked page
   where the listed user's profile is intentionally unreachable. */
.sc-follow-list-link-static { cursor: default; }
.sc-follow-list-link-static:hover .sc-follow-list-name { color: var(--sc-fg); }

/* Post-card "More" menu — push the ⋯ button to the right of the byline. */
.sc-feed-card-menu { margin-left: auto; }

/* Quieter comment action (Report) — sits among Edit / Delete but in a
   lower-contrast colour so it doesn't compete. */
.sc-comment-action-quiet { color: var(--sc-fg-muted); }
.sc-comment-action-quiet:hover { color: var(--sc-danger); background: rgba(255, 122, 122, .08); }

/* ============================================================
   Admin nav link + pending-reports badge
   ============================================================ */
.sc-navbar .sc-nav-admin {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
}
.sc-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .35rem;
    border-radius: var(--sc-r-pill);
    background: var(--sc-danger);
    color: #2a0808;
    font-family: var(--sc-font-mono);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 12px rgba(255, 122, 122, .35);
}

/* Accent variant ÔÇö used by the notifications bell (cool blue, not the
   alarm-red of pending moderation reports). */
.sc-nav-badge-accent {
    background: var(--sc-accent);
    color: #061320;
    box-shadow: 0 0 12px rgba(92, 176, 255, .42);
}

/* Notification bell nav item. The bell itself is a <summary> inside a
   <details class="sc-bell-menu">, so clicking it toggles a dropdown
   popout in place rather than navigating away. The badge floats over
   the bell glyph and uses the cool accent (vs. moderation's alarm-red).
   The native disclosure marker is stripped so the summary renders as a
   clean icon button. */
.sc-bell-menu { position: relative; display: inline-block; }
.sc-bell-menu summary { list-style: none; cursor: pointer; }
.sc-bell-menu summary::-webkit-details-marker { display: none; }
.sc-bell-menu summary::marker { content: ''; display: none; }

.sc-navbar .sc-nav-bell {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    padding: .55rem 0 !important;
}
.sc-navbar .sc-nav-bell .sc-nav-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .3rem;
    font-size: .64rem;
    transform: translate(40%, -20%);
    border: 1.5px solid var(--sc-bg);
}
/* The bell's underline dot would crowd the badge ÔÇö hide it. */
.sc-navbar .sc-nav-bell::after { display: none; }
.sc-navbar .sc-nav-bell:hover svg { color: var(--sc-fg); }
.sc-navbar .sc-nav-bell svg { color: var(--sc-fg-dim); transition: color .15s var(--sc-ease); }
.sc-bell-menu[open] .sc-nav-bell svg { color: var(--sc-fg); }

/* ============================================================
   Bell popout (notifications dropdown)
   ============================================================ */
.sc-bell-popout {
    position: absolute;
    top: calc(100% + .5rem);
    right: -.25rem;
    width: 360px;
    max-width: calc(100vw - 1rem);
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    border: 1px solid var(--sc-border-strong);
    border-radius: var(--sc-r-md);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 16px 48px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(0, 0, 0, .25);
    z-index: 1050;
    overflow: hidden;
    animation: sc-menu-rise .18s var(--sc-ease-out);
}

.sc-bell-popout-head {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--sc-border);
    background: linear-gradient(180deg, rgba(92, 176, 255, .06), transparent);
}
.sc-bell-popout-title {
    font-family: var(--sc-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sc-fg);
    letter-spacing: -.005em;
}
.sc-bell-popout-subtitle {
    margin-left: auto;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--sc-fg-dim);
    font-weight: 600;
}

.sc-bell-popout-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--sc-fg-dim);
    font-size: .9rem;
    line-height: 1.5;
}

.sc-bell-popout-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}
.sc-bell-popout-row {
    border-bottom: 1px solid var(--sc-border);
}
.sc-bell-popout-row:last-child { border-bottom: 0; }

.sc-bell-popout-link {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem .9rem;
    color: inherit;
    text-decoration: none;
    /* Subtle unread accent ÔÇö every row in the popout is unread by
       construction, so it gets the inset left bar treatment from the
       full /notifications page in a thinner form. */
    box-shadow: inset 2px 0 0 var(--sc-accent);
    background: linear-gradient(90deg, rgba(92, 176, 255, .05), transparent 35%);
    transition: background .15s var(--sc-ease);
}
.sc-bell-popout-link:hover {
    background: linear-gradient(90deg, rgba(92, 176, 255, .10), rgba(255, 255, 255, .02) 50%);
    text-decoration: none;
}

.sc-bell-popout-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: .1rem;
    flex: 1 1 auto;
}
.sc-bell-popout-line {
    color: var(--sc-fg);
    font-size: .9rem;
    line-height: 1.35;
}
.sc-bell-popout-line strong { font-weight: 600; }
.sc-bell-popout-preview {
    color: var(--sc-fg-dim);
    font-size: .82rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-bell-popout-time {
    color: var(--sc-fg-muted);
    font-family: var(--sc-font-mono);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    margin-top: .15rem;
}

.sc-bell-popout-foot {
    border-top: 1px solid var(--sc-border);
    background: rgba(0, 0, 0, .15);
}
.sc-bell-popout-all {
    display: block;
    padding: .65rem 1rem;
    text-align: center;
    color: var(--sc-accent);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    transition: background .15s var(--sc-ease), color .15s var(--sc-ease);
}
.sc-bell-popout-all:hover {
    background: rgba(92, 176, 255, .08);
    color: var(--sc-accent-hover);
    text-decoration: none;
}

@media (max-width: 540px) {
    .sc-bell-popout { width: calc(100vw - 1.5rem); right: 0; }
}

/* Generic icon-only nav item (inbox envelope, etc). Same visual rules
   as the bell but without disclosure behaviour or a badge. */
.sc-navbar .sc-nav-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    padding: .55rem 0 !important;
}
.sc-navbar .sc-nav-icon svg { color: var(--sc-fg-dim); transition: color .15s var(--sc-ease); }
.sc-navbar .sc-nav-icon:hover svg,
.sc-navbar .sc-nav-icon.active svg { color: var(--sc-fg); }
.sc-navbar .sc-nav-icon::after { display: none; }

/* ============================================================
   Messages ÔÇö inbox + conversation
   ============================================================ */
.sc-inbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.sc-inbox-row {
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-md);
    background: var(--sc-bg-elev);
    overflow: hidden;
    transition: border-color .18s var(--sc-ease), background .15s var(--sc-ease);
}
.sc-inbox-row:hover { border-color: var(--sc-border-strong); background: var(--sc-surface); }
.sc-inbox-row.is-unread {
    background: linear-gradient(180deg,
        rgba(92, 176, 255, .08),
        rgba(92, 176, 255, .03) 70%,
        var(--sc-bg-elev));
    border-color: rgba(92, 176, 255, .35);
    box-shadow:
        inset 3px 0 0 var(--sc-accent),
        0 0 14px rgba(92, 176, 255, .10);
}

.sc-inbox-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    color: inherit;
    text-decoration: none;
}
.sc-inbox-link:hover { text-decoration: none; }

.sc-inbox-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.sc-inbox-head { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.sc-inbox-name { color: var(--sc-fg); font-weight: 600; font-size: 1rem; line-height: 1.2; flex: 1 1 auto; min-width: 0; }
.sc-inbox-time {
    color: var(--sc-fg-muted);
    font-family: var(--sc-font-mono);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.sc-inbox-preview {
    color: var(--sc-fg-dim);
    font-size: .88rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-inbox-row.is-unread .sc-inbox-preview { color: var(--sc-fg); font-weight: 500; }
.sc-inbox-preview-prefix { color: var(--sc-fg-muted); margin-right: .3rem; }
.sc-inbox-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sc-accent);
    box-shadow: 0 0 10px rgba(92, 176, 255, .65);
}

/* ---------- Conversation page ---------------------------------- */
.sc-conversation { padding-bottom: .5rem; }
.sc-conversation-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-md);
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    margin-bottom: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    position: sticky;
    top: 4.5rem;
    z-index: 10;
}
.sc-conversation-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--sc-r-sm);
    color: var(--sc-fg-dim);
    text-decoration: none;
    transition: all .15s var(--sc-ease);
}
.sc-conversation-back:hover { background: rgba(255, 255, 255, .05); color: var(--sc-fg); }
.sc-conversation-identity { display: flex; flex-direction: column; min-width: 0; gap: .05rem; }
.sc-conversation-name {
    font-family: var(--sc-font-display);
    color: var(--sc-fg);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-decoration: none;
}
.sc-conversation-name:hover { color: var(--sc-accent); text-decoration: none; }
.sc-conversation-slug { color: var(--sc-fg-dim); font-family: var(--sc-font-mono); font-size: .8rem; }

.sc-conversation-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--sc-fg-dim);
}
.sc-conversation-empty strong { color: var(--sc-fg); }

.sc-message-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0 0 .5rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 40vh;
    max-height: 65vh;
    overflow-y: auto;
    scroll-behavior: smooth;
}
.sc-message-daybreak {
    align-self: center;
    margin: 1rem 0 .35rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--sc-fg-muted);
    font-weight: 600;
}
.sc-message-daybreak span {
    padding: .25rem .8rem;
    background: var(--sc-bg-elev);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-pill);
}

.sc-message-row { display: flex; }
.sc-message-row.is-me  { justify-content: flex-end; }
.sc-message-row.is-them { justify-content: flex-start; }

.sc-message-bubble {
    max-width: 78%;
    padding: .55rem .85rem .4rem;
    border-radius: var(--sc-r-lg);
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.sc-message-row.is-them .sc-message-bubble {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    color: var(--sc-fg);
    border-bottom-left-radius: var(--sc-r-sm);
}
.sc-message-row.is-me .sc-message-bubble {
    background: linear-gradient(180deg, rgba(92, 176, 255, .22), rgba(92, 176, 255, .12));
    border: 1px solid rgba(92, 176, 255, .42);
    color: var(--sc-fg);
    border-bottom-right-radius: var(--sc-r-sm);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 0 16px rgba(92, 176, 255, .14);
}
.sc-message-row.is-deleted .sc-message-bubble {
    opacity: .65;
    font-style: italic;
    background: var(--sc-bg-elev);
    border-style: dashed;
}
.sc-message-text { display: block; }
.sc-message-time {
    display: inline-block;
    margin-top: .25rem;
    color: var(--sc-fg-muted);
    font-family: var(--sc-font-mono);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.sc-message-row.is-me .sc-message-time { color: rgba(255, 255, 255, .65); }

.sc-message-composer {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    background: var(--sc-bg-elev);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-md);
    padding: .5rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    transition: border-color .15s var(--sc-ease), box-shadow .18s var(--sc-ease);
}
.sc-message-composer:focus-within {
    border-color: var(--sc-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 0 0 3px rgba(92, 176, 255, .18);
}
.sc-message-input {
    flex: 1 1 auto;
    resize: none;
    background: transparent !important;
    color: var(--sc-fg) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: .95rem;
    line-height: 1.5;
    min-height: 2rem;
    max-height: 200px;
    overflow-y: auto;
    padding: .3rem .4rem;
}
.sc-message-input:focus { outline: none !important; }
.sc-message-send {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sc-r-sm);
}
.sc-message-composer-wrap { display: flex; flex-direction: column; gap: .35rem; }
.sc-message-composer-error {
    color: var(--sc-danger);
    font-size: .85rem;
    padding: 0 .25rem;
}

/* ============================================================
   Messenger drawer (right-side slide-in)
   Lives in _Layout so it overlays every page. The drawer is a
   fixed-position pane on the right edge; on narrow viewports it
   expands to fill the screen with a dimming backdrop. Slide
   transition is a transform so it cheaply hardware-composites.
   ============================================================ */
.sc-messenger-backdrop {
    position: fixed; inset: 0;
    background: rgba(6, 8, 14, .45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1090;
    opacity: 0;
    transition: opacity .22s var(--sc-ease);
    cursor: pointer;
}
.sc-messenger[data-state="open"] ~ .sc-messenger-backdrop,
.sc-messenger-backdrop:not([hidden]) {
    opacity: 1;
}
@media (min-width: 1100px) {
    /* On a wide screen the drawer floats to the right of the feed and
       doesn't need a backdrop ÔÇö the rest of the page stays interactive. */
    .sc-messenger-backdrop { display: none; }
}

.sc-messenger {
    position: fixed;
    top: 4.25rem;
    right: 1rem;
    bottom: 1rem;
    width: 400px;
    max-width: calc(100vw - 1.5rem);
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    border: 1px solid var(--sc-border-strong);
    border-radius: var(--sc-r-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 24px 64px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(0, 0, 0, .25);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(110%);
    transition: transform .26s var(--sc-ease-out);
}
.sc-messenger[data-state="open"] { transform: translateX(0); }
.sc-messenger[hidden] { display: none !important; }

@media (max-width: 700px) {
    .sc-messenger {
        top: 0; right: 0; bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        border-radius: 0;
        border: 0;
    }
}

.sc-messenger-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.sc-messenger-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--sc-border);
    background: linear-gradient(180deg, rgba(92, 176, 255, .05), transparent);
    flex: 0 0 auto;
}
.sc-messenger-title {
    font-family: var(--sc-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--sc-fg);
    letter-spacing: -.01em;
    margin: 0;
}
.sc-messenger-head-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}
.sc-messenger-close,
.sc-messenger-back,
.sc-messenger-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--sc-r-sm);
    background: transparent;
    border: 0;
    color: var(--sc-fg-dim);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s var(--sc-ease), color .15s var(--sc-ease);
}
.sc-messenger-close:hover,
.sc-messenger-back:hover,
.sc-messenger-expand:hover { background: rgba(255, 255, 255, .06); color: var(--sc-fg); }

.sc-messenger-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .5rem;
}
.sc-messenger-loading {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--sc-fg-dim);
    font-size: .9rem;
}
.sc-messenger-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--sc-fg-dim);
    font-size: .9rem;
}
.sc-messenger-empty-title {
    font-family: var(--sc-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sc-fg);
    margin-bottom: .25rem;
}

/* ---- inbox list inside the drawer ------------------------- */
.sc-messenger-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.sc-messenger-row {
    border: 1px solid transparent;
    border-radius: var(--sc-r-md);
    background: transparent;
    transition: background .15s var(--sc-ease), border-color .15s var(--sc-ease);
}
.sc-messenger-row:hover { background: rgba(255, 255, 255, .03); border-color: var(--sc-border); }
.sc-messenger-row.is-unread {
    background: linear-gradient(90deg, rgba(92, 176, 255, .08), transparent 70%);
    border-color: rgba(92, 176, 255, .25);
    box-shadow: inset 3px 0 0 var(--sc-accent);
}
.sc-messenger-row-btn {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .55rem .65rem;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--sc-r-md);
}
.sc-messenger-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.sc-messenger-row-head { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.sc-messenger-row-name { color: var(--sc-fg); font-weight: 600; font-size: .92rem; flex: 1 1 auto; min-width: 0; }
.sc-messenger-row-time {
    color: var(--sc-fg-muted);
    font-family: var(--sc-font-mono);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.sc-messenger-row-preview {
    color: var(--sc-fg-dim);
    font-size: .82rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-messenger-row.is-unread .sc-messenger-row-preview { color: var(--sc-fg); }
.sc-messenger-prefix { color: var(--sc-fg-muted); margin-right: .25rem; }
.sc-messenger-dot {
    flex: 0 0 auto;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--sc-accent);
    box-shadow: 0 0 10px rgba(92, 176, 255, .6);
}

/* ---- conversation pane inside the drawer ------------------ */
.sc-messenger-conversation { display: flex; flex-direction: column; }
.sc-messenger-avatar-wrap { display: inline-flex; align-items: center; }
.sc-messenger-identity { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sc-messenger-name { color: var(--sc-fg); font-weight: 600; font-size: .98rem; line-height: 1.15; }
.sc-messenger-slug { color: var(--sc-fg-dim); font-family: var(--sc-font-mono); font-size: .72rem; }

.sc-messenger-bubbles {
    list-style: none;
    margin: 0;
    padding: .65rem .7rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    scroll-behavior: smooth;
}

.sc-messenger-bubble-row { display: flex; }
.sc-messenger-bubble-row.is-me  { justify-content: flex-end; }
.sc-messenger-bubble-row.is-them { justify-content: flex-start; }
.sc-messenger-bubble {
    max-width: 80%;
    padding: .5rem .75rem .35rem;
    border-radius: var(--sc-r-lg);
    line-height: 1.45;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-size: .92rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.sc-messenger-bubble-row.is-them .sc-messenger-bubble {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    color: var(--sc-fg);
    border-bottom-left-radius: var(--sc-r-sm);
}
.sc-messenger-bubble-row.is-me .sc-messenger-bubble {
    background: linear-gradient(180deg, rgba(92, 176, 255, .22), rgba(92, 176, 255, .12));
    border: 1px solid rgba(92, 176, 255, .42);
    color: var(--sc-fg);
    border-bottom-right-radius: var(--sc-r-sm);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 0 14px rgba(92, 176, 255, .14);
}
.sc-messenger-bubble-row.is-pending .sc-messenger-bubble { opacity: .65; }
.sc-messenger-bubble-row.is-failed .sc-messenger-bubble {
    border-color: var(--sc-danger);
    box-shadow: 0 0 14px rgba(255, 122, 122, .22);
}
.sc-messenger-bubble-row.is-deleted .sc-messenger-bubble { opacity: .65; font-style: italic; border-style: dashed; }
.sc-messenger-bubble-text { display: block; }
.sc-messenger-bubble-time {
    display: inline-block;
    margin-top: .2rem;
    color: var(--sc-fg-muted);
    font-family: var(--sc-font-mono);
    font-size: .66rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.sc-messenger-bubble-row.is-me .sc-messenger-bubble-time { color: rgba(255, 255, 255, .65); }

.sc-messenger-composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: .4rem;
    padding: .55rem .65rem .65rem;
    background: var(--sc-bg-elev);
    border-top: 1px solid var(--sc-border);
}
.sc-messenger-input {
    flex: 1 1 auto;
    resize: none;
    background: var(--sc-bg) !important;
    color: var(--sc-fg) !important;
    border: 1px solid var(--sc-border) !important;
    border-radius: var(--sc-r-md);
    font-size: .92rem;
    line-height: 1.45;
    min-height: 2.4rem;
    max-height: 160px;
    overflow-y: auto;
    padding: .45rem .65rem;
    transition: border-color .15s var(--sc-ease), box-shadow .15s var(--sc-ease);
}
.sc-messenger-input:focus {
    outline: none !important;
    border-color: var(--sc-accent) !important;
    box-shadow: 0 0 0 3px rgba(92, 176, 255, .18) !important;
}
.sc-messenger-send {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sc-r-sm);
}
.sc-messenger-error {
    color: var(--sc-danger);
    font-size: .82rem;
    padding: 0 .85rem .55rem;
}

/* ============================================================
   Inline site-themed emoji
   ============================================================ */
.sc-emoji {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.28em;
    margin: 0 .04em;
    /* No drag, no select — these are content glyphs, not images. */
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
/* Slightly bigger in bubbles so they read at a glance. */
.sc-messenger-bubble-text .sc-emoji,
.sc-message-text .sc-emoji {
    width: 1.35em;
    height: 1.35em;
    vertical-align: -0.32em;
}

/* Composer emoji hint — small bar of clickable shortcode chips. */
.sc-messenger-emoji-hint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .35rem .75rem .65rem;
    border-top: 1px dashed var(--sc-border);
    background: var(--sc-bg-elev);
}
.sc-messenger-emoji-hint-label {
    font-size: .72rem;
    color: var(--sc-fg-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    margin-right: .15rem;
}
.sc-messenger-emoji-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem .2rem .35rem;
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-pill);
    color: var(--sc-fg-dim);
    cursor: pointer;
    font-family: var(--sc-font-mono);
    font-size: .72rem;
    line-height: 1.4;
    /* In grid panels each chip fills its cell so 2-column layouts
       give every shortcode room. `min-width: 0` makes the chip
       shrinkable if the parent is narrower than the natural width. */
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    transition: background .15s var(--sc-ease), border-color .15s var(--sc-ease), color .15s var(--sc-ease);
}
.sc-messenger-emoji-tag span {
    min-width: 0;
    white-space: nowrap;
}
.sc-messenger-emoji-tag:hover {
    border-color: rgba(92, 176, 255, .45);
    background: rgba(92, 176, 255, .06);
    color: var(--sc-fg);
}
/* In the inline hint bar (drawer composer's "Try:" row) chips stay
   their natural width so they sit on a single horizontal line. */
.sc-messenger-emoji-hint > .sc-messenger-emoji-tag { width: auto; }

/* The chip's emoji ignores the standard line-height adjustment
   because the chip sets its own baseline. */
.sc-messenger-emoji-tag .sc-emoji {
    vertical-align: middle;
    width: 1em;
    height: 1em;
    margin: 0;
    pointer-events: none;
    flex: 0 0 auto;
}
.sc-messenger-emoji-more { margin-left: auto; }
.sc-messenger-emoji-more summary {
    list-style: none;
    cursor: pointer;
    font-size: .72rem;
    color: var(--sc-fg-dim);
    font-family: var(--sc-font-mono);
    padding: .15rem .35rem;
    border-radius: var(--sc-r-sm);
}
.sc-messenger-emoji-more summary:hover { color: var(--sc-fg); background: rgba(255, 255, 255, .04); }
.sc-messenger-emoji-more summary::marker { display: none; content: ''; }
.sc-messenger-emoji-more summary::-webkit-details-marker { display: none; }

.sc-messenger-emoji-grid {
    position: absolute;
    right: .5rem;
    bottom: 100%;
    margin-bottom: .35rem;
    padding: .5rem;
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    border: 1px solid var(--sc-border-strong);
    border-radius: var(--sc-r-md);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    z-index: 5;
    width: 300px;
    max-width: calc(100vw - 1.5rem);
    animation: sc-menu-rise .18s var(--sc-ease-out);
}
/* Position the popover relative to the hint container. */
.sc-messenger-emoji-hint { position: relative; }

/* ============================================================
   Notifications timeline (/notifications)
   ============================================================ */
.sc-notification-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.sc-notification-row {
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-md);
    background: var(--sc-bg-elev);
    transition:
        border-color .18s var(--sc-ease),
        background .18s var(--sc-ease),
        box-shadow .22s var(--sc-ease);
    overflow: hidden;
}
.sc-notification-row:hover {
    border-color: var(--sc-border-strong);
    background: var(--sc-surface);
}
.sc-notification-row.is-unread {
    background: linear-gradient(180deg,
        rgba(92, 176, 255, .08),
        rgba(92, 176, 255, .03) 70%,
        var(--sc-bg-elev));
    border-color: rgba(92, 176, 255, .35);
    box-shadow:
        inset 3px 0 0 var(--sc-accent),
        0 0 14px rgba(92, 176, 255, .10);
}

.sc-notification-link {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .85rem 1rem;
    color: inherit;
    text-decoration: none;
}
.sc-notification-link:hover { text-decoration: none; }

.sc-notification-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: .15rem;
    flex: 1 1 auto;
}
.sc-notification-text {
    color: var(--sc-fg);
    font-size: .95rem;
    line-height: 1.4;
}
.sc-notification-text strong { font-weight: 600; }
.sc-notification-preview {
    color: var(--sc-fg-dim);
    font-size: .9rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: .15rem;
}
.sc-notification-time {
    color: var(--sc-fg-muted);
    font-family: var(--sc-font-mono);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    margin-top: .25rem;
}

/* ============================================================
   Flash message (TempData banner)
   ============================================================ */
.sc-flash {
    max-width: 660px;
    margin: 1.25rem auto 0;
    padding: .7rem 1rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    background: linear-gradient(180deg, rgba(108, 212, 159, .14), rgba(108, 212, 159, .06));
    border: 1px solid rgba(108, 212, 159, .45);
    border-radius: var(--sc-r-md);
    color: var(--sc-fg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 0 20px rgba(108, 212, 159, .12);
    animation: sc-flash-rise .25s var(--sc-ease-out);
}
@keyframes sc-flash-rise {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.sc-flash-icon {
    display: inline-flex;
    color: var(--sc-success);
    flex: 0 0 auto;
}
.sc-flash-text { flex: 1 1 auto; font-size: .95rem; }
.sc-flash-close {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    background: transparent;
    border: 0;
    border-radius: var(--sc-r-sm);
    color: var(--sc-fg-dim);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: all .15s var(--sc-ease);
}
.sc-flash-close:hover { background: rgba(255, 255, 255, .06); color: var(--sc-fg); }
.sc-flash[hidden] { display: none; }

/* ============================================================
   Report form — reason picker as a stacked card list
   ============================================================ */
.sc-report-excerpt {
    margin: 0 0 1.25rem;
    padding: .85rem 1.1rem;
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    border-left: 3px solid var(--sc-fg-muted);
    border-radius: 0 var(--sc-r-md) var(--sc-r-md) 0;
    color: var(--sc-fg);
    font-size: .95rem;
    line-height: 1.55;
    font-style: italic;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.sc-report-reasons {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.sc-report-reason {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: .7rem;
    align-items: start;
    padding: .75rem .85rem;
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-md);
    cursor: pointer;
    transition: border-color .15s var(--sc-ease), background .15s var(--sc-ease);
}
.sc-report-reason:hover { border-color: var(--sc-border-strong); }
.sc-report-reason input[type="radio"] {
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
    accent-color: var(--sc-accent);
}
.sc-report-reason:has(input[type="radio"]:checked) {
    border-color: var(--sc-accent);
    background: linear-gradient(180deg, rgba(92, 176, 255, .10), rgba(92, 176, 255, .02));
    box-shadow:
        inset 0 0 0 1px rgba(92, 176, 255, .22),
        0 0 18px rgba(92, 176, 255, .12);
}
.sc-report-reason-label {
    grid-column: 2;
    grid-row: 1;
    color: var(--sc-fg);
    font-weight: 600;
    font-size: .98rem;
}
.sc-report-reason-hint {
    grid-column: 2;
    grid-row: 2;
    color: var(--sc-fg-dim);
    font-size: .85rem;
    line-height: 1.4;
}

/* ============================================================
   Moderation queue
   ============================================================ */
.sc-mod-queue { display: flex; flex-direction: column; gap: 1rem; }

.sc-mod-row {
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-lg);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 1px 2px rgba(0, 0, 0, .25);
}
.sc-mod-row.is-pending { border-left: 3px solid var(--sc-danger); }
.sc-mod-row.is-resolved { opacity: .82; }

.sc-mod-row-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--sc-border);
}
.sc-mod-reason {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    padding: .25rem .6rem;
    border-radius: var(--sc-r-pill);
    border: 1px solid;
}
.sc-mod-reason-spam {
    color: #ffd089;
    background: rgba(255, 184, 92, .10);
    border-color: rgba(255, 184, 92, .42);
}
.sc-mod-reason-harassment {
    color: #ffa3a3;
    background: rgba(255, 122, 122, .12);
    border-color: rgba(255, 122, 122, .45);
}
.sc-mod-reason-inappropriate {
    color: #ffaf8a;
    background: rgba(255, 149, 104, .12);
    border-color: rgba(255, 149, 104, .42);
}
.sc-mod-reason-other {
    color: var(--sc-fg-dim);
    background: rgba(255, 255, 255, .04);
    border-color: var(--sc-border-strong);
}
.sc-mod-target-kind {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sc-fg-dim);
    font-weight: 600;
}
.sc-mod-time {
    margin-left: auto;
    color: var(--sc-fg-dim);
    font-family: var(--sc-font-mono);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}
.sc-mod-status {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: var(--sc-r-pill);
}
.sc-mod-status-resolved {
    color: var(--sc-success);
    background: rgba(108, 212, 159, .10);
    border: 1px solid rgba(108, 212, 159, .4);
}
.sc-mod-status-dismissed {
    color: var(--sc-fg-dim);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--sc-border-strong);
}

.sc-mod-row-body { padding: 1rem 1.1rem; }
.sc-mod-row-body .sc-report-excerpt { margin-bottom: .85rem; }

.sc-mod-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    color: var(--sc-fg-dim);
    font-size: .88rem;
}
.sc-mod-meta a { color: var(--sc-fg); }
.sc-mod-meta a:hover { color: var(--sc-accent); text-decoration: none; }

.sc-mod-notes {
    margin-top: .9rem;
    padding: .65rem .85rem;
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-md);
}
.sc-mod-notes p { margin: .25rem 0 0; color: var(--sc-fg); font-size: .92rem; line-height: 1.55; }
.sc-mod-resolver { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sc-fg-dim); }

.sc-mod-row-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--sc-border);
    background: rgba(0, 0, 0, .15);
}
.sc-mod-action-form { display: inline-flex; margin: 0; }

/* Danger variant of the brand button — used by Delete content on the
   moderation queue. Same shape as btn-sc but in the danger colour. */
.btn-sc-danger {
    background: linear-gradient(180deg, var(--sc-danger), #c84a4a);
    border: 1px solid #c84a4a;
    color: #220606;
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 1px 0 rgba(0, 0, 0, .25);
}
.btn-sc-danger:hover {
    background: linear-gradient(180deg, #ff9999, var(--sc-danger));
    border-color: #ff9999;
    color: #220606;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .26),
        0 2px 0 rgba(0, 0, 0, .25),
        0 0 24px rgba(255, 122, 122, .25);
    transform: translateY(-1px);
}
.btn-sc-danger:active { transform: translateY(0); }

/* ============================================================
   Feed tabs (Following / Discover) — shared with
   followers/following list pages where each tab carries a
   count chip.
   ============================================================ */
.sc-feed-tabs {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 1.5rem;
    padding: 4px;
    background: linear-gradient(180deg, var(--sc-bg-elev), var(--sc-bg));
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-pill);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 1px 2px rgba(0, 0, 0, .25);
}
.sc-feed-tab {
    flex: 0 0 auto;
    min-width: 7.5rem;
    padding: .55rem 1.4rem;
    border-radius: var(--sc-r-pill);
    color: var(--sc-fg-dim);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color .18s var(--sc-ease),
        background .22s var(--sc-ease),
        box-shadow .28s var(--sc-ease);
}
.sc-feed-tab:hover {
    color: var(--sc-fg);
    background: rgba(255, 255, 255, .03);
    text-decoration: none;
}
.sc-feed-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(92, 176, 255, .32);
}
.sc-feed-tab.is-active {
    color: var(--sc-fg);
    background: linear-gradient(180deg, rgba(92, 176, 255, .22), rgba(92, 176, 255, .08));
    /* Triple-stacked glow: inner accent border, tight halo,
       soft outer bleed. Same recipe the composer uses on
       :focus-within, so the language is shared. */
    box-shadow:
        inset 0 0 0 1px rgba(92, 176, 255, .42),
        0 0 0 3px rgba(92, 176, 255, .08),
        0 0 18px rgba(92, 176, 255, .22);
}
.sc-feed-tab-count {
    display: inline-block;
    margin-left: .5rem;
    padding: 0 .55rem;
    min-width: 1.4rem;
    border-radius: var(--sc-r-pill);
    background: rgba(255, 255, 255, .06);
    color: var(--sc-fg);
    font-family: var(--sc-font-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.6;
    vertical-align: 1px;
    font-variant-numeric: tabular-nums;
}
.sc-feed-tab.is-active .sc-feed-tab-count {
    background: rgba(92, 176, 255, .25);
    color: #e8f2ff;
}

/* ============================================================
   Followers / Following list
   ============================================================ */
.sc-follow-list { list-style: none; padding: 0; margin: 0; }
.sc-follow-list-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem .3rem;
    border-bottom: 1px solid var(--sc-border);
    transition: background .15s var(--sc-ease);
}
.sc-follow-list-item:last-child { border-bottom: 0; }
.sc-follow-list-item:hover { background: rgba(255, 255, 255, .015); }
.sc-follow-list-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .95rem;
    min-width: 0;
    padding: .15rem 0;
    color: inherit;
    text-decoration: none;
    transition: color .15s var(--sc-ease);
}
.sc-follow-list-link:hover { text-decoration: none; }
.sc-follow-list-link:hover .sc-follow-list-name { color: var(--sc-accent-hover); }
.sc-follow-list-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: .1rem;
}
.sc-follow-list-name {
    color: var(--sc-fg);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    transition: color .15s var(--sc-ease);
}
.sc-follow-list-slug {
    color: var(--sc-fg-dim);
    font-size: .82rem;
    line-height: 1.25;
    font-family: var(--sc-font-mono);
}
.sc-follow-list-bio {
    color: var(--sc-fg-dim);
    font-size: .86rem;
    line-height: 1.4;
    margin-top: .25rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   Settings page
   ============================================================ */
.sc-settings-card {
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-lg);
    padding: 1.5rem 1.5rem 1.3rem;
    margin-bottom: 1.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.sc-settings-card-title {
    font-family: var(--sc-font-display);
    font-size: 1.18rem;
    font-weight: 600;
    margin: 0 0 .35rem;
    color: var(--sc-fg);
    letter-spacing: -.01em;
}
.sc-settings-form .form-label {
    color: var(--sc-fg-dim);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: .4rem;
}
.sc-settings-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: .5rem;
}
.sc-settings-list { list-style: none; padding: 0; margin: 0; }
.sc-settings-list li {
    padding: .7rem 0;
    border-top: 1px solid var(--sc-border);
}
.sc-settings-list li:first-child { border-top: 0; }
.sc-settings-list a { color: var(--sc-fg); }
.sc-settings-list a:hover { color: var(--sc-accent); text-decoration: none; }
.sc-settings-avatar-row { display: flex; align-items: center; gap: 1rem; }
.sc-settings-avatar-row input[type="file"] { flex: 1 1 auto; }

/* ============================================================
   Landing page — dual hero, two-halves split, community pulse,
   feature catalogue, closing CTA.
   ------------------------------------------------------------
   The landing is the *only* place anonymous visitors meet the
   product, so it has to pitch two things at once: the Windows
   imaging suite (download) and the community (sign up / browse).
   Visual idea: a horizon runs through every section. The app
   lives on one side of it, the community on the other.
   ============================================================ */

/* ---- Warm-accent button variant (community / coral CTA) ---- */
.btn-sc-warm {
    background: linear-gradient(180deg, var(--sc-accent-warm), #e6724a);
    border: 1px solid #d96337;
    color: #2a0d04;
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        0 1px 0 rgba(0, 0, 0, .28);
    transition:
        background .18s var(--sc-ease),
        border-color .18s var(--sc-ease),
        box-shadow .22s var(--sc-ease),
        transform .15s var(--sc-ease);
}
.btn-sc-warm:hover {
    background: linear-gradient(180deg, var(--sc-accent-warm-hover), var(--sc-accent-warm));
    border-color: var(--sc-accent-warm-hover);
    color: #2a0d04;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .32),
        0 2px 0 rgba(0, 0, 0, .28),
        0 0 30px var(--sc-glow-warm);
    transform: translateY(-1px);
}
.btn-sc-warm:active { transform: translateY(0); }
.btn-sc-warm:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 149, 104, .4);
}

/* ---------- Hero: duo variant -------------------------------- */
.sc-hero--duo {
    padding: 5.5rem 0 4rem;
}
.sc-hero--duo .sc-hero-inner {
    position: relative;
    z-index: 1;
}

.sc-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--sc-font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sc-fg-dim);
    padding: .4rem .85rem;
    border: 1px solid var(--sc-border);
    background: rgba(16, 20, 29, .65);
    border-radius: var(--sc-r-pill);
    margin-bottom: 1.4rem;
    backdrop-filter: blur(8px);
}
.sc-hero-eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sc-accent);
    box-shadow: 0 0 10px var(--sc-accent), 0 0 4px rgba(92,176,255,.9);
    animation: sc-pulse-dot 2.6s ease-in-out infinite;
}
.sc-hero-eyebrow-x {
    color: var(--sc-accent-warm);
    font-family: var(--sc-font-display);
    font-size: .95rem;
    line-height: 1;
    letter-spacing: 0;
    margin: 0 .15rem;
    position: relative;
    top: -1px;
}
@keyframes sc-pulse-dot {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .45; transform: scale(.78); }
}

.sc-hero-headline {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: 0 0 1.1rem;
}
.sc-hero--duo h1 {
    font-size: clamp(2.6rem, 5.8vw, 4.2rem);
    line-height: 1;
    margin: 0;
}
.sc-hero--duo .sc-hero-icon {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 0 24px rgba(92,176,255,.55))
            drop-shadow(0 0 50px rgba(156,127,255,.18));
}

.sc-hero-lead {
    max-width: 720px;
    margin-bottom: 2.5rem;
    color: var(--sc-fg);
    font-size: 1.22rem;
    line-height: 1.55;
}

/* ---------- Hero actions: dual CTA bench --------------------- */
.sc-hero-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 1.4rem;
    padding: 1.6rem 1.6rem;
    background:
        linear-gradient(180deg, rgba(22, 27, 39, .72), rgba(16, 20, 29, .82));
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-xl);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 18px 60px rgba(0, 0, 0, .45);
    max-width: 920px;
    position: relative;
    overflow: hidden;
}
.sc-hero-actions::before {
    /* Two halos bleed in from each edge so the surface itself
       hints at the dual-personality split. */
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(380px 220px at 0% 50%, rgba(92, 176, 255, .14), transparent 70%),
        radial-gradient(380px 220px at 100% 50%, rgba(255, 149, 104, .12), transparent 70%);
}
.sc-hero-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
    min-width: 0;
}
.sc-hero-action-label {
    font-family: var(--sc-font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sc-fg-muted);
}
.sc-hero-action--app .sc-hero-action-label::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--sc-accent);
    border-radius: 2px;
    margin-right: .55rem;
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(92,176,255,.65);
}
.sc-hero-action--social .sc-hero-action-label::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--sc-accent-warm);
    border-radius: 50%;
    margin-right: .55rem;
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(255,149,104,.65);
}
.sc-hero-cta {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.02rem;
    padding-block: .8rem;
}
.sc-hero-cta-glyph {
    font-family: var(--sc-font-display);
    font-size: 1.05rem;
    line-height: 1;
    position: relative;
    top: -1px;
}
.sc-hero-sublinks {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--sc-fg-muted);
}
.sc-hero-sublinks a {
    color: var(--sc-fg-dim);
    border-bottom: 1px dotted transparent;
}
.sc-hero-sublinks a:hover {
    color: var(--sc-fg);
    text-decoration: none;
    border-bottom-color: var(--sc-fg-muted);
}

.sc-hero-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    color: var(--sc-fg-muted);
    align-self: stretch;
    justify-content: center;
}
.sc-hero-divider-line {
    flex: 1;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--sc-border-strong), transparent);
    min-height: 18px;
}
.sc-hero-divider-glyph {
    font-family: var(--sc-font-mono);
    font-size: 1rem;
    line-height: 1;
    color: var(--sc-fg-dim);
    opacity: .8;
}

.sc-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-top: 1.4rem;
    font-family: var(--sc-font-mono);
    font-size: .78rem;
    color: var(--sc-fg-muted);
}
.sc-hero-meta-chip {
    display: inline-block;
    padding: .12rem .55rem;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-pill);
    background: var(--sc-bg-elev);
    color: var(--sc-fg-dim);
    font-weight: 600;
    letter-spacing: .04em;
}
.sc-hero-meta code {
    font-family: var(--sc-font-mono);
    background: transparent;
    color: var(--sc-fg-dim);
    border: 0;
    padding: 0;
    word-break: break-all;
}

@media (max-width: 720px) {
    .sc-hero--duo { padding-top: 4.25rem; }
    .sc-hero-actions {
        grid-template-columns: 1fr;
        padding: 1.2rem;
    }
    .sc-hero-divider {
        flex-direction: row;
        height: 18px;
    }
    .sc-hero-divider-line { height: 1px; width: auto; min-height: 0; min-width: 22px; background: linear-gradient(90deg, transparent, var(--sc-border-strong), transparent); }
    .sc-hero-headline { gap: .85rem; }
    .sc-hero--duo .sc-hero-icon { width: 56px; height: 56px; }
}

/* ---------- Duo split panel --------------------------------- */
.sc-duo-wrap { max-width: 1180px; }
.sc-duo-header {
    text-align: center;
    margin-bottom: 1.8rem;
}
.sc-duo-header .sc-eyebrow {
    display: inline-block;
    margin: 0 0 .35rem;
}
.sc-duo-h2 {
    font-family: var(--sc-font-display);
    font-weight: 600;
    letter-spacing: -.018em;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin: 0;
    color: var(--sc-fg);
}

.sc-duo {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-xl);
    overflow: hidden;
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 14px 50px rgba(0, 0, 0, .4);
}
.sc-duo::before {
    /* The vertical seam between the two panels — the horizon
       motif turned 90°. */
    content: '';
    position: absolute;
    top: 8%; bottom: 8%;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent,
        var(--sc-border) 12%,
        var(--sc-border-strong) 50%,
        var(--sc-border) 88%,
        transparent);
    pointer-events: none;
}
.sc-duo-panel {
    position: relative;
    padding: 2.2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    isolation: isolate;
}
.sc-duo-panel::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: -1;
}
.sc-duo-panel--app::before {
    background:
        radial-gradient(500px 280px at 10% -10%, rgba(92, 176, 255, .18), transparent 65%),
        radial-gradient(360px 200px at 90% 110%, rgba(92, 176, 255, .06), transparent 70%);
}
.sc-duo-panel--social::before {
    background:
        radial-gradient(500px 280px at 90% -10%, rgba(255, 149, 104, .16), transparent 65%),
        radial-gradient(360px 200px at 10% 110%, rgba(156, 127, 255, .06), transparent 70%);
}

.sc-duo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(92,176,255,.18), rgba(92,176,255,.05));
    border: 1px solid rgba(92,176,255,.35);
    color: var(--sc-accent);
    box-shadow: 0 0 22px rgba(92,176,255,.18);
}
.sc-duo-icon--warm {
    background: linear-gradient(180deg, rgba(255,149,104,.18), rgba(255,149,104,.05));
    border-color: rgba(255,149,104,.38);
    color: var(--sc-accent-warm);
    box-shadow: 0 0 22px rgba(255,149,104,.18);
}

.sc-duo-tag {
    font-family: var(--sc-font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sc-accent);
    margin-top: .15rem;
}
.sc-duo-tag--warm { color: var(--sc-accent-warm); }

.sc-duo-title {
    font-family: var(--sc-font-display);
    font-weight: 600;
    font-size: 1.7rem;
    letter-spacing: -.018em;
    line-height: 1.1;
    color: var(--sc-fg);
    margin: 0 0 .15rem;
    font-variation-settings: 'opsz' 96, 'SOFT' 40;
}
.sc-duo-body {
    color: var(--sc-fg-dim);
    line-height: 1.6;
    font-size: 1.02rem;
    margin: 0 0 .5rem;
}

.sc-duo-list {
    list-style: none;
    padding: 0;
    margin: .25rem 0 .9rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.sc-duo-list li {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    color: var(--sc-fg);
    font-size: .95rem;
    line-height: 1.45;
}
.sc-duo-list-dot {
    flex: 0 0 auto;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-top: .5em;
    transform: translateY(-.2em);
    background: var(--sc-fg-muted);
}
.sc-duo-list-dot--blue { background: var(--sc-accent); box-shadow: 0 0 8px rgba(92,176,255,.55); }
.sc-duo-list-dot--warm { background: var(--sc-accent-warm); box-shadow: 0 0 8px rgba(255,149,104,.55); }

.sc-duo-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    align-self: flex-start;
    color: var(--sc-accent);
    font-weight: 600;
    font-size: .95rem;
    padding: .45rem 0;
    border-bottom: 1px solid transparent;
    transition: gap .2s var(--sc-ease), border-color .2s var(--sc-ease);
}
.sc-duo-link:hover {
    text-decoration: none;
    gap: .55rem;
    border-bottom-color: currentColor;
}
.sc-duo-link--warm { color: var(--sc-accent-warm); }

@media (max-width: 820px) {
    .sc-duo { grid-template-columns: 1fr; }
    .sc-duo::before {
        top: auto; bottom: auto;
        left: 8%; right: 8%;
        top: 50%;
        height: 1px; width: auto;
        background: linear-gradient(90deg,
            transparent,
            var(--sc-border) 12%,
            var(--sc-border-strong) 50%,
            var(--sc-border) 88%,
            transparent);
    }
}

/* ---------- Community pulse strip --------------------------- */
.sc-pulse-wrap { max-width: 1180px; }
.sc-pulse-header {
    text-align: center;
    margin-bottom: 1.8rem;
}
.sc-pulse-header .sc-eyebrow {
    display: inline-block;
    margin: 0 0 .35rem;
}
.sc-pulse-h2 {
    font-family: var(--sc-font-display);
    font-weight: 600;
    letter-spacing: -.018em;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin: 0 0 .55rem;
    color: var(--sc-fg);
}
.sc-pulse-sub { max-width: 620px; margin: 0 auto; }

.sc-pulse-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 1.4rem;
    position: relative;
}
.sc-pulse-card {
    background: linear-gradient(180deg, var(--sc-surface), var(--sc-bg-elev));
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 6px 24px rgba(0, 0, 0, .35);
    transition: transform .25s var(--sc-ease), border-color .18s var(--sc-ease), box-shadow .25s var(--sc-ease);
}
.sc-pulse-card:hover {
    transform: translateY(-3px);
    border-color: var(--sc-border-strong);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 12px 36px rgba(0, 0, 0, .5);
}

.sc-pulse-thumb {
    position: relative;
    height: 170px;
    background: #0a0d16;
    overflow: hidden;
    border-bottom: 1px solid var(--sc-border);
}
.sc-pulse-thumb::before {
    /* Sparse starfield over every thumb. */
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.6), transparent 50%),
        radial-gradient(1px 1px at 38% 64%, rgba(255,255,255,.4), transparent 50%),
        radial-gradient(2px 2px at 72% 30%, rgba(255,255,255,.7), transparent 50%),
        radial-gradient(1px 1px at 86% 78%, rgba(255,255,255,.5), transparent 50%),
        radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,.35), transparent 50%),
        radial-gradient(1px 1px at 56% 14%, rgba(255,255,255,.45), transparent 50%);
}
.sc-pulse-thumb-tag {
    position: absolute;
    left: .7rem; bottom: .7rem;
    z-index: 2;
    font-family: var(--sc-font-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: .22rem .55rem;
    background: rgba(10, 13, 22, .72);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--sc-r-pill);
    color: var(--sc-fg);
    backdrop-filter: blur(6px);
}

/* Three hand-composed deep-sky thumbnails, all pure CSS. */
.sc-pulse-thumb--nebula {
    background:
        radial-gradient(220px 140px at 32% 58%, rgba(255, 149, 104, .65), transparent 65%),
        radial-gradient(170px 110px at 58% 42%, rgba(156, 127, 255, .55), transparent 70%),
        radial-gradient(260px 180px at 50% 50%, rgba(92, 176, 255, .18), transparent 75%),
        linear-gradient(135deg, #0a0d16 0%, #16142a 100%);
}
.sc-pulse-thumb--cluster {
    background:
        radial-gradient(2px 2px at 30% 40%, #c8d6ff, transparent 60%),
        radial-gradient(3px 3px at 42% 52%, #ffffff, transparent 65%),
        radial-gradient(2px 2px at 55% 38%, #aac4ff, transparent 60%),
        radial-gradient(2px 2px at 48% 60%, #d4dfff, transparent 60%),
        radial-gradient(2px 2px at 60% 50%, #ffffff, transparent 65%),
        radial-gradient(4px 4px at 36% 48%, #ffffff, transparent 55%),
        radial-gradient(300px 200px at 45% 50%, rgba(92, 176, 255, .25), transparent 60%),
        linear-gradient(135deg, #0a1424 0%, #0f1a30 100%);
}
.sc-pulse-thumb--moon {
    background:
        radial-gradient(240px 240px at 38% 50%, #f5ead0 0%, #d9c896 38%, transparent 39%),
        radial-gradient(60px 60px at 42% 38%, rgba(0,0,0,.15), transparent 60%),
        radial-gradient(40px 40px at 30% 56%, rgba(0,0,0,.18), transparent 60%),
        radial-gradient(35px 35px at 48% 62%, rgba(0,0,0,.12), transparent 60%),
        radial-gradient(340px 240px at 38% 50%, rgba(0,0,0,.55) 35%, transparent 38%),
        linear-gradient(135deg, #06080f 0%, #0b1020 100%);
}

.sc-pulse-card-body {
    padding: .95rem 1.05rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: 1;
}
.sc-pulse-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
}
.sc-pulse-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--av, var(--sc-accent));
    color: #0a0d16;
    font-family: var(--sc-font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.18);
}
.sc-pulse-handle {
    font-family: var(--sc-font-mono);
    font-size: .82rem;
    color: var(--sc-fg);
    font-weight: 500;
}
.sc-pulse-time {
    font-family: var(--sc-font-mono);
    font-size: .78rem;
    color: var(--sc-fg-muted);
}
.sc-pulse-body {
    color: var(--sc-fg-dim);
    line-height: 1.5;
    font-size: .93rem;
    margin: 0;
}
.sc-pulse-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .55rem;
    border-top: 1px solid var(--sc-border);
}
.sc-pulse-chip {
    font-family: var(--sc-font-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .15rem .55rem;
    border-radius: var(--sc-r-pill);
    color: var(--sc-accent);
    border: 1px solid rgba(92, 176, 255, .35);
    background: rgba(92, 176, 255, .08);
}
.sc-pulse-chip--warm { color: var(--sc-accent-warm); border-color: rgba(255, 149, 104, .35); background: rgba(255, 149, 104, .08); }
.sc-pulse-chip--violet { color: var(--sc-accent-violet); border-color: rgba(156, 127, 255, .38); background: rgba(156, 127, 255, .08); }
.sc-pulse-foot-meta {
    font-family: var(--sc-font-mono);
    font-size: .78rem;
    color: var(--sc-fg-muted);
}

.sc-pulse-cta {
    margin-top: 1.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
}

@media (max-width: 880px) {
    .sc-pulse-grid { grid-template-columns: 1fr; }
}

/* ---------- Feature catalogue (split into two) -------------- */
.sc-feature-section { max-width: 1180px; }
.sc-feature-header {
    margin-bottom: 1.4rem;
}
.sc-feature-header .sc-eyebrow {
    display: inline-block;
    margin-bottom: .35rem;
}
.sc-feature-h2 {
    font-family: var(--sc-font-display);
    font-weight: 600;
    letter-spacing: -.018em;
    font-size: clamp(1.55rem, 2.8vw, 1.95rem);
    margin: 0;
    color: var(--sc-fg);
    max-width: 720px;
    font-variation-settings: 'opsz' 90, 'SOFT' 40;
}

.sc-eyebrow--blue { color: var(--sc-accent); }
.sc-eyebrow--warm { color: var(--sc-accent-warm); }

.sc-card--feature {
    position: relative;
    padding: 1.45rem 1.4rem 1.35rem;
    overflow: hidden;
}
.sc-card--feature::after {
    /* A faint hairline along the top edge that lights up on
       hover. The whole card stays calm; only the hairline acts. */
    content: '';
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sc-accent), transparent);
    opacity: 0;
    transition: opacity .25s var(--sc-ease);
}
.sc-card--feature:hover::after { opacity: .65; }
.sc-card--social.sc-card--feature::after {
    background: linear-gradient(90deg, transparent, var(--sc-accent-warm), transparent);
}
.sc-card-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    margin-bottom: .55rem;
    border-radius: 8px;
    background: rgba(92, 176, 255, .10);
    color: var(--sc-accent);
    font-family: var(--sc-font-display);
    font-size: 1.05rem;
    line-height: 1;
    border: 1px solid rgba(92, 176, 255, .25);
}
.sc-card-glyph--warm {
    background: rgba(255, 149, 104, .10);
    color: var(--sc-accent-warm);
    border-color: rgba(255, 149, 104, .28);
}
.sc-card--feature h4 {
    font-family: var(--sc-font-display);
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: -.012em;
    margin: 0 0 .45rem;
    color: var(--sc-fg);
}

/* ---------- Closing CTA strip ------------------------------- */
.sc-closer {
    margin-top: 4rem;
    padding: 4.5rem 0 4rem;
    position: relative;
    border-top: 1px solid var(--sc-border);
    border-bottom: 1px solid var(--sc-border);
    background:
        radial-gradient(800px 320px at 20% 30%, rgba(92, 176, 255, .18), transparent 60%),
        radial-gradient(700px 320px at 80% 70%, rgba(255, 149, 104, .14), transparent 60%),
        linear-gradient(180deg, var(--sc-bg-elev), var(--sc-bg));
    overflow: hidden;
}
.sc-closer-inner {
    position: relative;
    text-align: center;
    z-index: 1;
}
.sc-closer-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,.45), transparent 50%),
        radial-gradient(1px 1px at 28% 75%, rgba(255,255,255,.35), transparent 50%),
        radial-gradient(2px 2px at 48% 30%, rgba(255,255,255,.55), transparent 50%),
        radial-gradient(1px 1px at 65% 65%, rgba(255,255,255,.35), transparent 50%),
        radial-gradient(1px 1px at 82% 22%, rgba(255,255,255,.5), transparent 50%),
        radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,.4), transparent 50%);
    opacity: .9;
}
.sc-closer-h2 {
    font-family: var(--sc-font-display);
    font-weight: 600;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    letter-spacing: -.02em;
    margin: 0 0 .55rem;
    color: var(--sc-fg);
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.sc-closer-sub {
    color: var(--sc-fg-dim);
    max-width: 580px;
    margin: 0 auto 1.7rem;
    font-size: 1.05rem;
    line-height: 1.55;
}
.sc-closer-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1.1rem;
}
.sc-closer-sublinks {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .88rem;
}
.sc-closer-sublinks a {
    color: var(--sc-fg-dim);
    border-bottom: 1px dotted transparent;
}
.sc-closer-sublinks a:hover {
    color: var(--sc-fg);
    text-decoration: none;
    border-bottom-color: var(--sc-fg-muted);
}

/* ============================================================
   Lightbox
   ============================================================ */
.sc-lightbox-open { overflow: hidden; }
.sc-lightbox {
    position: fixed; inset: 0; z-index: 2000;
    background: radial-gradient(circle at center, rgba(8, 10, 18, .96), rgba(0, 0, 0, .99));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.sc-lightbox[hidden] { display: none; }
.sc-lightbox-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    cursor: zoom-out;
}
.sc-lightbox-image {
    max-width: 95vw;
    max-height: 92vh;
    object-fit: contain;
    cursor: default;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, .65),
        0 0 90px rgba(92, 176, 255, .08);
    background: var(--sc-bg);
    border-radius: var(--sc-r-sm);
}
.sc-lightbox-btn {
    position: absolute;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background .15s var(--sc-ease),
        transform .15s var(--sc-ease),
        border-color .15s var(--sc-ease);
    padding: 0;
}
.sc-lightbox-btn:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .18);
}
.sc-lightbox-btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.sc-lightbox-btn[hidden] { display: none; }
.sc-lightbox-btn svg { display: block; }
.sc-lightbox-close { top: 1rem; right: 1rem; }
.sc-lightbox-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.sc-lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.sc-lightbox-prev:hover,
.sc-lightbox-next:hover { transform: translateY(-50%) scale(1.08); }
.sc-lightbox-counter {
    position: absolute;
    top: 1rem; left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 13, 20, .65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: .32rem .85rem;
    border-radius: var(--sc-r-pill);
    font-size: .8rem;
    font-family: var(--sc-font-mono);
    font-variant-numeric: tabular-nums;
    border: 1px solid rgba(255, 255, 255, .08);
}
.sc-lightbox-counter[hidden] { display: none; }
.sc-lightbox-caption {
    position: absolute;
    bottom: 1.25rem; left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 13, 20, .78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
    padding: .6rem 1.1rem;
    border-radius: var(--sc-r-md);
    max-width: 90vw;
    font-size: .92rem;
    line-height: 1.45;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .08);
}
.sc-lightbox-caption[hidden] { display: none; }
@media (max-width: 540px) {
    .sc-lightbox-btn { width: 40px; height: 40px; }
    .sc-lightbox-close { top: .5rem; right: .5rem; }
    .sc-lightbox-prev  { left: .5rem; }
    .sc-lightbox-next  { right: .5rem; }
}

/* ============================================================
   Image stage on post detail (plate-solve overlay toggle)
   ============================================================ */
.sc-image-stage { position: relative; }
.sc-image-overlay-toggle {
    transition: all .18s var(--sc-ease);
    font-size: .78rem !important;
    letter-spacing: .04em;
    font-weight: 600;
}
.sc-image-overlay-toggle[aria-pressed="true"] {
    background: linear-gradient(180deg, rgba(156, 127, 255, .22), rgba(156, 127, 255, .08));
    color: #f0eaff;
    border-color: rgba(156, 127, 255, .55);
    box-shadow: 0 0 18px rgba(156, 127, 255, .22);
}

/* ============================================================
   Page-load entrance — one-shot, no auto-replay on hover etc.
   The composer and the first feed cards fade in subtly.
   ============================================================ */
@keyframes sc-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.sc-feed > * { animation: sc-rise .55s var(--sc-ease-out) both; }
.sc-feed > *:nth-child(1) { animation-delay:   0ms; }
.sc-feed > *:nth-child(2) { animation-delay:  60ms; }
.sc-feed > *:nth-child(3) { animation-delay: 110ms; }
.sc-feed > *:nth-child(4) { animation-delay: 160ms; }
.sc-feed > *:nth-child(5) { animation-delay: 200ms; }
.sc-feed > *:nth-child(6) { animation-delay: 230ms; }
.sc-feed > *:nth-child(7) { animation-delay: 250ms; }

@media (prefers-reduced-motion: reduce) {
    .sc-feed > * { animation: none; }
    .sc-navbar .nav-link::after,
    .btn, .sc-feed-tab, .sc-feed-card,
    .sc-composer, .sc-action,
    .sc-lightbox-btn { transition: none; }
}