/* =========================================================================
   Wrld — Threads-style design system
   White surfaces, hairline dividers, handle-first posts, icon-only actions,
   black primary buttons; orange only for links, hashtags, the verified mark
   and the primary "Create" action.
   ========================================================================= */

:root {
    /* Light mode (the handoff's final values) */
    --bg:           #ffffff;   /* surface */
    --bg-page:      #fafafa;   /* desktop page background */
    --bg-elev:      #fafafa;   /* kept for older pages */
    --bg-hover:     #f2f2f2;   /* hover fill / chips */
    --bg-active:    #efefef;   /* active nav fill */
    --chip:         #f2f2f2;
    --border:       #e5e5e5;   /* hairline divider */
    --border-soft:  #efefef;   /* inner list divider */
    --border-card:  #d9d9d9;   /* card / ghost-button border */
    --text:         #000000;   /* ink */
    --text-soft:    #555555;   /* inactive nav label */
    --text-muted:   #999999;   /* secondary */
    --text-faint:   #b3b3b3;   /* inactive icon */
    --accent:       #ff6a1a;
    --accent-hover: #e85d12;
    --accent-soft:  rgba(255,106,26,0.10);
    --accent-ring:  rgba(255,106,26,0.35);
    --verified:     #ff6a1a;
    --agg:          #8b5cf6;
    --danger:       #e0245e;
    --scrim:        rgba(0,0,0,0.5);
    --shadow-card:  0 1px 2px rgba(0,0,0,0.04);
    --shadow-pop:   0 8px 24px rgba(0,0,0,0.12);
    --hair:         0.5px;

    --rail-left:    260px;
    --rail-right:   360px;
    --col-main:     640px;
    --mobile-header: 52px;
}

.dark {
    --bg:           #0a0a0a;
    --bg-page:      #000000;
    --bg-elev:      #121212;
    --bg-hover:     #1a1a1a;
    --bg-active:    #1f1f1f;
    --chip:         #1a1a1a;
    --border:       #262626;
    --border-soft:  #1c1c1c;
    --border-card:  #333333;
    --text:         #f5f5f5;
    --text-soft:    #bdbdbd;
    --text-muted:   #8a8a8a;
    --text-faint:   #5c5c5c;
    --accent:       #ff6a1a;
    --accent-hover: #ff7d38;
    --accent-soft:  rgba(255,106,26,0.16);
    --accent-ring:  rgba(255,106,26,0.45);
    --scrim:        rgba(0,0,0,0.65);
    --shadow-card:  0 1px 2px rgba(0,0,0,0.6);
    --shadow-pop:   0 8px 24px rgba(0,0,0,0.5);
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

html, body {
    background: var(--bg-page);
    color: var(--text);
    font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 1023px) {
    html, body { background: var(--bg); }
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.font-mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.font-serif,
.title-serif { font-family: 'Instrument Sans', sans-serif; letter-spacing: -0.02em; }

/* Stroke icons from src/icons.php */
.wi { display: block; flex-shrink: 0; }

/* Scrollbar */
::-webkit-scrollbar          { width: 10px; height: 10px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--border); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* -------------------------------------------------------------------------
   Layout shell — left nav / centered white column / right sidebar
   ------------------------------------------------------------------------- */

.app-shell {
    min-height: 100vh;
    padding-left: var(--rail-left);
    padding-right: 0;
}
@media (min-width: 1200px) {
    .app-shell { padding-right: var(--rail-right); }
}
@media (max-width: 1023px) {
    .app-shell { padding-left: 0; padding-top: var(--mobile-header); }
}

/* Center column — white panel with rounded top corners on desktop */
.center-col {
    position: relative;
    width: 100%;
    max-width: var(--col-main);
    margin: 24px auto 0;
    min-height: calc(100vh - 24px);
    background: var(--bg);
    border: var(--hair) solid var(--border);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
}
.center-col > :first-child { border-radius: 22px 22px 0 0; }
@media (max-width: 1023px) {
    .center-col {
        margin: 0;
        min-height: calc(100vh - var(--mobile-header));
        border: 0;
        border-radius: 0;
        padding-bottom: 88px;
    }
    .center-col > :first-child { border-radius: 0; }
}

/* -------------------------------------------------------------------------
   Left rail (desktop nav) + mobile drawer — one markup, two layouts
   ------------------------------------------------------------------------- */

.left-rail {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--rail-left);
    height: 100vh;
    height: 100dvh;
    padding: 22px 20px 24px 28px;
    display: flex;
    flex-direction: column;
    background: transparent;
    overflow-y: auto;
    z-index: 30;
    box-sizing: border-box;
}
.left-rail::-webkit-scrollbar { display: none; }

/* desktop-only / mobile-only children */
@media (min-width: 1024px) { .m-only { display: none !important; } }
@media (max-width: 1023px) { .d-only { display: none !important; } }

/* Brand row */
.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    color: var(--text);
    border-radius: 12px;
}
.brand-link img { width: 30px; height: 30px; display: block; }
.brand-word {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}
.brand-beta {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-top: 2px;
    align-self: flex-start;
}

/* Nav items */
.nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 30px;
}
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 12px;
    border-radius: 12px;
    color: var(--text-soft);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
}
.nav-item .wi { color: var(--text-muted); transition: color 0.12s; }
.nav-item:hover         { background: var(--bg-hover); color: var(--text); }
.nav-item:hover .wi     { color: var(--text); }
.nav-item.active        { background: var(--bg-active); color: var(--text); font-weight: 600; }
.nav-item.active .wi    { color: var(--text); }
.nav-item .nav-label    { flex: 1; min-width: 0; }

.nav-dot {
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.nav-badge {
    margin-left: auto;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
}

/* Rows that hold a <select> (country, language) — the select covers the row */
.nav-select { position: relative; }
.nav-select select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font: inherit;
}
.nav-select .nav-value {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    color: var(--text-muted);
    white-space: nowrap;
}
.nav-select:focus-within { box-shadow: 0 0 0 2px var(--accent-ring); }
.nav-select.is-override .nav-value { color: var(--accent); }
.nav-country-reset {
    position: relative;
    z-index: 1;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}
.nav-country-reset:hover { color: var(--accent); }

/* Bottom group: directory / settings */
.nav-bottom {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
}
.nav-bottom .nav-item { padding: 9px 12px; font-size: 15px; }

/* Create CTA */
.btn-create {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    margin-top: 18px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.12s;
    box-sizing: border-box;
}
.btn-create:hover { background: var(--accent-hover); color: #fff; }

/* Account row + submenu */
.user-menu {
    position: relative;
    margin-top: 6px;
    border-top: var(--hair) solid var(--border);
    padding-top: 8px;
}
.user-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: background 0.12s;
}
.user-chip:hover     { background: var(--bg-hover); }
.user-chip .meta     { line-height: 1.25; min-width: 0; flex: 1; }
.user-chip .name     { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .handle   { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip-caret     { color: var(--text-muted); flex-shrink: 0; }

.user-submenu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 4px);
    background: var(--bg);
    border: var(--hair) solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    padding: 4px;
    display: none;
    z-index: 50;
}
.user-menu.open .user-submenu { display: block; }
.user-submenu a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
}
.user-submenu a:hover { background: var(--bg-hover); }

/* ---- Mobile drawer ---------------------------------------------------- */
@media (max-width: 1023px) {
    .left-rail {
        width: 320px;
        max-width: 86vw;
        padding: 60px 20px 44px;
        padding-top: max(60px, calc(env(safe-area-inset-top) + 36px));
        background: var(--bg);
        border-radius: 0 22px 22px 0;
        box-shadow: 12px 0 40px rgba(0,0,0,0.12);
        z-index: 60;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.24s ease-out, visibility 0s linear 0.24s;
    }
    .left-rail.is-open {
        transform: none;
        visibility: visible;
        transition: transform 0.24s ease-out;
    }
    .nav-list { margin-top: 4px; gap: 0; }
    .nav-item {
        padding: 14px 4px;
        border-radius: 0;
        border-bottom: var(--hair) solid var(--border-soft);
        color: var(--text);
        font-weight: 500;
    }
    .nav-item .wi { color: var(--text); width: 18px; height: 18px; }
    .nav-item:hover, .nav-item.active { background: transparent; font-weight: 500; }
}

.drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 18px;
}
.drawer-top .brand-word { font-size: 20px; }
.drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -11px -11px -11px 0;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    border-radius: 50%;
}
.drawer-close:hover { background: var(--bg-hover); }

.drawer-account {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 4px 18px;
    border-bottom: var(--hair) solid var(--border);
    color: var(--text);
}
.drawer-account .note-avatar { width: 56px; height: 56px; font-size: 18px; }
.drawer-account .meta { flex: 1; min-width: 0; }
.drawer-account .name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-account .handle { font-size: 14px; color: var(--text-muted); margin-top: 1px; }
.drawer-account .wi { color: var(--text-muted); }

.drawer-logout {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding: 16px 4px 4px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-muted);
}
.drawer-logout:hover { color: var(--text); }
.drawer-guest {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
}
.drawer-guest .btn { flex: 1; height: 40px; }

/* Scrim behind the drawer */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    z-index: 55;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease-out, visibility 0s linear 0.24s;
}
.sidebar-overlay.is-visible { opacity: 1; visibility: visible; transition: opacity 0.24s ease-out; }
@media (min-width: 1024px) { .sidebar-overlay { display: none !important; } }

/* -------------------------------------------------------------------------
   Mobile header + bottom bar
   ------------------------------------------------------------------------- */

.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mobile-header);
    padding: 0 6px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 50;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 1023px) { .mobile-header { display: flex; } }
.mobile-header .icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
}
.mobile-header .icon-btn:hover { background: var(--bg-hover); }
.mobile-header .brand-word {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: var(--text);
}

/* Bottom bar — four icon-only items, 48px hit targets */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    justify-content: space-around;
    align-items: center;
    padding: 6px 12px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: var(--hair) solid var(--border);
    z-index: 40;
}
@media (max-width: 1023px) { .bottom-nav { display: flex; } }
.bottom-nav a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--text-faint);
    border-radius: 12px;
}
.bottom-nav a.active { color: var(--text); }
.bottom-nav a:active { background: var(--bg-hover); }
.bottom-nav .nav-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
}

/* Sticky signup/login footer — mobile only, shown to logged-out visitors */
.guest-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: var(--hair) solid var(--border);
    z-index: 40;
}
.guest-bar .btn { flex: 1; height: 42px; font-size: 15px; }
@media (min-width: 1024px) { .guest-bar { display: none; } }

/* Legacy FAB (no longer rendered, kept for pages that may still use it) */
.fab { display: none; }

/* Rotating tagline (kept for the About link; no longer in the header) */
.mobile-header-flash { display: none; }

/* -------------------------------------------------------------------------
   Column header (title bar used by secondary pages)
   ------------------------------------------------------------------------- */

.feed-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 20px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--hair) solid var(--border);
    box-sizing: border-box;
}
@media (max-width: 1023px) {
    .feed-header { top: var(--mobile-header); padding: 0 16px; }
}
.feed-header h1, .feed-header h2 {
    font-size: 17px;
    font-weight: 600;
    padding: 0;
    margin: 0;
    line-height: 1.3;
}
.feed-header--with-flash { display: none; }
.feed-header .icon-btn,
.feed-header > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: -8px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
}
.feed-header .icon-btn:hover,
.feed-header > a:hover { background: var(--bg-hover); }
.feed-header .spacer { flex: 1; }

/* Simple tab row (directory etc.) */
.feed-tabs {
    display: flex;
    gap: 24px;
    padding: 0;
}
.feed-tab {
    padding: 10px 0;
    margin-bottom: calc(-1 * var(--hair));
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1.5px solid transparent;
    transition: color 0.12s, border-color 0.12s;
}
.feed-tab:hover    { color: var(--text); }
.feed-tab.is-active {
    color: var(--text);
    border-bottom-color: var(--text);
}

/* -------------------------------------------------------------------------
   Feed selector — text tabs left, Top / All text toggle right
   ------------------------------------------------------------------------- */

.feed-switch-wrap {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    border-bottom: var(--hair) solid var(--border);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 1023px) {
    .feed-switch-wrap { top: var(--mobile-header); padding: 0 16px; gap: 12px; }
}

.feed-src {
    display: flex;
    align-items: stretch;
    gap: 22px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.feed-src::-webkit-scrollbar { display: none; }
.feed-src__tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 14px 0 12px;
    margin: 0 0 calc(-1 * var(--hair));
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-muted);
    border-bottom: 1.5px solid transparent;
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
}
.feed-src__tab:hover { color: var(--text); }
.feed-src__tab.is-active {
    color: var(--text);
    border-bottom-color: var(--text);
}
.feed-src__tab .wi { color: var(--accent); }
.feed-src__tab .feed-src__chev { color: var(--text-muted); }
.feed-src__country { position: relative; cursor: pointer; }
.feed-src__country select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font: inherit;
}
.feed-src__country:focus-within { color: var(--text); }
.feed-src__icon { display: none; }
@media (max-width: 1023px) {
    .feed-src { gap: 18px; }
    .feed-src__tab { font-size: 15px; padding: 12px 0 10px; }
    /* Collapsed pickers: show an icon instead of the label until one is chosen */
    .feed-src__country:not(.is-active) .feed-src__country-label { display: none; }
    .feed-src__country:not(.is-active) .feed-src__icon { display: block; color: var(--text-muted); }
}

.feed-switch {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex-shrink: 0;
}
.feed-switch__opt {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color 0.12s;
}
.feed-switch__opt:hover { color: var(--text); }
.feed-switch__opt.is-active { color: var(--text); font-weight: 600; }

/* -------------------------------------------------------------------------
   Compose
   ------------------------------------------------------------------------- */

.compose {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: var(--hair) solid var(--border);
    background: var(--bg);
}
@media (max-width: 1023px) { .compose { padding: 14px 16px; } }
.compose .note-avatar { width: 36px; height: 36px; font-size: 13px; }
.compose form { flex: 1; min-width: 0; }
.compose textarea {
    display: block;
    width: 100%;
    background: transparent;
    color: var(--text);
    border: 0;
    border-radius: 0;
    padding: 8px 0;
    font-size: 15px;
    line-height: 21px;
    resize: none;
    box-sizing: border-box;
    outline: none;
}
.compose textarea::placeholder { color: var(--text-muted); }
.compose textarea:focus { outline: none; }

/* Inline composer in the feed: one quiet row until it gets focus.
   On mobile the feed has no composer (the bottom bar's plus opens /create). */
.compose--inline { align-items: flex-start; }
@media (max-width: 1023px) { .compose--feed { display: none; } }
.compose--inline .compose-row { display: flex; align-items: flex-start; gap: 12px; }
.compose--inline .compose-row textarea { flex: 1; min-height: 36px; padding: 7px 0; }
.compose--inline .compose-tools { display: none; }
.compose--inline.is-active .compose-tools { display: flex; }
.compose-submit {
    flex-shrink: 0;
    height: 36px;
    padding: 0 16px;
    border-radius: 10px;
    border: var(--hair) solid var(--border-card);
    background: transparent;
    color: var(--text-faint);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.compose-submit.is-ready { color: var(--text); border-color: var(--text); }
.compose-submit.is-ready:hover { background: var(--text); color: var(--bg); }

.compose-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.compose-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--text-muted);
}
.compose-tools label,
.compose-tools button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.compose-tools label:hover,
.compose-tools button:hover { background: var(--bg-hover); color: var(--text); }

.compose-link-remove {
    position: absolute; top: 8px; right: 8px;
    width: 26px; height: 26px; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, 0.6); color: #fff;
    font-size: 18px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.compose-link-remove:hover { background: rgba(0, 0, 0, 0.8); }
.emoji-tool { position: relative; display: flex; align-items: center; }
.emoji-panel {
    position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 40;
    width: 280px; max-height: 220px; overflow-y: auto;
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
    padding: 8px; background: var(--bg); border: var(--hair) solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow-pop);
}
.emoji-item {
    background: none; border: 0; cursor: pointer; border-radius: 6px;
    font-size: 20px; line-height: 1; padding: 4px;
}
.emoji-item:hover { background: var(--bg-hover); }

/* -------------------------------------------------------------------------
   Post ("note") — handle-first header, icon-only action row
   ------------------------------------------------------------------------- */

.note-item {
    position: relative;
    padding: 14px 20px 16px;
    border-bottom: var(--hair) solid var(--border);
    cursor: pointer;
}
@media (max-width: 1023px) { .note-item { padding: 12px 16px 14px; } }
.note-item.is-readonly { cursor: default; }

.note-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.note-main { flex: 1; min-width: 0; }

.note-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #d9d6cf;
    color: #55524b;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}
.dark .note-avatar { background: #2a2a2a; color: #cfcfcf; }
.note-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Vertical thread line under the avatar (profile only) */
.profile-feed .note-head { position: relative; }
.profile-feed .note-head::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 44px;
    bottom: 0;
    width: 2px;
    border-radius: 1px;
    background: var(--border);
}

.note-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-muted);
}
.note-meta .name {
    color: var(--text);
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.note-meta .name:hover { text-decoration: underline; }
.note-meta .handle, .note-meta .country, .note-meta .desc { color: var(--text-muted); }
.note-meta .time { color: var(--text-muted); flex-shrink: 0; margin-left: 2px; }
.note-meta .dot { color: var(--text-faint); }

.note-famous-desc {
    font-size: 14px;
    line-height: 18px;
    color: var(--text-muted);
}

.note-body {
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 21px;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    text-wrap: pretty;
}
.note-body a,
.note-embed-body a {
    color: var(--accent);
    text-decoration: none;
}
.note-body a:hover,
.note-embed-body a:hover { text-decoration: underline; }

/* Three-dots menu, inline at the end of the header row */
.note-menu {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
    z-index: 20;
}
.note-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -6px -8px -6px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background 0.1s;
}
.note-menu-btn:hover { background: var(--bg-hover); }
.note-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    width: 200px;
    background: var(--bg);
    border: var(--hair) solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    z-index: 30;
}
.note-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    background: transparent;
    border: 0;
    border-bottom: var(--hair) solid var(--border-soft);
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}
.note-menu-item:last-child { border-bottom: 0; }
.note-menu-item:hover { background: var(--bg-hover); }
.note-menu-item .wi { color: var(--text-muted); }
.note-menu-item-danger { color: var(--danger); }
.note-menu-item-danger .wi { color: var(--danger); }

/* Media */
.note-image {
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: var(--hair) solid var(--border-card);
    background: var(--bg-elev);
}
.note-image img {
    width: 100%;
    max-height: 540px;
    object-fit: cover;
    display: block;
}
.note-video {
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: var(--hair) solid var(--border-card);
    background: #000;
}
.note-video video { width: 100%; max-height: 540px; display: block; }

/* Embedded / quoted note */
.note-embed {
    margin-top: 10px;
    border: var(--hair) solid var(--border-card);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--bg);
    transition: background 0.1s;
}
.note-embed:hover { background: var(--bg-elev); }
.note-embed-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.note-embed-head .avatar { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; background: var(--bg-active); flex-shrink: 0; }
.note-embed-head .name { color: var(--text); font-weight: 600; }
.note-embed-body { margin: 0; font-size: 14px; color: var(--text); line-height: 19px; white-space: pre-wrap; word-break: break-word; }

/* Link card */
.link-card {
    display: block;
    margin-top: 10px;
    border: var(--hair) solid var(--border-card);
    border-radius: 12px;
    overflow: hidden;
    transition: background 0.1s;
}
.link-card:hover { background: var(--bg-elev); }
.link-card .image { width: 100%; height: 260px; overflow: hidden; background: var(--bg-elev); }
@media (max-width: 1023px) { .link-card .image { height: 180px; } }
.link-card .image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-card .body { padding: 10px 12px 12px; }
.link-card .domain { font-size: 12px; color: var(--text-muted); }
.link-card .title { font-size: 14px; font-weight: 600; color: var(--text); line-height: 19px; margin-top: 2px; text-wrap: pretty; }
.link-card .desc { font-size: 13px; color: var(--text-muted); line-height: 1.35; margin-top: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Compact link row (article source) */
.famous-link-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border: var(--hair) solid var(--border-card);
    border-radius: 12px;
    max-width: 100%;
    transition: background 0.1s;
}
.famous-link-card:hover { background: var(--bg-elev); }
.famous-link-card .favicon { width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; }
.famous-link-card .body { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 10px; }
.famous-link-card .title { flex: 1; min-width: 0; font-size: 14px; line-height: 19px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.famous-link-card .domain { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }

/* Verified / source / aggregated badges */
.note-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}
.note-badge svg { width: 100%; height: 100%; }
.note-badge.verified { color: var(--verified); }
.note-badge.source   { color: var(--accent); }
.note-badge.agg      { color: var(--agg); }

/* Action row */
.note-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    margin-left: -8px;
    color: var(--text);
    font-size: 14px;
}
@media (max-width: 1023px) { .note-actions { gap: 16px; } }
.note-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    padding: 0 8px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    font-size: 14px;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}
.note-action .wi { width: 20px; height: 20px; }
.note-action:hover            { background: var(--bg-hover); }
.note-action.is-liked         { color: var(--accent); }
.note-action.is-liked .wi     { fill: currentColor; }
.note-action.is-retweeted     { color: #16a34a; }
.note-action.is-bookmarked .wi { fill: currentColor; }
.note-action--muted           { color: var(--text-muted); }
.note-action--views           { color: var(--text-muted); }
@media (max-width: 1023px) { .note-action--views { display: none; } }
.note-action-wrap { position: relative; }
.note-action-wrap .note-pop {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
    width: 180px;
    background: var(--bg);
    border: var(--hair) solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    z-index: 30;
}
.note-pop form { margin: 0; }
.note-pop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}
.note-pop-item:hover { background: var(--bg-hover); }
.note-pop-item .wi { color: var(--text-muted); }
.note-actions .spacer,
.note-actions form.push { margin-left: auto; }

/* admin debug info: icon, details on hover/focus */
.note-debug { position: relative; display: inline-flex; align-items: center; }
.note-debug-tip {
    display: none;
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 6px;
    min-width: 260px;
    max-width: min(480px, 80vw);
    padding: 10px 12px;
    background: var(--bg);
    color: var(--text);
    border: var(--hair) solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-pop);
    font-size: 14px;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    z-index: 30;
}
.note-debug:hover .note-debug-tip,
.note-debug:focus-within .note-debug-tip { display: block; }

.note-retweet-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-left: 48px;
}

/* Toast (share → copied) */
.wrld-toast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%) translateY(8px);
    padding: 10px 16px;
    background: var(--text);
    color: var(--bg);
    font-size: 14px;
    font-weight: 500;
    border-radius: 999px;
    box-shadow: var(--shadow-pop);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 80;
}
.wrld-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 1024px) { .wrld-toast { bottom: 32px; } }

/* -------------------------------------------------------------------------
   In-feed modules (trending, famous)
   ------------------------------------------------------------------------- */

.feed-module {
    padding: 16px 20px 18px;
    border-bottom: var(--hair) solid var(--border);
}
@media (max-width: 1023px) { .feed-module { padding: 14px 16px 16px; } }
.feed-module-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.feed-module-head .wi { color: var(--accent); }
.feed-module .chip-list { margin-top: 12px; }

/* Chips */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--chip);
    border: var(--hair) solid transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.chip:hover { color: var(--accent); }
.chip--hot {
    font-size: 16px;
    color: var(--accent);
    background: var(--bg);
    border-color: var(--accent);
}
.chip-list--sm .chip { font-size: 13px; font-weight: 500; }
.chip-list--sm .chip--hot { font-size: 13px; }
.chip-list.is-collapsible .chip.is-extra { display: none; }
.chip-list.is-collapsible.is-expanded .chip.is-extra { display: inline-flex; }

/* Legacy hashtag cloud (welcome page) */
.hashtag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hashtag-tag {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--chip);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}
.hashtag-tag:hover { color: var(--accent); }
.hashtag-tag-4 { color: var(--accent); background: var(--bg); border: var(--hair) solid var(--accent); }

/* Famous strip */
.famous-card {
    padding: 16px 20px 18px;
    border-bottom: var(--hair) solid var(--border);
}
@media (max-width: 1023px) { .famous-card { padding: 14px 16px 16px; } }
.famous-card .head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
    font-weight: 600; font-size: 15px;
    color: var(--text);
}
.famous-card .head svg { width: 16px; height: 16px; fill: var(--accent); }
.famous-grid { display: grid; grid-template-columns: repeat(5, 72px); justify-content: start; gap: 12px; }
.famous-cell {
    display: flex; flex-direction: column; align-items: center;
    min-width: 0; gap: 6px;
    text-align: center;
}
.famous-cell .avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-active);
    transition: box-shadow 0.12s;
}
.famous-cell:hover .avatar { box-shadow: 0 0 0 2px var(--accent); }
.famous-cell .avatar img { width: 100%; height: 100%; object-fit: cover; }
.famous-cell .label { font-size: 11px; line-height: 1.2; color: var(--text); }
.famous-more {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-muted);
}
.famous-more:hover { color: var(--accent); }
@media (max-width: 1023px) {
    .famous-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
    }
    .famous-cell .avatar { width: 100%; height: auto; aspect-ratio: 1; }
}

/* -------------------------------------------------------------------------
   Right rail
   ------------------------------------------------------------------------- */

.right-rail {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--rail-right);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 36px 24px 20px;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: none;
}
.right-rail::-webkit-scrollbar { display: none; }
@media (max-width: 1199px) { .right-rail { display: none; } }

.search-input {
    position: relative;
    flex-shrink: 0;
}
.search-input .wi,
.search-input svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
}
.search-input input {
    width: 100%;
    height: 42px;
    background: var(--bg);
    border: var(--hair) solid var(--border);
    color: var(--text);
    border-radius: 12px;
    padding: 0 14px 0 40px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.12s;
}
.search-input input::placeholder { color: var(--text-muted); }
.search-input input:focus { outline: none; border-color: var(--text); }

.rs-card {
    flex-shrink: 0;
    background: var(--bg);
    border: var(--hair) solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
}
.rs-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}
.rs-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.rs-card-link {
    font-size: 13px;
    color: var(--text-muted);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.rs-card-link:hover { color: var(--text); }

.rs-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}
.rs-row:first-of-type { padding-top: 4px; }
.rs-row:last-child { padding-bottom: 0; }
.rs-row .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #d9d6cf;
    color: #55524b;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
}
.dark .rs-row .avatar { background: #2a2a2a; color: #cfcfcf; }
.rs-row .avatar img { width: 100%; height: 100%; object-fit: cover; }
.rs-row .meta { flex: 1; min-width: 0; line-height: 1.25; }
.rs-row .meta .name { display: block; font-weight: 600; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-row .meta .name:hover { text-decoration: underline; }
.rs-row .meta .sub { display: block; font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-row form { margin: 0; flex-shrink: 0; }
.rs-rank {
    width: 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.rs-footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 8px 4px 0;
    font-size: 12px;
    color: var(--text-muted);
}
.rs-footer a:hover { color: var(--text); }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    border: var(--hair) solid transparent;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    font-family: inherit;
}
.btn-primary       { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: var(--text-soft); color: var(--bg); }
.btn-accent        { background: var(--accent); color: #fff; }
.btn-accent:hover  { background: var(--accent-hover); color: #fff; }
.btn-ghost         { background: transparent; color: var(--text); border-color: var(--border-card); }
.btn-ghost:hover   { background: var(--bg-hover); }
.btn-danger        { background: var(--danger); color: #fff; }
.btn-danger:hover  { background: #c01d50; color: #fff; }
.btn-block { width: 100%; }
.btn-lg    { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 12px; }

/* Follow buttons: ghost → black on hover; quiet once following */
.btn-subscribe,
.btn-follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 9px;
    border: var(--hair) solid var(--border-card);
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-subscribe:hover,
.btn-follow:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-followed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 9px;
    border: var(--hair) solid var(--border-card);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.btn-followed:hover { color: var(--text); }
.btn-subscribe:disabled,
.btn-follow:disabled,
.btn-followed:disabled { opacity: 0.6; cursor: default; }

/* -------------------------------------------------------------------------
   Profile
   ------------------------------------------------------------------------- */

.profile-head { padding: 22px 20px 0; }
@media (max-width: 1023px) { .profile-head { padding: 22px 16px 0; } }
.profile-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.profile-id { min-width: 0; flex: 1; }
.profile-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 28px;
    overflow-wrap: anywhere;
}
.profile-name .note-badge { width: 20px; height: 20px; }
.profile-handle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    font-size: 15px;
    color: var(--text);
}
.profile-pill {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--chip);
    border-radius: 999px;
    padding: 3px 8px;
    line-height: 1.2;
}
.profile-avatar { width: 64px; height: 64px; font-size: 20px; }
.profile-bio {
    margin-top: 12px;
    font-size: 15px;
    line-height: 21px;
    color: var(--text);
    overflow-wrap: anywhere;
}
.profile-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    font-size: 14px;
    color: var(--text);
}
.profile-links > span { display: inline-flex; align-items: center; gap: 6px; }
.profile-links .muted { color: var(--text-muted); }
.profile-followers {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-muted);
}
.profile-followers .stack { display: flex; }
.profile-followers .stack span {
    width: 20px; height: 20px; border-radius: 50%;
    background: #d1cfc9; border: 2px solid var(--bg); box-sizing: content-box;
}
.profile-followers .stack span + span { background: #a8a59e; margin-left: -8px; }
.profile-followers a:hover { color: var(--text); }
.profile-buttons {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.profile-buttons .btn,
.profile-buttons form { flex: 1; min-width: 0; }
.profile-buttons form .btn { width: 100%; }
.profile-tabs {
    display: flex;
    margin-top: 18px;
    border-bottom: var(--hair) solid var(--border);
}
.profile-tabs a {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    margin-bottom: calc(-1 * var(--hair));
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1.5px solid transparent;
    transition: color 0.12s;
}
.profile-tabs a:hover { color: var(--text); }
.profile-tabs a.is-active { color: var(--text); border-bottom-color: var(--text); }

/* -------------------------------------------------------------------------
   Forms (login / register / edit_profile)
   ------------------------------------------------------------------------- */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: var(--bg-page);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg);
    border: var(--hair) solid var(--border);
    border-radius: 22px;
    padding: 40px 32px 32px;
    box-shadow: var(--shadow-card);
}
.auth-card h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
    text-align: center;
    letter-spacing: -0.02em;
}
.auth-card .subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 24px;
    font-size: 14px;
}
.auth-logo {
    display: flex;
    justify-content: center;
    margin: 4px 0 22px;
}
.auth-logo img { width: 88px; height: 88px; object-fit: contain; }
.auth-tagline {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    margin: 0 0 18px;
}
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: var(--hair); background: var(--border); }

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    background: #fff;
    color: #1f1f1f;
    border: 1px solid #dadce0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s, border-color 0.12s;
    text-decoration: none;
    box-sizing: border-box;
}
.btn-google:hover {
    background: #f8f9fa;
    border-color: #c8ccd0;
    box-shadow: 0 1px 2px rgba(60,64,67,0.15);
}
.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-google[aria-disabled="true"] { opacity: 0.7; cursor: not-allowed; }

.auth-card .btn-primary { border-radius: 12px; }

.auth-switch {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    margin: 18px 0 0;
}
.auth-switch a { color: var(--accent); font-weight: 600; }

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}
.field input,
.field textarea,
.field select {
    background: var(--bg);
    color: var(--text);
    border: var(--hair) solid var(--border-card);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.12s, background 0.12s;
}
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-color: var(--text); }

/* Generic content / static page wrapper */
.prose-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 20px 80px;
    color: var(--text);
}
.prose-page h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; }
.prose-page h2 { font-size: 19px; font-weight: 600; margin: 28px 0 10px; }
.prose-page h3 { font-size: 16px; font-weight: 600; margin: 20px 0 6px; }
.prose-page p, .prose-page li { font-size: 15px; line-height: 1.6; color: var(--text); margin-bottom: 12px; }
.prose-page a { color: var(--accent); }
.prose-page a:hover { text-decoration: underline; }
.prose-page ul { padding-left: 22px; margin-bottom: 14px; }

/* Loading spinner */
.spinner-wrap { padding: 24px; text-align: center; }
.spinner {
    display: inline-block;
    width: 26px; height: 26px;
    border: 2px solid var(--border);
    border-top-color: var(--text);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Misc utilities */
.hidden        { display: none !important; }
.line-clamp-5  { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.show-more-btn {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 400;
    background: none;
    border: 0;
    padding: 4px 0 0;
    cursor: pointer;
    font-family: inherit;
}
.show-more-btn:hover { color: var(--text); }