/* ================================================================
   Tide Garden — 潮汐花园 · Seaside Editorial Edition
   Typographic, airy, with botanical-tidal character.
   Keep original palette; everything else is new.
   ================================================================ */

:root {
    /* --- original palette (kept) --- */
    --gradient-bg: linear-gradient(135deg, #fdf2f8 0%, #ede9fe 30%, #dbeafe 60%, #f0fdf4 100%);
    --glass-bg: transparent;
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --glass-blur: blur(2px);
    --text-primary: #1e1b4b;
    --text-secondary: #6366a1;
    --text-muted: #94a3b8;
    --accent: #8b5cf6;
    --accent-soft: rgba(139, 92, 246, 0.1);
    --accent-glow: rgba(139, 92, 246, 0.2);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xl: 20px;
    --font-body: 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif;
    --font-heading: 'Noto Serif SC', Georgia, 'Songti SC', serif;
    --font-display: 'Playfair Display', 'Noto Serif SC', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- focus ring policy ---
       Mouse/touch clicks: suppress the default browser outline (no blue box).
       Keyboard navigation: keep a visible, theme-colored focus ring so the
       site stays accessible for keyboard / assistive-tech users. */
    --focus-ring: 2px solid var(--accent, #8b5cf6);

    /* --- new tokens for the redesign --- */
    --accent-gradient: linear-gradient(135deg, #8b5cf6, #c084fc);
    --accent-gradient-2: linear-gradient(135deg, #8b5cf6, #a78bfa, #c084fc);
    --card-bg: rgba(255,255,255,0.6);
    --card-border: rgba(255, 255, 255, 0.7);
    --card-shadow: 0 2px 16px rgba(100, 100, 150, 0.04);
    --card-shadow-hover: 0 12px 40px rgba(100, 100, 150, 0.1);
    --nav-bg: rgba(255, 255, 255, 0.6);
    --radius-pill: 9999px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 56px;
    --content-max: 720px;
}

/* Focus ring policy: mouse/touch clicks stay clean (no default blue box);
   keyboard navigation keeps a visible theme-colored ring (accessibility).
   NOTE: mobile browsers match :focus-visible on touch taps, so JS toggles
   .no-focus-ring on the root after any touch interaction (see App.init). */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.no-focus-ring :focus-visible { outline: none; }

/* ================================================================
   Frosted glass utility — reference recipe (StarDots style)
   Use class="glass" on any element that needs the frosted-glass look.
   ================================================================ */
.glass {
    background: var(--glass-bg, transparent);
    backdrop-filter: var(--glass-blur, blur(2px));
    -webkit-backdrop-filter: var(--glass-blur, blur(2px));
    border: none;
    box-shadow: var(--glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
}
[data-theme="dark"] .glass {
    background: transparent;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Frosted glass strong variant — reference recipe for buttons/settings items */
.glass-strong {
    background: transparent;
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    -webkit-backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    border: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .glass-strong {
    background: transparent;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ================================================================
   Reset & Base
   ================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    font-weight: 400;
    background:
        radial-gradient(1100px 520px at 85% -10%, rgba(139, 92, 246, 0.10), transparent 60%),
        radial-gradient(900px 460px at -10% 110%, rgba(103, 232, 249, 0.08), transparent 60%),

        var(--gradient-bg);
    /* NOTE: background-attachment: fixed 会让 backdrop-filter 失效（Chrome 无法采样 fixed 背景层），故移除 */
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subtle grain overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--accent); color: white; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); transition: var(--transition); }
a:hover { color: #7c3aed; }

/* ================================================================
   Typography — editorial scale
   ================================================================ */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.3; color: var(--text-primary); }
h1 { font-size: 2rem; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

code, pre { font-family: var(--font-mono); }

/* ================================================================
   Tide Wave Loader — animated bars replace old spinner + text
   ================================================================ */
.tide-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 80px;
    padding: 50px 20px;
}
.tide-loader i {
    display: block;
    width: 5px;
    border-radius: 4px;
    background: var(--accent);
    animation: tideRise 1.2s ease-in-out infinite;
}
/* Symmetrical wave — tallest at center, shortest at edges */
/* Colors flow: pink → purple → indigo → cyan */
.tide-loader i:nth-child(1),
.tide-loader i:nth-child(9) {
    height: 18px; animation-delay: 0.00s; background: #ec4899;
}
.tide-loader i:nth-child(2),
.tide-loader i:nth-child(8) {
    height: 28px; animation-delay: 0.08s; background: #a855f7;
}
.tide-loader i:nth-child(3),
.tide-loader i:nth-child(7) {
    height: 38px; animation-delay: 0.16s; background: #6366f1;
}
.tide-loader i:nth-child(4),
.tide-loader i:nth-child(6) {
    height: 46px; animation-delay: 0.24s; background: #3b82f6;
}
.tide-loader i:nth-child(5) {
    height: 52px; animation-delay: 0.32s; background: #06b6d4;
}

@keyframes tideRise {
    0%, 100% { transform: scaleY(0.45); opacity: 0.35; }
    50%      { transform: scaleY(1);    opacity: 1;    }
}

/* ================================================================
   CSS-only Icon System (preserved)
   ================================================================ */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    position: relative;
    flex-shrink: 0;
}
.icon-lg { width: 36px; height: 36px; }
.icon-sm { width: 18px; height: 18px; }

.icon-write::before {
    content: ''; position: absolute;
    width: 14px; height: 2px;
    background: currentColor;
    top: 7px; left: 5px;
    transform: rotate(-30deg);
    border-radius: 1px;
}
.icon-write::after {
    content: ''; position: absolute;
    width: 0; height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    bottom: 5px; right: 3px;
    transform: rotate(-30deg);
}
.icon-home::before {
    content: ''; position: absolute;
    width: 12px; height: 12px;
    border: 2px solid currentColor;
    border-bottom: none; border-right: none;
    transform: rotate(45deg);
    top: 6px; left: 6px;
}
.icon-home::after {
    content: ''; position: absolute;
    width: 16px; height: 11px;
    border: 2px solid currentColor;
    border-top: none;
    bottom: 1px; left: 4px;
    border-radius: 0 0 2px 2px;
}
.icon-user::before {
    content: ''; position: absolute;
    width: 8px; height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 4px; left: 8px;
}
.icon-user::after {
    content: ''; position: absolute;
    width: 16px; height: 10px;
    border: 2px solid currentColor;
    border-top: none;
    border-radius: 0 0 10px 10px;
    bottom: 2px; left: 4px;
}
.icon-close::before, .icon-close::after {
    content: ''; position: absolute;
    width: 18px; height: 2px;
    background: currentColor;
    top: 50%; left: 50%;
    border-radius: 1px;
}
.icon-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.icon-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.icon-search::before {
    content: ''; position: absolute;
    width: 10px; height: 10px;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 3px; left: 3px;
}
.icon-search::after {
    content: ''; position: absolute;
    width: 7px; height: 2px;
    background: currentColor;
    transform: rotate(45deg);
    bottom: 5px; right: 3px;
    border-radius: 1px;
}
.icon-tag::before {
    content: ''; position: absolute;
    width: 0; height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid currentColor;
    top: 4px; left: 2px;
}
.icon-tag::after {
    content: ''; position: absolute;
    width: 4px; height: 4px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    top: 8px; left: 11px;
}
.icon-plus::before, .icon-plus::after {
    content: ''; position: absolute;
    background: currentColor;
    top: 50%; left: 50%;
    border-radius: 1px;
}
.icon-plus::before { width: 16px; height: 2px; transform: translate(-50%,-50%); }
.icon-plus::after { width: 2px; height: 16px; transform: translate(-50%,-50%); }
.icon-chevron::before {
    content: ''; position: absolute;
    width: 8px; height: 8px;
    border: 2px solid currentColor;
    border-left: none; border-bottom: none;
    transform: rotate(45deg);
    top: 7px; left: 7px;
}
.icon-eye::before {
    content: ''; position: absolute;
    width: 18px; height: 9px;
    border: 2px solid currentColor;
    border-radius: 9px 9px 0 0;
    top: 5px; left: 3px;
}
.icon-eye::after {
    content: ''; position: absolute;
    width: 6px; height: 6px;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 6px; left: 9px;
}
.icon-cal::before {
    content: ''; position: absolute;
    width: 18px; height: 14px;
    border: 2px solid currentColor;
    border-radius: 2px;
    top: 5px; left: 3px;
}
.icon-cal::after {
    content: ''; position: absolute;
    width: 8px; height: 2px;
    background: currentColor;
    top: 9px; left: 8px;
    box-shadow: 0 3px 0 0 currentColor;
}
.icon-menu::before {
    content: ''; position: absolute;
    width: 18px; height: 2px;
    background: currentColor;
    top: 6px; left: 3px;
    border-radius: 1px;
    box-shadow: 0 6px 0 0 currentColor, 0 12px 0 0 currentColor;
}
.icon-folder::before {
    content: ''; position: absolute;
    width: 16px; height: 6px;
    background: currentColor;
    top: 6px; left: 4px;
    border-radius: 1px 1px 0 0;
}
.icon-folder::after {
    content: ''; position: absolute;
    width: 18px; height: 12px;
    background: currentColor;
    top: 10px; left: 3px;
    border-radius: 0 2px 2px 2px;
    opacity: 0.8;
}
.icon-pin::before {
    content: ''; position: absolute;
    width: 8px; height: 10px;
    border: 2px solid currentColor;
    border-radius: 50% 50% 50% 0;
    top: 4px; left: 8px;
    transform: rotate(-45deg);
}
/* ================================================================
   NAVIGATION — clean, minimal, no decoration
   ================================================================ */
.ssr-nav-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 16px 20px;
    max-width: 1240px;
    margin: 0 auto;
}

/* Inner wrapper creates positioning context for avatar + theme toggle */
.nav-positioner {
    position: relative;
}

/* Avatar inside nav — left edge aligns with nav content */
.user-avatar-img,
.user-avatar-fallback {
    position: absolute;
    left: 0;
    top: calc(100% + 12px);
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.user-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.user-avatar-fallback {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
}
.user-avatar-img:hover,
.user-avatar-fallback:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

/* Theme toggle — right edge aligns with nav content */
.nav-theme-toggle {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--glass-border, transparent);
    background: var(--glass-bg, transparent);
    backdrop-filter: var(--glass-blur, blur(2px));
    -webkit-backdrop-filter: var(--glass-blur, blur(2px));
    cursor: pointer;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
}
.nav-theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.nav-theme-toggle .theme-icon {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: relative;
}

/* Notification toggle — same shape as the theme toggle, sits to its LEFT */
.nav-notification-toggle {
    position: absolute;
    right: 48px;             /* theme toggle (40px) + 8px gap */
    top: calc(100% + 12px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--glass-border, transparent);
    background: var(--glass-bg, transparent);
    backdrop-filter: var(--glass-blur, blur(2px));
    -webkit-backdrop-filter: var(--glass-blur, blur(2px));
    cursor: pointer;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #666);
    box-shadow: var(--glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    padding: 0;
}
.nav-notification-toggle svg {
    width: 18px;
    height: 18px;
}
.nav-notification-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    color: var(--accent);
}
/* Unread red dot on the bell */
.nav-notification-toggle .notif-badge {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px var(--glass-bg, rgba(255,255,255,0.9));
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s ease, transform 0.2s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
    pointer-events: none;
}
.nav-notification-toggle.has-unread .notif-badge {
    opacity: 1;
    transform: scale(1);
}

/* Desktop: larger avatar + toggle */
@media (min-width: 1024px) {
    .user-avatar-img,
    .user-avatar-fallback {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
    }
    .nav-theme-toggle {
        width: 52px;
        height: 52px;
    }
    .nav-theme-toggle .theme-icon {
        width: 24px;
        height: 24px;
    }
    .nav-notification-toggle {
        width: 52px;
        height: 52px;
        right: 60px;         /* theme toggle (52px) + 8px gap */
    }
    .nav-notification-toggle svg {
        width: 22px;
        height: 22px;
    }
}

.site-header { width: 100%; }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 56px;
    background: var(--glass-bg, transparent);
    backdrop-filter: var(--glass-blur, blur(2px));
    -webkit-backdrop-filter: var(--glass-blur, blur(2px));
    border: none;
    border-radius: 16px;
    box-shadow: var(--glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
    transition: var(--transition);
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.nav-link {
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    color: #1e1b4b;
    font-size: 0.88rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.nav-link:hover {
    color: var(--accent);
}

/* ================================================================
   Home Welcome Section
   ================================================================ */
.home-welcome {
    text-align: center;
    padding: 48px 20px 32px;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}
.home-logo {
    margin: 0 auto 18px;
    text-align: center;
}
.home-logo-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: inline-block;
}
.home-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    line-height: 1.3;
}
.home-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.home-stats {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 14px;
    letter-spacing: 0.04em;
}
/* Subtle decorative divider */
.home-welcome::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--accent-gradient);
    border-radius: 1px;
    margin: 24px auto 0;
}

/* ================================================================
   PAGE CONTAINER
   ================================================================ */
.ssr-landing {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

/* ================================================================
   POST CARDS — clean, flat, content-first
   ================================================================ */
.ssr-posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.ssr-post {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    -webkit-backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 1px 8px rgba(100, 100, 150, 0.03);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: row;
    gap: 18px;
    animation: fadeUp 0.5s ease both;
}
.ssr-post:hover {
    background: rgba(255, 255, 255, 0.55);
}
.ssr-post:nth-child(1) { animation-delay: 0.04s; }
.ssr-post:nth-child(2) { animation-delay: 0.08s; }
.ssr-post:nth-child(3) { animation-delay: 0.12s; }
.ssr-post:nth-child(4) { animation-delay: 0.16s; }
.ssr-post:nth-child(5) { animation-delay: 0.2s; }
.ssr-post:nth-child(6) { animation-delay: 0.24s; }
.ssr-post:nth-child(7) { animation-delay: 0.28s; }
.ssr-post:nth-child(8) { animation-delay: 0.32s; }

.ssr-post:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 28px rgba(100, 100, 150, 0.1);
}

.ssr-post .meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* Category — small subtle label */
.ssr-post .cat {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 600;
}

.ssr-post h2 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin: 8px 0 10px;
    line-height: 1.45;
}
.ssr-post h2 a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}
.ssr-post h2 a:hover { color: var(--accent); }

.ssr-post .summary {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    flex-grow: 1;
}

/* Thumbnail image in card */
.ssr-post-thumb {
    flex-shrink: 0;
    width: 100px;
    order: 1;
}
.ssr-post-thumb img {
    width: 100px;
    height: 76px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* Card body (title, meta, summary) — takes remaining space */
.ssr-post-body {
    flex: 1;
    min-width: 0;
}

/* Author name in meta */
.ssr-post .meta .author-name {
    color: var(--text-secondary);
    font-weight: 500;
}
.ssr-post .meta .author-name::before {
    content: '\2022';
    margin-right: 6px;
    color: var(--text-muted);
}

/* Sticky badge */
.sticky-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.6rem;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 500;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 1.6;
}

/* Card author (bottom-left with avatar) */
.card-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--card-border);
}
.card-author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.card-author-initial {
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}
.card-author-name {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Tags in card */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 500;
    transition: var(--transition);
    text-decoration: none;
}
.tag:hover {
    background: rgba(139, 92, 246, 0.18);
    color: #7c3aed;
}

/* ================================================================
   Empty state
   ================================================================ */
.ssr-empty {
    text-align: center;
    padding: 80px 20px;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
}
.ssr-empty p { color: var(--text-secondary); font-size: 1rem; }

/* ================================================================
   POST DETAIL — editorial reading layout
   ================================================================ */
.post-detail {
    max-width: var(--content-max);
    margin: 32px auto 0;
    padding: 44px 52px;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
    animation: fadeUp 0.5s ease;
}
/* Decorative top accent bar */
.post-detail::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent-gradient-2);
}

.post-title {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 18px;
    letter-spacing: -0.005em;
}

.post-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(99, 102, 161, 0.1);
    margin-bottom: 28px;
}
.post-meta-bar .post-category {
    display: inline-block;
    padding: 4px 16px;
    border-radius: var(--radius-pill);
    background: var(--accent-gradient);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.04em;
}
.post-meta-bar time,
.post-meta-bar .post-author,
.post-meta-bar .post-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.post-meta-bar .btn-sm {
    margin-left: auto;
}

.post-content { white-space: pre-wrap;
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-primary);
}
.post-content p {
    margin-bottom: 1.3em;
}

/* Tags at bottom of post */
.post-detail .post-tags {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(99, 102, 161, 0.1);
}

/* ================================================================
   BUTTONS — all pill-shaped with slide/glow hover
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 26px;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(139, 92, 246, 0.2);
    background: transparent;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
    line-height: 1.4;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
/* Slide-fill hover */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-soft);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: inherit;
}
.btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}
.btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.btn:active { transform: scale(0.96); }

/* Keep children above the ::before overlay */
.btn > * { position: relative; z-index: 1; }

.btn-primary {
    background: var(--accent-gradient);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
}
.btn-primary::before { display: none; }
.btn-primary:hover {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: white;
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.4);
    transform: translateY(-2px);
}
.btn-primary:active {
    transform: scale(0.96) translateY(0);
}

.btn-block { display: flex; width: 100%; }
.btn-sm {
    padding: 6px 16px;
    font-size: 0.8rem;
    border-radius: var(--radius-pill);
}
.btn-danger {
    color: #e11d48;
    border-color: rgba(244, 63, 94, 0.25);
}
.btn-danger::before { background: rgba(244, 63, 94, 0.08); }
.btn-danger:hover { border-color: #e11d48; color: #be123c; }

/* ================================================================
   FORMS — rounded, minimal, with glowing focus
   ================================================================ */
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid rgba(99, 102, 161, 0.15);
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: var(--transition);
    outline: none;
    /* Custom select arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236366a1' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}
.form-group select:hover {
    border-color: rgba(99, 102, 161, 0.3);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft), 0 0 20px rgba(139, 92, 246, 0.08);
    background: rgba(255, 255, 255, 0.9);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}
.form-group textarea {
    resize: vertical;
    min-height: 110px;
}
.form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: 0;
}
.form-checkbox input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}
.form-row {
    display: flex;
    gap: 16px;
}
.form-row .form-group { flex: 1; }

/* ================================================================
   AUTH (login / register) — centered glass card
   ================================================================ */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 100px);
    padding: 40px 20px;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 40px 40px 36px;
    background: var(--glass-bg, transparent);
    backdrop-filter: var(--glass-blur, blur(2px));
    -webkit-backdrop-filter: var(--glass-blur, blur(2px));
    border: 1.5px solid var(--glass-border, transparent);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
    position: relative;
    overflow: hidden;
    animation: fadeUp 0.5s ease;
}
/* Gradient top bar */
.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent-gradient-2);
}
.auth-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 28px;
}
.auth-switch {
    text-align: center;
    margin-top: 22px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.auth-switch a {
    color: var(--accent);
    font-weight: 500;
}

/* ================================================================
   COMMENTS — clean, minimal, with timeline feel
   ================================================================ */
.comments-section {
    max-width: var(--content-max);
    margin: 28px auto 50px;
    padding: 36px 44px;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    animation: fadeUp 0.5s ease;
}
.comments-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(99, 102, 161, 0.08);
}

.comment-form {
    margin-bottom: 30px;
}
.comment-form-main {
    background: rgba(255, 255, 255, 0.45);
    border: 1.5px solid rgba(99, 102, 161, 0.12);
    border-radius: 14px;
    padding: 12px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.comment-form-main:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    background: rgba(255, 255, 255, 0.7);
}
.comment-form textarea {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    resize: vertical;
    min-height: 56px;
    padding: 4px 2px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: var(--transition);
}
.comment-form textarea::placeholder { color: var(--text-muted); }
.comment-form-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(99, 102, 161, 0.08);
}
.btn-comment-submit {
    padding: 7px 22px !important;
    border-radius: 999px !important;
    font-size: 0.82rem !important;
    transition: transform 0.18s var(--ease-out-quart), box-shadow 0.2s ease !important;
}
.btn-comment-submit:hover { transform: translateY(-1px); }
.btn-comment-submit:active { transform: scale(0.96); }
.comment-form .guest-fields {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.comment-form .guest-fields input {
    flex: 1;
    min-width: 0;
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.5);
    border: 1.5px solid rgba(99, 102, 161, 0.14);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text-primary);
    transition: var(--transition);
    outline: none;
}
.comment-form .guest-fields input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Replying state */
.replying-to {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 8px;
    padding: 6px 12px;
    margin-bottom: 8px;
}
.replying-to b { font-weight: 600; }
.btn-cancel-reply {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: var(--font-body);
}
.btn-cancel-reply:hover { color: var(--accent); }
/* Reply button on each comment */
.btn-reply {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 8px;
    font-family: var(--font-body);
    transition: color 0.18s ease;
}
.btn-reply:hover { color: var(--accent); }
/* Reply box unfolds BELOW the comment, indented like replies */
.comment-form[data-parent]:not([data-parent=""]) {
    margin: 12px 0 8px 32px;
    padding-left: 14px;
    border-left: 2px solid rgba(139, 92, 246, 0.12);
}
@media (max-width: 767px) {
    .comment-form[data-parent]:not([data-parent=""]) {
        margin-left: 12px;
        padding-left: 10px;
    }
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.comment {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(99, 102, 161, 0.06);
}
.comment:last-child { border-bottom: none; }
.comment-avatar { flex-shrink: 0; }
.comment-avatar-initial {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
}
.comment-body { flex: 1; min-width: 0; }
.comment-author {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
    display: inline;
}
.comment-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: inline;
    margin-left: 10px;
}
.comment-content {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-top: 6px;
    word-break: break-word;
}
.no-comments {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
    font-size: 0.9rem;
}
.comment-count {
    display: inline-block;
    min-width: 24px;
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    vertical-align: middle;
    text-align: center;
}

/* Reply button */
.btn-reply {
    display: inline-block;
    padding: 2px 10px;
    margin-top: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: var(--transition);
}
.btn-reply:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Nested replies */
.comment-replies {
    margin-left: 32px;
    padding-left: 16px;
    border-left: 2px solid rgba(139, 92, 246, 0.12);
    margin-top: 4px;
}
.comment-replies .comment {
    padding: 12px 0;
}
.comment-replies .comment-avatar-initial {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

/* Reply indicator bar */
.reply-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 6px 14px;
    background: var(--accent-soft);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--accent);
    font-weight: 500;
}
.btn-cancel-reply {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    transition: var(--transition);
    margin-left: auto;
}
.btn-cancel-reply:hover {
    color: var(--accent);
    background: rgba(139, 92, 246, 0.08);
}

/* ================================================================
   EDITOR — minimal, title + category + content + image upload
   ================================================================ */
.editor-page {
    max-width: 900px;
    margin: 24px auto 40px;
    padding: 0 24px;
    animation: fadeUp 0.4s ease;
}
.editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    padding: 18px 28px;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
}
.editor-header h1 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
}
.editor-actions {
    display: flex;
    gap: 10px;
}

.editor-form {
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--card-shadow);
}
.editor-form input#editor-title {
    font-size: 1.25rem;
    padding: 16px 20px;
    font-weight: 600;
    border-radius: 14px;
}

/* Textarea: full width, no split */
.editor-textarea-wrap {
    margin-top: 4px;
}
.editor-textarea-wrap textarea {
    width: 100%;
    min-height: 420px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1.5px solid rgba(99, 102, 161, 0.12);
    border-radius: 14px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-primary);
    resize: vertical;
    outline: none;
    transition: var(--transition);
}
.editor-textarea-wrap textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    background: rgba(255, 255, 255, 0.75);
}
.editor-textarea-wrap textarea::placeholder {
    color: var(--text-muted);
}

/* Mini toolbar: only image button */
.editor-toolbar-mini {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 0;
}
.btn-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}
.btn-toolbar:hover {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.2);
}
.btn-toolbar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ================================================================
   ADMIN PANEL — gradient sidebar, clean content
   ================================================================ */
/* ================================================================
   Admin Console — Tide Garden · light, theme-aware, frosted glass
   Follows day/night theme via CSS variables. Glass per reference recipe.
   ================================================================ */
.admin-shell {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 1280px;
    margin: 20px auto 44px;
    padding: 0 20px;
    animation: fadeUp 0.4s ease;
}
.admin-sidebar {
    width: 216px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg, transparent);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    -webkit-backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    border: 1.5px solid var(--glass-border, transparent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 14px 0 0 14px;
    padding: 22px 14px 16px;
    gap: 4px;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    min-height: 420px;
}
.admin-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 10px 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.admin-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}
.admin-brand-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    letter-spacing: 0.02em;
}
.admin-brand-text small {
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.22em;
    margin-top: 2px;
}
.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.admin-nav-item {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}
.admin-nav-item:hover {
    background: var(--accent-soft);
    color: var(--accent);
}
.admin-nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.admin-nav-item.active::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}
.admin-back {
    margin-top: auto;
    padding: 12px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.82rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}
.admin-back:hover { color: var(--accent); }

.admin-main {
    flex: 1;
    min-width: 0;
    background: var(--glass-bg, transparent);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    -webkit-backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    border: 1.5px solid var(--glass-border, transparent);
    border-left: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 0 14px 14px 0;
    padding: 28px 30px 40px;
}
.admin-topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
}
.admin-topbar-title h1 {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    margin: 0;
    line-height: 1.2;
    color: var(--text-primary);
    font-weight: 700;
}
.admin-topbar-title span {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.admin-topbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.admin-content { min-width: 0; }
.admin-section-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 28px 0 14px;
    color: var(--text-secondary);
}

/* Welcome */
.admin-welcome { margin-bottom: 24px; }
.admin-welcome-greet {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}
.admin-welcome-note {
    font-size: 0.86rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Stat cards — clean, light, mono numerals */
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.admin-stat-card {
    background: var(--glass-bg, transparent);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    -webkit-backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    border: 1.5px solid var(--glass-border, transparent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    padding: 20px 18px 16px;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.admin-stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}
.admin-stat-num {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 600;
    color: var(--accent);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.admin-stat-label {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 8px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Quick actions */
.admin-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.admin-quick {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 17px;
    border-radius: 13px;
    border: 1.5px solid var(--glass-border, transparent);
    background: var(--glass-bg, transparent);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    -webkit-backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.admin-quick:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.admin-quick-ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.admin-quick b {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
.admin-quick i {
    display: block;
    font-style: normal;
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 3px;
}

/* Card container */
.admin-card {
    background: var(--glass-bg, transparent);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    -webkit-backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    border: 1.5px solid var(--glass-border, transparent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}
.admin-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.admin-card-head h2 {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    margin: 0;
    color: var(--text-primary);
}

/* List rows */
.admin-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-list-compact .admin-row { padding: 12px 14px; }
.admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--glass-border, transparent);
    background: var(--glass-bg, transparent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: border-color 0.15s ease, background 0.15s ease;
    flex-wrap: wrap;
}
.admin-row:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.admin-row-main { min-width: 0; flex: 1; }
.admin-row-title {
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}
.admin-row-title a { color: var(--text-primary); text-decoration: none; transition: color 0.15s ease; }
.admin-row-title a:hover { color: var(--accent); }
.admin-row-sub {
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 6px;
}
.admin-row-meta {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.admin-row-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Inline forms */
.admin-inline-form { margin-bottom: 16px; }
.admin-inline-form-box {
    background: var(--glass-bg, transparent);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    -webkit-backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    border: 1.5px solid var(--glass-border, transparent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 16px;
    align-items: end;
}
.admin-inline-form-box h4 {
    grid-column: 1 / -1;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    margin: 0;
    color: var(--text-primary);
}
.admin-field { display: flex; flex-direction: column; gap: 6px; }
.admin-field label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.admin-field .admin-input,
.admin-field input,
.admin-field select,
.admin-field textarea {
    padding: 9px 13px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    font-size: 0.86rem;
    background: var(--glass-bg, transparent);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body);
}
.admin-field textarea { resize: vertical; }
.admin-field .admin-input:focus,
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.admin-field-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    grid-column: 1 / -1;
    margin-top: 4px;
}

/* Behavior grid */
.admin-behavior-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 18px;
    margin-bottom: 16px;
}
.admin-behavior-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
}
.admin-behavior-item label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.admin-behavior-item input[type="text"],
.admin-behavior-item input[type="number"] {
    padding: 7px 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    font-size: 0.84rem;
    background: var(--glass-bg, transparent);
    color: var(--text-primary);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-behavior-item input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Toggle switch */
.admin-switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    position: relative;
}
.admin-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.admin-switch-slider {
    width: 38px;
    height: 21px;
    border-radius: 21px;
    background: rgba(0, 0, 0, 0.15);
    transition: background 0.15s ease;
    position: relative;
    flex-shrink: 0;
}
.admin-switch-slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.admin-switch input:checked + .admin-switch-slider { background: var(--accent); }
.admin-switch input:checked + .admin-switch-slider::after { transform: translateX(17px); }
.admin-switch-label { font-size: 0.84rem; color: var(--text-primary); }

/* Buttons inside admin */
.admin-shell .btn { border-radius: 10px; }
.admin-shell .btn-primary {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 12px var(--accent-glow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.admin-shell .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px var(--accent-glow); }
.admin-shell .btn-sm {
    background: var(--glass-bg, transparent);
    color: var(--text-secondary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.admin-shell .btn-sm:hover { border-color: var(--accent); color: var(--accent); }
.admin-shell .btn-danger {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.admin-shell .btn-danger:hover { background: rgba(239, 68, 68, 0.15); color: #b91c1c; }

/* Inputs (standalone) */
.admin-input {
    padding: 9px 13px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    font-size: 0.85rem;
    background: var(--glass-bg, transparent);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: var(--font-body);
}
.admin-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Selects — native control, styled. appearance:none + inline chevron keeps the
   frosted look on desktop; mobile renders the OS picker (fast, no custom JS). */
.admin-shell select.admin-select,
.editor-form select,
.admin-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236366a1' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-color: var(--glass-bg, transparent);
    color: var(--text-primary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 9px;
    padding: 7px 28px 7px 10px;
    font-size: 0.82rem;
    line-height: 1.4;
    outline: none;
    cursor: pointer;
    min-width: 0;
    max-width: 100%;
}
.admin-shell select.admin-select:focus,
.editor-form select:focus,
.admin-field select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Dark theme adjustments for admin (auto via variables) */
[data-theme="dark"] .admin-shell .admin-input,
[data-theme="dark"] .admin-shell select.admin-select,
[data-theme="dark"] .admin-field input,
[data-theme="dark"] .admin-field select,
[data-theme="dark"] .admin-field textarea,
[data-theme="dark"] .admin-behavior-item input {
    background: rgba(24, 16, 48, 0.5);
    border-color: rgba(180, 150, 255, 0.15);
    color: var(--text-primary);
}
[data-theme="dark"] .admin-sidebar,
[data-theme="dark"] .admin-main {
    background: var(--nav-bg);
}
[data-theme="dark"] .admin-brand,
[data-theme="dark"] .admin-back {
    border-color: rgba(180, 150, 255, 0.1);
}

/* Mobile: sidebar becomes top-scroll nav */
@media (max-width: 860px) {
    .admin-shell { flex-direction: column; gap: 12px; padding: 0 14px; }
    .admin-sidebar {
        width: 100%;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px 10px;
        gap: 8px;
        border-radius: 14px;
        min-height: 0;
    }
    .admin-brand { padding: 0 8px 0 4px; border-bottom: none; margin-bottom: 0; flex-shrink: 0; }
    .admin-brand-text { display: none; }
    .admin-brand-mark { width: 32px; height: 32px; border-radius: 10px; font-size: 1rem; }
    .admin-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; flex: 1; }
    .admin-nav-item {
        white-space: nowrap;
        padding: 8px 13px;
        font-size: 0.82rem;
        border-radius: 9px;
    }
    .admin-nav-item.active::before { display: none; }
    .admin-back { display: none; }
    .admin-main {
        border-radius: 14px;
        border-left: 1.5px solid var(--glass-border, transparent);
        padding: 20px 18px 32px;
    }
    .admin-topbar { margin-bottom: 16px; }
}

@media (max-width: 480px) {
    .admin-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .admin-stat-card { padding: 17px 15px 14px; }
    .admin-stat-num { font-size: 1.6rem; }
    .admin-quick-grid { grid-template-columns: 1fr 1fr; }
    .admin-quick { padding: 13px 12px; gap: 10px; }
    .admin-quick-ic { width: 36px; height: 36px; font-size: 0.85rem; }
    .admin-row { padding: 12px; }
    .admin-row-side { width: 100%; justify-content: flex-end; }
    .admin-card { padding: 15px; }
    .admin-inline-form-box { grid-template-columns: 1fr; }
}

/* ================================================================
   AI 用户详情页 — mobile-first (v=202608161732+)
   ================================================================ */
.ai-user-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.ai-user-id { display: flex; flex-direction: column; min-width: 0; }
.ai-user-id b { font-size: 1.05rem; color: var(--text-primary); line-height: 1.3; }
.ai-user-id span { font-size: 0.8rem; color: var(--text-muted); }

/* Manual generation — big touch targets, most-used action on top */
.ai-gen-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.ai-gen-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    font-size: 0.95rem;
    border-radius: 12px;
}
.ai-gen-ic { width: 18px; height: 18px; flex-shrink: 0; }
.ai-gen-result {
    margin-top: 12px;
    padding: 12px;
    border-radius: 10px;
    background: var(--card-bg, #faf7f2);
    border: 1px solid var(--glass-border, #eee);
    font-size: 0.85rem;
    line-height: 1.7;
    word-break: break-word;
}
/* Generation status — CSS dot, no emoji */
.ai-gen-state { display: flex; align-items: flex-start; gap: 8px; }
.ai-gen-state i {
    flex-shrink: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: 5px;
}
.ai-gen-busy i { background: #f59e0b; animation: aiPulse 1s ease-in-out infinite; }
.ai-gen-ok i { background: #10b981; }
.ai-gen-err i { background: #e53e3e; }
@keyframes aiPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Model scan row: input + button inline */
.ai-model-row { display: flex; gap: 8px; align-items: stretch; }
.ai-model-row .admin-input { flex: 1; min-width: 0; }
.ai-scan-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 8px 14px;
    border: 1px dashed var(--accent, #8b5cf6);
    color: var(--accent, #8b5cf6);
    background: transparent;
    border-radius: 10px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ai-scan-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.ai-scan-btn:hover { background: var(--accent-soft); }
.ai-scan-btn:disabled { opacity: 0.5; cursor: default; }

/* API rows — card per config, toggle + actions */
.ai-api-list { display: flex; flex-direction: column; gap: 8px; }
.ai-api-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--glass-border, rgba(0,0,0,0.08));
    background: var(--card-bg, rgba(255,255,255,0.6));
    flex-wrap: wrap;
}
.ai-api-row.disabled { opacity: 0.62; }
.ai-api-main { min-width: 0; flex: 1; }
.ai-api-name { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.ai-api-meta { font-size: 0.76rem; color: var(--text-muted); margin-top: 3px; word-break: break-all; display: flex; flex-direction: column; gap: 3px; }
.ai-api-meta-row { display: flex; align-items: baseline; gap: 8px; line-height: 1.5; min-width: 0; }
.ai-api-meta-k { flex-shrink: 0; min-width: 52px; color: var(--text-muted); }
.ai-api-meta-v { min-width: 0; word-break: break-all; color: var(--text-primary); opacity: 0.92; }
.ai-api-meta-empty { color: var(--text-muted); opacity: 0.55; }
.ai-api-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-switch { margin-right: 2px; }
.ai-switch .admin-switch-slider { width: 36px; height: 20px; }
.ai-switch .admin-switch-slider::after { width: 14px; height: 14px; top: 3px; left: 3px; }
.ai-switch input:checked + .admin-switch-slider::after { transform: translateX(16px); }

/* Behavior rules — list rows, switch right / number right */
.ai-behavior-list { display: flex; flex-direction: column; gap: 8px; }
.ai-behavior-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--card-bg, rgba(255,255,255,0.6));
    border: 1px solid var(--glass-border, rgba(0,0,0,0.06));
    /* wrap: the hint text must drop to its own line on narrow screens —
       without this, flex-basis:100% gets squeezed into a vertical strip
       (every character on its own line, the "自动发布" vertical-text bug). */
    flex-wrap: wrap;
}
.ai-behavior-item > label:first-child { font-size: 0.88rem; color: var(--text-primary); flex: 1; }
.ai-behavior-item > label:first-child + input,
.ai-behavior-item > input[type="number"] {
    width: 88px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 9px;
    font-size: 0.9rem;
    background: var(--card-bg, #fff);
    color: var(--text-primary);
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .ai-gen-actions { grid-template-columns: 1fr; }
    .ai-api-row { flex-direction: column; align-items: stretch; }
    .ai-api-side { justify-content: flex-end; }
    .ai-behavior-item > label:first-child { font-size: 0.84rem; }
}

[data-theme="dark"] .ai-api-row,
[data-theme="dark"] .ai-behavior-item {
    background: rgba(24, 16, 48, 0.5);
    border-color: rgba(180, 150, 255, 0.15);
}
[data-theme="dark"] .ai-behavior-item > input[type="number"] {
    background: rgba(24, 16, 48, 0.5);
    border-color: rgba(180, 150, 255, 0.15);
    color: var(--text-primary);
}

/* "选择模型" button — standalone row, inline SVG + label */
.ai-choose-model-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: 1px dashed var(--accent, #8b5cf6);
    color: var(--accent, #8b5cf6);
    background: transparent;
    border-radius: 10px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ai-choose-model-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.ai-choose-model-btn:hover { background: var(--accent-soft); }
.ai-choose-model-btn:disabled { opacity: 0.55; cursor: default; }

/* Modal model picker — shares the notification panel look
   (.notification-panel / -card / -header / -body), plus a search row and an
   highlighted active model. */
.ai-model-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 20px 0;
    padding: 9px 13px;
    border: 1px solid rgba(100, 100, 150, 0.18);
    border-radius: 10px;
    background: rgba(100, 100, 150, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ai-model-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.ai-model-search svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.ai-model-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-family: var(--font-body);
}
.ai-model-search input::placeholder { color: var(--text-muted); }

.ai-model-list {
    padding: 14px 20px 20px;
    /* .notification-panel-body already provides overflow-y:auto + touch
       scrolling — the list handles hundreds of models. */
}
.ai-model-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    word-break: break-all;      /* long model names wrap — never truncated */
    white-space: normal;
    line-height: 1.4;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.ai-model-opt + .ai-model-opt { margin-top: 2px; }
.ai-model-opt:hover { background: rgba(100, 100, 150, 0.1); color: var(--text-primary); }
.ai-model-opt.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent);
}
[data-theme="dark"] .ai-model-search {
    background: rgba(24, 16, 48, 0.5);
    border-color: rgba(180, 150, 255, 0.15);
}
[data-theme="dark"] .ai-model-opt:hover { background: rgba(167, 139, 250, 0.1); }
[data-theme="dark"] .ai-model-opt.active { background: rgba(167, 139, 250, 0.16); color: #f0eaff; }

/* Behavior rule groups */
.ai-beh-group {
    border: 1px solid var(--glass-border, rgba(0,0,0,0.07));
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    background: var(--card-bg, rgba(255,255,255,0.4));
}
.ai-beh-group h3 {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ai-beh-hint {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-left: auto;
    text-align: right;
    flex: 1;
    min-width: 0;
    white-space: normal;   /* wrap instead of letter-stacking on narrow rows */
    line-height: 1.5;
}
[data-theme="dark"] .ai-beh-group { background: rgba(24, 16, 48, 0.35); border-color: rgba(180, 150, 255, 0.12); }
@media (max-width: 480px) {
    .ai-beh-hint { flex-basis: 100%; text-align: left; margin: 2px 0 0 4px; }
}

/* Mobile: backdrop-filter is compositor-heavy — dozens of blurred layers while
   scrolling / re-rendering lists is the #1 cause of admin jank on phones.
   Fall back to translucent-but-solid surfaces (no blur cost). */
@media (max-width: 860px) {
    .admin-sidebar, .admin-main, .admin-inline-form-box, .admin-card,
    .admin-row, .myposts-row, .admin-notif-row, .admin-stat-card, .admin-quick {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--card-bg, rgba(255, 255, 255, 0.6));
    }
}

/* Badges */
.badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-published, .badge-approved { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.badge-draft, .badge-pending { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.badge-private { background: rgba(99, 102, 161, 0.1); color: var(--text-secondary); }
.badge-spam { background: rgba(239, 68, 68, 0.1); color: #dc2626; }

/* ================================================================
   FOOTER — minimal, with gradient top border
   ================================================================ */
.site-footer {
    text-align: center;
    padding: 48px 20px 28px;
    position: relative;
}
.site-footer::before {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent-gradient);
    border-radius: 2px;
    margin: 0 auto 20px;
}
.footer-inner p {
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* ================================================================
   PAGINATION — pill-shaped links
   ================================================================ */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border-radius: var(--radius-pill);
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-decoration: none;
    transition: var(--transition);
}
.page-link:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
}
.page-link.active {
    background: var(--accent-gradient);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
}

/* ================================================================
   MARKDOWN BODY
   ================================================================ */
.markdown-body {
    line-height: 1.9;
    font-size: 1.05rem;
    color: var(--text-primary);
    word-wrap: break-word;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    font-family: var(--font-heading);
    margin-top: 1.6em;
    margin-bottom: 0.5em;
    line-height: 1.35;
}
.markdown-body h1 { font-size: 1.8rem; }
.markdown-body h2 { font-size: 1.5rem; }
.markdown-body h3 { font-size: 1.25rem; }
.markdown-body p { margin-bottom: 1.1em; }
.markdown-body ul, .markdown-body ol {
    padding-left: 1.6em;
    margin-bottom: 1.1em;
}
.markdown-body li { margin-bottom: 0.3em; }
.markdown-body blockquote {
    border-left: 3px solid var(--accent);
    padding: 10px 20px;
    margin: 1.2em 0;
    color: var(--text-secondary);
    background: var(--accent-soft);
    border-radius: 0 12px 12px 0;
}
.markdown-body code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 2px 8px;
    background: rgba(99, 102, 161, 0.08);
    border-radius: 6px;
}
.markdown-body pre {
    margin: 1.2em 0;
    padding: 18px 22px;
    background: rgba(30, 27, 75, 0.03);
    border: 1px solid rgba(99, 102, 161, 0.1);
    border-radius: 14px;
    overflow-x: auto;
}
.markdown-body pre code {
    background: none;
    padding: 0;
    font-size: 0.85rem;
}
.markdown-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.markdown-body a:hover { color: #7c3aed; }
.markdown-body img {
    max-width: 100%;
    border-radius: 12px;
    margin: 1.2em 0;
}
.markdown-body hr {
    border: none;
    height: 1px;
    background: rgba(99, 102, 161, 0.12);
    margin: 2.2em 0;
}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   Custom Select (single shared floating layer)
   ================================================================ */
.cselect-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.cselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px;
    background: var(--card-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 9px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    /* Concrete properties only — `transition: all` would promote a
       composited layer whose hit-test can steal clicks (old pitfall). */
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-align: left;
    line-height: 1.3;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}
.cselect-trigger::after {
    content: '';
    flex-shrink: 0;
    width: 12px; height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236366a1' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    transition: transform 0.15s ease;
}
.cselect-trigger:hover { border-color: rgba(99, 102, 161, 0.35); }
.cselect-trigger.open::after { transform: rotate(180deg); }

/* One shared popup, position:fixed, appended to <body> once. No transform /
   will-change: keeps it off the compositor's permanent-layer budget. */
.cselect-popup {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid rgba(99, 102, 161, 0.15);
    border-radius: 12px;
    box-shadow: 0 10px 36px rgba(60, 60, 110, 0.18);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    box-sizing: border-box;
}
.cselect-opt {
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.cselect-opt:hover { background: var(--accent-soft); color: var(--accent); }
.cselect-opt.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

[data-theme="dark"] .cselect-trigger {
    background: rgba(24, 16, 48, 0.5);
    border-color: rgba(180, 150, 255, 0.2);
    color: var(--text-primary);
}
[data-theme="dark"] .cselect-popup {
    background: #171030;
    border-color: rgba(180, 150, 255, 0.15);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .cselect-opt { color: #d0c8e8; }
[data-theme="dark"] .cselect-opt:hover,
[data-theme="dark"] .cselect-opt.active {
    background: rgba(167, 139, 250, 0.14);
    color: #f0eaff;
}

/* ================================================================
   User Avatar Floating Button
   ================================================================ */

.user-avatar-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.45);
}


/* ================================================================
   Profile Page
   ================================================================ */
.profile-page {
    max-width: 800px;
    margin: 28px auto 60px;
    padding: 0 24px;
    animation: fadeUp 0.4s ease;
}
.profile-header {
    display: flex;
    gap: 32px;
    padding: 32px 40px;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    margin-bottom: 28px;
    align-items: flex-start;
}
.profile-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 120px;
}
.profile-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}
.profile-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 6px;
}
.profile-avatar {
    flex-shrink: 0;
}
.profile-avatar-initial {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: var(--font-display);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2);
}
.profile-avatar-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15);
}
.profile-edit-form {
    padding: 24px 28px;
    margin-bottom: 28px;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    animation: fadeUp 0.3s ease;
}
.profile-username-tag {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    text-align: center;
}
.profile-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}
.profile-bio {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
.profile-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.profile-section-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-posts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}
.profile-post-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition);
    border-bottom: 1px solid rgba(99, 102, 161, 0.04);
}
.profile-post-item:last-child {
    border-bottom: none;
}
.profile-post-item:hover {
    background: rgba(139, 92, 246, 0.03);
}
.profile-post-item:hover .profile-post-title {
    color: var(--accent);
}
.profile-post-title {
    font-size: 0.92rem;
    font-weight: 500;
    transition: var(--transition);
}
.profile-post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 16px;
}

/* Profile chips (header metadata) */
.profile-chip {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

/* Stats cards row */
.profile-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.profile-stat-card {
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 20px 16px;
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s ease;
}
.profile-stat-card:hover {
    transform: translateY(-2px);
}
.profile-stat-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-heading);
    line-height: 1.2;
}
.profile-stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Side-by-side split */
.profile-split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 700px) {
    .profile-split-row { grid-template-columns: 1fr; }
}
.profile-split-card {
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--card-shadow);
}

/* Category distribution bars */
.profile-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 0.85rem;
}
.profile-cat-name {
    width: 60px;
    color: var(--text-secondary);
    flex-shrink: 0;
    font-weight: 500;
}
.profile-cat-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--accent-soft);
    border-radius: 3px;
    overflow: hidden;
}
.profile-cat-bar {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), #a78bfa);
    transition: width 0.5s ease;
}
.profile-cat-count {
    width: 24px;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Recent posts list */
.profile-recent-list {
    display: flex;
    flex-direction: column;
}
.profile-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    text-decoration: none;
    border-bottom: 1px solid rgba(99,102,161,0.04);
    transition: var(--transition);
}
.profile-recent-item:last-child { border-bottom: none; }
.profile-recent-item:hover .profile-recent-title {
    color: var(--accent);
}
.profile-recent-title {
    font-size: 0.88rem;
    color: var(--text-primary);
    font-weight: 500;
    transition: var(--transition);
}
.profile-recent-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 12px;
}

/* Enhanced post list meta */
.profile-post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 16px;
}
.profile-post-cat {
    display: inline-block;
    font-size: 0.7rem;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 500;
}

/* ================================================================
   Toggle Switch (replaces checkbox for "remember me")
   ================================================================ */
.form-checkbox {
    display: flex;
    align-items: center;
}
.form-checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: 0;
    line-height: 1.4;
    user-select: none;
}
/* Hidden native checkbox */
.form-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* Label acts as toggle container */
.form-checkbox label {
    position: relative;
    padding-left: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: 0;
    line-height: 1.4;
    user-select: none;
    min-height: 22px;
}
/* Toggle track */
.form-checkbox label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 22px;
    background: rgba(99, 102, 161, 0.2);
    border-radius: 11px;
    transition: background 0.25s ease;
    flex-shrink: 0;
}
/* Toggle knob */
.form-checkbox label::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: left 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 1;
}
/* Checked: track turns purple */
.form-checkbox input[type="checkbox"]:checked + label::before {
    background: var(--accent);
}
/* Checked: knob slides right */
.form-checkbox input[type="checkbox"]:checked + label::after {
    left: 20px;
}


/* ================================================================
   Custom CSS Modal
   ================================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(30, 27, 75, 0.35);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    -webkit-backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
}
.modal-box {
    background: var(--glass-bg, transparent);
    backdrop-filter: var(--glass-blur, blur(2px));
    -webkit-backdrop-filter: var(--glass-blur, blur(2px));
    border: 1.5px solid var(--glass-border, transparent);
    border-radius: 16px;
    padding: 32px 36px 24px;
    max-width: 380px;
    width: 90%;
    box-shadow: var(--glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
    animation: modalPop 0.25s ease;
    text-align: center;
}
@keyframes modalPop {
    from { opacity: 0; transform: scale(0.92) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.modal-message {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.modal-actions .btn {
    min-width: 80px;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
    .admin-layout { flex-direction: column; }
    .admin-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        position: static;
        padding: 14px;
        border-radius: var(--radius-sm);
    }
    .admin-sidebar .admin-nav-item {
        padding: 6px 14px;
        font-size: 0.82rem;
    }
    .post-detail { padding: 32px 28px; }
    .comments-section { padding: 28px 24px; }
    .post-title { font-size: 1.6rem; }
}

@media (max-width: 768px) {
    .home-welcome { padding: 32px 16px 24px; }
    .home-title { font-size: 1.5rem; }
    .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }
    .profile-left .profile-avatar-img,
    .profile-left .profile-avatar-initial {
        width: 72px !important;
        height: 72px !important;
        font-size: 1.6rem !important;
    }
    .profile-right { align-items: center; text-align: center; }
    .profile-username-tag { text-align: center !important; }
    .profile-btn-row { justify-content: center; }
    .profile-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .profile-chip { font-size: 0.7rem; padding: 2px 8px; }
    .profile-post-meta { display: none; }
    .ssr-posts {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 24px;
    }
    .ssr-post { padding: 22px 20px 26px; }
    .ssr-landing { padding: 0 16px 50px; }

    .header-inner {
        padding: 0 14px;
        height: 54px;
    }
    .site-logo .logo-text { font-size: 1rem; }
    .site-logo .logo-badge { width: 32px; height: 32px; }
    .site-logo .logo-badge::after { width: 8px; height: 8px; top: -3px; right: -3px; }
    .nav-link { padding: 6px 12px; font-size: 0.82rem; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .auth-card { padding: 32px 24px; }
    .editor-form { padding: 20px; }
    .editor-header { padding: 14px 18px; }
    .form-row { flex-direction: column; gap: 0; }
    .comment-form .guest-fields { flex-direction: column; gap: 8px; }
    .admin-content { overflow-x: visible; }
    .admin-table-wrap { overflow-x: visible; }
    .admin-table, .admin-table thead, .admin-table tbody, .admin-table tr, .admin-table th, .admin-table td {
        display: block;
    }
    .admin-table thead { display: none; }
    .admin-table tr {
        padding: 14px 16px;
        margin-bottom: 10px;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: var(--radius-sm);
        box-shadow: var(--card-shadow);
    }
    .admin-table td {
        padding: 4px 0;
        border: none;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .admin-table td:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.75rem;
        min-width: 44px;
        flex-shrink: 0;
    }
    .ssr-nav-header { padding: 10px 14px; }
}

@media (max-width: 480px) {
    .post-detail,
    .comments-section {
        padding: 20px 16px;
        border-radius: 12px;
    }
    .ssr-post h2 { font-size: 1.05rem; }
    .nav-link span:not(.icon) { display: none; }
    .post-title { font-size: 1.3rem; }
}



/* Direct avatar image (no container) */
.user-avatar-img { transition: transform 0.2s, box-shadow 0.2s; }
.user-avatar-img:hover { transform: scale(1.1); box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important; }

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    --bg: #07050f;
    --card-bg: rgba(24,16,48,0.3);
    --card-border: rgba(180,150,255,0.06);
    --text: #f0eaff;
    --text-primary: #f0eaff;
    --text-secondary: #c4b5e0;
    --text-muted: #8a7aaa;
    --glass-bg: transparent;
    --glass-border: transparent;
    --glass-blur: blur(2px);
    --gradient-bg: linear-gradient(155deg, #07050f 0%, #0f0825 30%, #1a0f2f 55%, #0d081e 80%, #07050f 100%);
    --accent: #a78bfa;
    --accent-soft: rgba(167,139,250,0.1);
    --accent-glow: rgba(167,139,250,0.15);
    --accent-gradient: linear-gradient(135deg, #a78bfa, #f0a0b0);
    --nav-bg: rgba(7,5,15,0.55);
    --card-shadow: 0 2px 24px rgba(0,0,0,0.3);
    --card-shadow-hover: 0 12px 48px rgba(0,0,0,0.4);
}
/* Ethereal moonlight glow on body for dark mode */
/* Ethereal moonlight glow — desktop only (perf) */
@media (min-width: 768px) {
[data-theme="dark"] body::before {
    content: '';
    position: fixed;
    top: -30%;
    right: -20%;
    width: 80vmax;
    height: 80vmax;
    background: radial-gradient(circle, rgba(167,139,250,0.04) 0%, rgba(240,160,176,0.02) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="dark"] body::after {
    content: '';
    position: fixed;
    bottom: -20%;
    left: -10%;
    width: 60vmax;
    height: 60vmax;
    background: radial-gradient(circle, rgba(139,92,246,0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
}

/* Dark mode nav — deep translucent */
[data-theme="dark"] .site-header {
    border-bottom: 1px solid rgba(180,150,255,0.04);
}
[data-theme="dark"] .header-inner {
    background: transparent;
    backdrop-filter: var(--glass-blur, blur(2px));
    -webkit-backdrop-filter: var(--glass-blur, blur(2px));
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .nav-link {
    color: #d0c8e8;
}
[data-theme="dark"] .nav-link:hover {
    color: #f0eaff;
}
[data-theme="dark"] .nav-link::after {
    background: linear-gradient(90deg, #a78bfa, #f0a0b0);
}
/* Dark mode cards — frosted glass with warmer undertones */
[data-theme="dark"] .ssr-post {
    background: transparent;
    border-color: rgba(180,150,255,0.04);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    -webkit-backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    box-shadow: 0 2px 24px rgba(0,0,0,0.2), 0 0 80px rgba(167,139,250,0.02);
}
[data-theme="dark"] .ssr-post:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(180,150,255,0.08);
    box-shadow: 0 8px 40px rgba(0,0,0,0.35), 0 0 100px rgba(167,139,250,0.04);
}
[data-theme="dark"] .ssr-post h2 a {
    color: #f0eaff;
}
[data-theme="dark"] .ssr-post h2 a:hover {
    color: #c4a8ff;
}
[data-theme="dark"] .ssr-post .meta {
    color: #9480b8;
}
[data-theme="dark"] .home-title {
    color: #f0eaff;
    text-shadow: 0 0 40px rgba(167,139,250,0.1);
}
[data-theme="dark"] .home-desc {
    color: #c4b5e0;
}
[data-theme="dark"] .card-author-name {
    color: #d0c0e8;
}
[data-theme="dark"] .home-stats {
    color: #8a7aaa;
}

/* Dark mode — comments, admin, editor, profile, modals */
[data-theme="dark"] .comments-section {
    background: transparent;
    border-color: rgba(180,150,255,0.06);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
}
[data-theme="dark"] .comment {
    border-bottom-color: rgba(180,150,255,0.04);
}
[data-theme="dark"] .comment-form-main {
    background: rgba(16, 10, 32, 0.4);
    border-color: rgba(180, 150, 255, 0.12);
}
[data-theme="dark"] .comment-form-main:focus-within {
    background: rgba(16, 10, 32, 0.55);
    border-color: rgba(167, 139, 250, 0.35);
}
[data-theme="dark"] .comment-form textarea {
    color: #f0eaff;
}
[data-theme="dark"] .comment-form textarea::placeholder { color: #8a7aaa; }
[data-theme="dark"] .comment-form .guest-fields input {
    background: rgba(16, 10, 32, 0.4);
    border-color: rgba(180, 150, 255, 0.12);
    color: #f0eaff;
}
[data-theme="dark"] .replying-to {
    background: rgba(167, 139, 250, 0.12);
    color: #c4b5e0;
}
[data-theme="dark"] .btn-cancel-reply { color: #8a7aaa; }
[data-theme="dark"] .admin-page {
    color: #f0eaff;
}
[data-theme="dark"] .admin-content h1 {
    color: #f0eaff;
}
[data-theme="dark"] .admin-table {
    border-color: rgba(180,150,255,0.08);
}
[data-theme="dark"] .admin-table th {
    background: rgba(24,16,48,0.3);
    color: #c4b5e0;
    border-bottom-color: rgba(180,150,255,0.08);
}
[data-theme="dark"] .admin-table td {
    border-bottom-color: rgba(180,150,255,0.04);
    color: #d0c8e8;
}
[data-theme="dark"] .admin-sidebar {
    background: transparent;
    border-right-color: rgba(180,150,255,0.04);
}
[data-theme="dark"] .admin-sidebar .admin-nav-item {
    color: #c4b5e0;
}
[data-theme="dark"] .admin-sidebar .admin-nav-item:hover {
    background: rgba(167,139,250,0.08);
    color: #f0eaff;
}
[data-theme="dark"] .admin-sidebar .admin-nav-item.active {
    background: rgba(167,139,250,0.12);
    color: #c4a8ff;
}
[data-theme="dark"] .stat-card {
    background: transparent;
    border-color: rgba(180,150,255,0.06);
}
[data-theme="dark"] .editor-page {
    color: #f0eaff;
}
[data-theme="dark"] .editor-form input,
[data-theme="dark"] .editor-form textarea,
[data-theme="dark"] .editor-form select {
    background: rgba(16,10,32,0.4);
    border-color: rgba(180,150,255,0.08);
    color: #f0eaff;
}
[data-theme="dark"] .editor-form input:focus,
[data-theme="dark"] .editor-form textarea:focus {
    border-color: rgba(167,139,250,0.3);
    box-shadow: 0 0 0 3px rgba(167,139,250,0.06);
}
/* Dark mode for the custom select lives in the shared .cselect-* block above. */
[data-theme="dark"] .profile-page {
    color: #f0eaff;
}
[data-theme="dark"] .profile-edit-form input,
[data-theme="dark"] .profile-edit-form textarea {
    background: rgba(16,10,32,0.4);
    border-color: rgba(180,150,255,0.08);
    color: #f0eaff;
}
[data-theme="dark"] .modal-overlay {
    background: rgba(7,5,15,0.7);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
}
[data-theme="dark"] .modal-box {
    background: rgba(24,16,48,0.8);
    border: 1px solid rgba(180,150,255,0.1);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 120px rgba(167,139,250,0.03);
}
[data-theme="dark"] .post-detail {
    color: #f0eaff;
}
[data-theme="dark"] .post-detail .post-title {
    color: #f0eaff;
    text-shadow: 0 0 40px rgba(167,139,250,0.08);
}
[data-theme="dark"] .post-detail .post-meta-bar {
    color: #c4b5e0;
}
[data-theme="dark"] .post-detail .markdown-body {
    color: #e0d8f0;
}
[data-theme="dark"] .markdown-body blockquote {
    border-left-color: rgba(167,139,250,0.2);
    background: rgba(24,16,48,0.2);
    color: #c4b5e0;
}
[data-theme="dark"] .markdown-body code {
    background: rgba(24,16,48,0.3);
    color: #f0a0b0;
}
[data-theme="dark"] .markdown-body pre {
    background: rgba(16,10,32,0.5);
    border-color: rgba(180,150,255,0.06);
}
[data-theme="dark"] .markdown-body pre code {
    color: #e0d8f0;
}
[data-theme="dark"] .markdown-body table th,
[data-theme="dark"] .markdown-body table td {
    border-color: rgba(180,150,255,0.08);
}
[data-theme="dark"] .markdown-body table tr:nth-child(even) {
    background: rgba(24,16,48,0.15);
}

/* ===== "我的" icon — open book ===== */
.icon-file {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
}
.icon-file::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 10px;
    top: 4px;
    left: 3px;
    border: 1.5px solid currentColor;
    border-radius: 1px 0 0 1px;
    border-right: none;
    background: transparent;
}
.icon-file::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 10px;
    top: 4px;
    right: 3px;
    border: 1.5px solid currentColor;
    border-radius: 0 1px 1px 0;
    border-left: none;
    background: transparent;
}
.icon-sm { width: 18px; height: 18px; display: inline-block; position: relative; vertical-align: middle; }
.icon-lg { width: 36px; height: 36px; display: inline-block; position: relative; }

/* ===== Homepage theme toggle ===== */
.home-theme-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 0;
}
.home-theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* ===== SUN icon (light mode) ===== */
.home-theme-toggle .theme-icon,
.nav-theme-toggle .theme-icon {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: relative;
    background:
        radial-gradient(circle at 50% 50%,
            #e8a000 0 3px,
            transparent 3.5px
        ),
        conic-gradient(from 0deg at 50% 50%,
            #e8a000 0deg 6deg,   transparent 6deg 45deg,
            #e8a000 45deg 51deg,  transparent 51deg 90deg,
            #e8a000 90deg 96deg,  transparent 96deg 135deg,
            #e8a000 135deg 141deg, transparent 141deg 180deg,
            #e8a000 180deg 186deg, transparent 186deg 225deg,
            #e8a000 225deg 231deg, transparent 231deg 270deg,
            #e8a000 270deg 276deg, transparent 276deg 315deg,
            #e8a000 315deg 321deg, transparent 321deg 360deg
        );
    background-size: 100% 100%, 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* ===== MOON icon (dark mode) ===== */
[data-theme="dark"] .home-theme-toggle .theme-icon,
[data-theme="dark"] .nav-theme-toggle .theme-icon {
    background: none;
}
[data-theme="dark"] .home-theme-toggle .theme-icon::before,
[data-theme="dark"] .nav-theme-toggle .theme-icon::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fbbf24;
    position: absolute;
    top: 1px;
    left: 1px;
    /* Mask cuts out a circle on the left, leaving a right-bulging crescent */
    -webkit-mask: radial-gradient(circle at 25% 50%, transparent 28%, black 30%);
    mask: radial-gradient(circle at 25% 50%, transparent 28%, black 30%);
}

/* ===== Page Transition Animations ===== */

/* Fade-in with a subtle upward drift — like foam rising */
@keyframes tideFadeIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Every page wrapper fades in when it appears */
.ssr-landing,
.profile-page,
.post-detail,
.admin-page,
.editor-page,
.ssr-empty {
    animation: tideFadeIn 0.35s ease-out both;
}

/* Post cards have a slightly longer, staggered entrance */
/* Base delay set via JS inline style on each card (index * 0.06s) */
.ssr-post {
    animation: tideFadeIn 0.45s ease-out both;
}

/* ===== Page Transition =====
   NOTE: 曾用 View Transitions API (view-transition-name)。
   它会把 #nav-header / #app 提升为独立合成层，
   导致内部元素的 backdrop-filter 无法采样页面背景（毛玻璃失效）。
   已移除。页面过渡由内容自身的 fadeUp 动画承担。 */

/* ===== Navigation Micro-interactions ===== */
.nav-link {
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.25s ease, left 0.25s ease;
    border-radius: 1px;
}
.nav-link:hover::after {
    width: 60%;
    left: 20%;
}

/* ===== Card Lift Effect ===== */
.ssr-post {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ssr-post:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* ===== Theme Toggle Spin ===== */
.home-theme-toggle {
    transition: transform 0.3s ease;
}
.home-theme-toggle:active {
    transform: rotate(60deg) scale(0.9);
}

/* ===== Smooth Page Scroll ===== */
html {
    scroll-behavior: smooth;
}

/* ===== Scroll-Triggered Reveal Animations ===== */
/* Hidden state — waiting to scroll into view */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
/* Slide in from left */
.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}
/* Slide in from right */
.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}
/* Scale reveal */
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}
/* Nested children stagger — requires .reveal-stagger on parent */
.reveal-stagger > .reveal,
.reveal-stagger > .reveal-left,
.reveal-stagger > .reveal-right {
    transition-delay: calc(0.06s * var(--i, 0));
}

/* ===== Reading Progress Bar (Feature 2) ===== */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    background: linear-gradient(90deg, #ec4899, #a855f7, #6366f1, #06b6d4);
}
.reading-progress.active {
    opacity: 1;
}

/* ===== Click Ripple Effect (Feature 4) ===== */
.ripple-particle {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    z-index: 10000;
    animation: rippleFloat 0.9s ease-out forwards;
}
@keyframes rippleFloat {
    0%   { opacity: 0.9; transform: translate(0, 0) scale(0.5); }
    100% { opacity: 0;   transform: translate(var(--dx, -20px), var(--dy, -60px)) scale(1.2); }
}

/* ===== Draft Auto-Save Indicator (Feature 7) ===== */
.draft-save-indicator {
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    transition: opacity 0.3s ease;
}
.draft-save-indicator .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
    animation: draftPulse 1.5s ease-in-out infinite;
}
.draft-save-indicator.saved .dot {
    background: #10b981;
    animation: none;
}
@keyframes draftPulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}
.draft-restore-bar {
    background: var(--accent-soft);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
    animation: tideFadeIn 0.3s ease-out both;
}
.draft-restore-bar button {
    background: none;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 4px 14px;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 0.2s;
}
.draft-restore-bar button:hover {
    background: var(--accent-soft);
}

/* Draft restore bar: SVG icon + text sit on the left, buttons on the right */
.draft-restore-bar { gap: 10px; }
.draft-restore-bar svg { color: var(--accent); }
.draft-restore-bar > span { display: flex; align-items: center; gap: 6px; }

/* Editor summary input */
.editor-form .form-group input#editor-summary {
    font-size: 0.9rem;
}

/* Word count */
.editor-wordcount {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

/* Split mode: editor + live preview stacked vertically on mobile,
   side-by-side on desktop */
.editor-textarea-wrap.editor-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.editor-textarea-wrap.editor-split textarea#editor-content,
.editor-textarea-wrap.editor-split .editor-preview {
    min-height: 320px !important;
}
.editor-textarea-wrap.editor-split .editor-preview {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 14px;
    background: var(--card-bg);
    overflow-y: auto;
    max-height: 70vh;
}
@media (min-width: 900px) {
    .editor-textarea-wrap.editor-split {
        grid-template-columns: 1fr 1fr;
    }
}

/* Publish confirmation dialog */
.publish-confirm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.publish-confirm-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.88rem;
}
.publish-confirm-label {
    flex-shrink: 0;
    width: 44px;
    color: var(--text-muted);
    padding-top: 1px;
}
.publish-confirm-value {
    color: var(--text-primary);
    word-break: break-word;
}
.publish-confirm-summary {
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Editor tabs (edit / preview) */
.editor-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 0;
}
.editor-tab {
    padding: 8px 20px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: var(--transition);
    user-select: none;
}
.editor-tab:hover {
    color: var(--text-secondary);
}
.editor-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 500;
}
/* Editor preview panel */
.editor-preview {
    padding: 20px 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    overflow-y: auto;
    line-height: 1.8;
}
.editor-preview .markdown-body {
    max-width: 100%;
}

/* Editor image preview */
.editor-image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    margin-top: 6px;
    border-top: 1px solid var(--card-border);
}
.editor-image-preview img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.editor-image-preview img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* ================================================================
   Profile Edit Modal — refined editing experience
   ================================================================ */
body.modal-open { overflow: hidden; }
.profile-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 16, 28, 0.45);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    -webkit-backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: profileFadeIn 0.3s ease;
}
.profile-modal-overlay.closing { animation: profileFadeOut 0.18s ease forwards; }
.profile-modal {
    width: 100%;
    max-width: 460px;
    max-height: min(88vh, 640px);
    background: var(--glass-bg, transparent);
    border: 1.5px solid var(--glass-border, transparent);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(10, 10, 30, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: profileModalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.profile-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
}
.profile-modal-overlay.closing .profile-modal { animation: profileModalOut 0.18s ease forwards; }
.profile-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 12px;
}
.profile-modal-head h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin: 0;
    color: var(--text-primary);
}
.profile-modal-close {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
.profile-modal-close:hover { background: var(--accent-soft); color: var(--accent); }
.profile-modal-body { padding: 6px 22px 20px; }
.profile-avatar-edit {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 0 18px;
    border-bottom: 1px solid rgba(99,102,161,0.08);
    margin-bottom: 16px;
}
.profile-avatar-preview {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card-border);
    box-shadow: 0 4px 14px rgba(139,92,246,0.14);
}
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar-preview .profile-avatar-initial {
    font-size: 1.9rem;
    color: var(--accent);
    font-weight: 700;
}
.profile-avatar-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.profile-avatar-actions .btn {
    border: 1px solid rgba(139,92,246,0.35);
    color: var(--accent);
    background: none;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 0.84rem;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.profile-avatar-actions .btn:hover { background: var(--accent-soft); }
.profile-avatar-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0;
}
.profile-field { position: relative; margin-bottom: 16px; }
.profile-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 7px;
    letter-spacing: 0.01em;
}
.profile-field input,
.profile-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid rgba(99,102,161,0.2);
    border-radius: 10px;
    font-size: 0.9rem;
    background: var(--card-bg);
    color: var(--text-primary);
    outline: none;
    font-family: var(--font-body);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    resize: vertical;
}
.profile-field input:focus,
.profile-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.profile-field-count {
    position: absolute;
    right: 10px;
    bottom: 9px;
    font-size: 0.68rem;
    color: var(--text-muted);
    pointer-events: none;
    background: transparent;
}
.profile-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid rgba(99,102,161,0.08);
}
.profile-modal-foot .btn {
    padding: 9px 22px;
    border-radius: 20px;
    font-size: 0.86rem;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.profile-modal-foot .btn:active { transform: scale(0.97); }
.profile-modal-foot .btn-primary { background: var(--accent); color: #fff; }
.profile-modal-foot .btn-primary:disabled { opacity: 0.6; }
.profile-modal-foot .btn:not(.btn-primary) {
    background: none;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
}
.profile-modal-foot .btn:not(.btn-primary):hover { border-color: var(--accent); color: var(--accent); }

@keyframes profileFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes profileFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes profileModalIn {
    from { opacity: 0; transform: translateY(28px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes profileModalOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(10px) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
    .profile-modal-overlay,
    .profile-modal { animation: none; }
}

@media (max-width: 480px) {
    .profile-modal-overlay { padding: 4vh 14px 0; align-items: flex-start; }
    .profile-modal {
        max-width: none;
        max-height: 92vh;
        border-radius: 18px;
        animation-name: profileSheetIn;
    }
    .profile-modal-head { flex-shrink: 0; }
    .profile-modal-foot { flex-shrink: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
    .profile-modal-overlay.closing .profile-modal { animation-name: profileSheetOut; }
    @keyframes profileSheetIn {
        from { opacity: 0; transform: translateY(60px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes profileSheetOut {
        from { opacity: 1; transform: translateY(0); }
        to { opacity: 0; transform: translateY(60px); }
    }
}

/* ================================================================
   Profile Modal refinements — hover avatar mask, richer details
   ================================================================ */
.profile-avatar-preview {
    position: relative;
    cursor: pointer;
}
.profile-avatar-mask {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(15, 16, 28, 0.55);
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    -webkit-backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
}
.profile-avatar-preview:hover .profile-avatar-mask { opacity: 1; }
.profile-modal-head {
    position: relative;
}
.profile-modal-head::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.4), transparent 60%);
}
.profile-modal-foot .btn-primary {
    background: linear-gradient(135deg, var(--accent), #8b7cf6);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
}
.profile-modal-foot .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

/* ================================================================
   My Posts page — standalone (no admin sidebar)
   ================================================================ */
.myposts-page {
    max-width: 780px;
    margin: 28px auto 48px;
    padding: 0 20px;
    animation: fadeUp 0.3s ease;
}
.myposts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.myposts-head h1 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin: 0;
    color: var(--text-primary);
}
.myposts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.myposts-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--glass-bg, transparent);
    backdrop-filter: var(--glass-blur, blur(2px));
    -webkit-backdrop-filter: var(--glass-blur, blur(2px));
    border: 1.5px solid var(--glass-border, transparent);
    box-shadow: var(--glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
    transition: border-color 0.15s ease, transform 0.15s ease;
    flex-wrap: wrap;
}
.myposts-row:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.myposts-main { min-width: 0; flex: 1; }
.myposts-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}
.myposts-title a { color: var(--text-primary); text-decoration: none; }
.myposts-title a:hover { color: var(--accent); }
.myposts-meta {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.myposts-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .myposts-row { padding: 13px 14px; }
    .myposts-side { width: 100%; justify-content: flex-end; }
}

/* ================================================================
   Circular avatar cropper
   ================================================================ */
.crop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(15, 16, 28, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: profileFadeIn 0.2s ease;
}
.crop-panel {
    width: 100%;
    max-width: 380px;
    background: var(--card-bg, rgba(255,255,255,0.9));
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 24px 60px rgba(10, 10, 30, 0.25);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.crop-head h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    margin: 0;
    color: var(--text-primary);
}
.crop-head p {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 4px 0 0;
}
.crop-viewport {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.15);
}
.crop-viewport:active { cursor: grabbing; }
.crop-viewport canvas {
    display: block;
    width: 280px;
    height: 280px;
}
.crop-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(15, 16, 28, 0.45);
    border-radius: 50%;
}
.crop-circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.crop-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.crop-controls input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}
.crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.crop-actions .btn {
    padding: 8px 22px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    border: none;
}
.crop-actions .btn-primary { background: var(--accent); color: #fff; }
.crop-actions .btn:not(.btn-primary) {
    background: none;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
}

/* ================================================================
   TIDE ANIMATION SYSTEM — 潮汐动画系统
   Philosophy: every interaction responds. Waves in, waves out.
   Motion = transform/opacity/filter only (GPU friendly).
   Easing = exponential ease-out (no bounce). Reduced-motion fallbacks included.
   ================================================================ */

/* ---------- Motion tokens ---------- */
:root {
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 0.2s;
    --dur-med: 0.35s;
    --dur-slow: 0.55s;
}

/* ---------- Keyframes: wave language ---------- */

/* Element rises like a wave from the sea, sharpening into focus */
@keyframes tideSwell {
    from { opacity: 0; transform: translateY(26px) scale(0.985); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* Element recedes like an ebbing wave */
@keyframes tideRecede {
    from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    to   { opacity: 0; transform: translateY(-16px) scale(0.985); filter: blur(6px); }
}
/* Slow ambient drift for decorative glows / avatars */
@keyframes tideDrift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
/* Breathing glow (hover cards, focus rings) */
@keyframes tideGlow {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow, rgba(139,92,246,0.2)); }
    50%      { box-shadow: 0 0 24px 4px var(--accent-glow, rgba(139,92,246,0.35)); }
}
/* Click ripple burst (JS spawns particles with --dx/--dy) */
@keyframes tideBurst {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -40px)) scale(0.4); }
}
/* Modal / sheet entrance — springy but calm */
@keyframes tideModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tideModalOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(14px) scale(0.97); }
}
/* Rotating shimmer for the theme toggle */
@keyframes tideSpin {
    to { transform: rotate(360deg); }
}

/* ---------- Page transition ---------- */
#app.page-enter { animation: tideSwell var(--dur-slow) var(--ease-out-expo) both; }
#app.page-exit  { animation: tideRecede var(--dur-med) var(--ease-out-quint) both; }



/* ---------- Cards & posts: staggered swell on render ---------- */
.ssr-post,
.post-list .ssr-post {
    animation: tideSwell var(--dur-slow) var(--ease-out-expo) both;
}
.post-list .ssr-post:nth-child(2) { animation-delay: 0.05s; }
.post-list .ssr-post:nth-child(3) { animation-delay: 0.1s; }
.post-list .ssr-post:nth-child(4) { animation-delay: 0.15s; }
.post-list .ssr-post:nth-child(5) { animation-delay: 0.2s; }
.post-list .ssr-post:nth-child(6) { animation-delay: 0.25s; }
.post-list .ssr-post:nth-child(7) { animation-delay: 0.3s; }
.post-list .ssr-post:nth-child(8) { animation-delay: 0.35s; }

/* Card hover: rise with a tidal glow */
.ssr-post,
.admin-row,
.myposts-row,
.profile-post-item {
    transition: transform var(--dur-med) var(--ease-out-quart),
                box-shadow var(--dur-med) var(--ease-out-quart),
                border-color var(--dur-med) var(--ease-out-quart),
                background var(--dur-med) var(--ease-out-quart);
}
.ssr-post:hover,
.admin-row:hover,
.myposts-row:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(139, 92, 246, 0.14);
}
.profile-post-item:hover { transform: translateX(4px); }

/* ---------- Buttons: every interaction responds ---------- */
.btn, .btn-primary, .btn-sm, .nav-theme-toggle {
    transition: transform var(--dur-fast) var(--ease-spring),
                box-shadow var(--dur-fast) var(--ease-out-quart),
                background var(--dur-fast) var(--ease-out-quart),
                border-color var(--dur-fast) var(--ease-out-quart),
                color var(--dur-fast) var(--ease-out-quart);
}
.btn:hover, .btn-primary:hover, .btn-sm:hover { transform: translateY(-2px); }
.btn:active, .btn-primary:active, .btn-sm:active,
.nav-theme-toggle:active { transform: scale(0.94); }
.btn-primary:hover { animation: tideGlow 1.8s ease-in-out infinite; }

/* ---------- Nav links: animated underline surge ---------- */
.nav-link::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-med) var(--ease-out-quart);
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* ---------- Theme toggle: spinning icon on switch ---------- */
.nav-theme-toggle:active .theme-icon { animation: tideSpin 0.5s var(--ease-out-quart); }

/* ---------- Modals: spring entrance / wave exit ---------- */
.profile-modal { animation: tideModalIn 0.4s var(--ease-spring) !important; }
.profile-modal-overlay.closing .profile-modal { animation: tideModalOut 0.25s var(--ease-out-quint) forwards !important; }
.crop-panel { animation: tideModalIn 0.4s var(--ease-spring); }
.modal-box { animation: tideModalIn 0.35s var(--ease-spring); }

/* ---------- Scroll reveal (JS adds .revealed) ---------- */
.reveal { opacity: 1; transform: none; transition: none; }
.reveal.revealed { animation: tideSwell var(--dur-slow) var(--ease-out-expo) both; }

/* ---------- Click ripple particles (JS spawns) ---------- */
.ripple-particle {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    z-index: 9998;
    animation: tideBurst 0.7s var(--ease-out-quart) forwards;
}

/* ---------- Avatar pop after upload ---------- */
.profile-avatar-preview img,
#edit-avatar-preview img {
    animation: tideSwell 0.5s var(--ease-spring);
}

/* ---------- Stat numbers (admin dashboard) ---------- */
.admin-stat-num { transition: transform var(--dur-fast) var(--ease-spring); }
.admin-stat-card:hover .admin-stat-num { transform: scale(1.08); }

/* ---------- Badges: soft pulse on status change ---------- */
.badge { transition: transform var(--dur-fast) var(--ease-spring); }
.badge:hover { transform: scale(1.1); }

/* ---------- Reduced motion: calm everything down ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }
    .ssr-post, .post-list .ssr-post { animation: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
    .ripple-particle { display: none !important; }
}

/* ---------- Touch devices: hover fires on tap and causes reflow jank ----------
   On phones a tap triggers :hover BEFORE :active, animating the card lift +
   glow + sheen for every list row. Kill those; taps only use :active. */
@media (hover: none) {
    .ssr-post:hover, .admin-row:hover, .myposts-row:hover,
    .profile-post-item:hover,
    .btn:hover, .btn-primary:hover, .btn-sm:hover,
    .admin-quick:hover, .admin-nav-item:hover,
    .user-avatar-btn:hover, .nav-theme-toggle:hover {
        transform: none;
    }
    .ssr-post:hover, .admin-row:hover, .myposts-row:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border-color: var(--glass-border, transparent);
        background: var(--glass-bg, transparent);
    }
    .admin-row::after, .myposts-row::after { display: none; }
    .btn-primary:hover { animation: none; }
    .admin-nav-item.active::before { box-shadow: none; }
}

/* ================================================================
   FIREFLY-INSPIRED ENHANCEMENTS — richer, layered motion
   ================================================================ */

/* ---------- Top loading progress bar (route changes) ---------- */
#nav-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--accent), #06b6d4, var(--accent));
    background-size: 200% 100%;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    border-radius: 0 3px 3px 0;
    transition: width 0.35s cubic-bezier(0.1, 0.05, 0.1, 1), opacity 0.45s ease-out;
}
#nav-progress.loading { opacity: 1; }
#nav-progress.active { animation: progressShimmer 1.2s linear infinite; }
@keyframes progressShimmer {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}

/* ---------- Header wave trim (tidal watermark at the nav bottom) ---------- */
.site-header {
    position: relative;
}

/* ---------- Two-phase page transition (recede -> swell) ---------- */
#app.page-exit { animation: tideRecede 0.16s var(--ease-out-quint) both; }
#app.page-enter { animation: tideSwell 0.5s var(--ease-out-expo) both; }

/* ---------- Ken Burns: slow zoom on thumbnails ----------
   NOTE: no will-change here — on the home feed there are 20+ thumbnails;
   a permanent will-change:transform promotes each to its own GPU layer,
   which visibly janks scrolling on mid-range phones. */
.ssr-post .thumb img,
.post-list img.thumb,
.profile-post-item img {
    transition: transform 7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ssr-post:hover .thumb img,
.ssr-post:hover img.thumb,
.profile-post-item:hover img { transform: scale(1.09); }

/* ---------- Profile edit modal: fields rise in staggered ---------- */
.profile-modal-body > * {
    animation: fadeInUp 0.45s var(--ease-out-quart) both;
}
.profile-modal-body .profile-avatar-edit { animation-delay: 0.03s; }
.profile-modal-body .profile-field:nth-of-type(1) { animation-delay: 0.1s; }
.profile-modal-body .profile-field:nth-of-type(2) { animation-delay: 0.16s; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Avatar breathing glow inside the edit modal */
.profile-avatar-preview {
    animation: avatarGlow 3s ease-in-out infinite;
}
@keyframes avatarGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.18); }
    50%      { box-shadow: 0 0 18px 3px rgba(139, 92, 246, 0.28); }
}

/* ---------- Theme switch fade ---------- */
body.theme-switching #app,
body.theme-switching #nav-header {
    animation: themeFade 0.35s ease both;
}
@keyframes themeFade {
    from { opacity: 0.35; }
    to   { opacity: 1; }
}

/* ---------- Toast: spring in ---------- */
.notification-toast {
    animation: tideModalIn 0.35s var(--ease-spring);
}

/* ---------- Search / admin rows: hover surge ---------- */
.admin-row, .myposts-row {
    position: relative;
    /* NOTE: no overflow:hidden here — it would clip the custom select dropdown.
       The hover sheen is instead clipped by clip-path on ::after below. */
}
.admin-row::after, .myposts-row::after {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: inset(0 round 12px);
    background: linear-gradient(120deg, transparent 30%, rgba(139,92,246,0.08) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.7s var(--ease-out-quart);
    pointer-events: none;
}
.admin-row:hover::after, .myposts-row:hover::after { transform: translateX(100%); }

/* ---------- Reading progress bar (already exists) gets a glow ---------- */
.reading-progress.active { box-shadow: 0 0 12px var(--accent-glow); }

/* Card is no longer clickable as a whole — only the title link */
.ssr-post { cursor: default; }

/* ================================================================
   Firefly-inspired animation & layout enrichment (2026-08-01)
   ================================================================ */

/* ---------- 1. Navbar surface transition on scroll ---------- */
/* (removed per request — nav keeps its static glass look)

/* ---------- 2. Back to top button ---------- */
#back-to-top {
    position: fixed;
    right: 22px;
    bottom: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #8b5cf6, #c084fc);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35);
    opacity: 0;
    transform: translateY(16px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out-quart), transform 0.3s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 0.3s ease;
    z-index: 900;
}
#back-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
#back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.5);
}
#back-to-top:active { transform: translateY(0) scale(0.94); }
#back-to-top svg { width: 20px; height: 20px; }
[data-theme="dark"] #back-to-top {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}

/* ---------- 3. Nav link expand micro-interaction ---------- */
.nav-link { position: relative; z-index: 0; }
.nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: var(--accent-soft);
    transform: scale(0.5);
    opacity: 0;
    transition: transform 0.18s var(--ease-out-quart), opacity 0.18s ease;
    z-index: -1;
    pointer-events: none;
}
.nav-link:hover::before { transform: scale(1); opacity: 1; }

/* ---------- 4. Home hero scroll-down indicator (removed per request) ----------

/* ---------- 5. Home hero staggered entrance ---------- */
.hero-reveal {
    opacity: 0;
    animation: fadeInUp 0.6s var(--ease-out-quart) both;
}
.home-logo.hero-reveal   { animation-delay: 0.04s; }
.home-title.hero-reveal  { animation-delay: 0.1s; }
.home-desc.hero-reveal   { animation-delay: 0.18s; }
.home-stats.hero-reveal  { animation-delay: 0.26s; }

/* ---------- 6. Theme switch via View Transitions API ---------- */
::view-transition-old(root) {
    animation: themeCrossFadeOut 0.45s ease both;
}
::view-transition-new(root) {
    animation: themeCrossFadeIn 0.45s ease both;
}
@keyframes themeCrossFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes themeCrossFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- 7. Desktop two-column layout + sidebar (Firefly-style) ---------- */
.landing-main { min-width: 0; }
.landing-sidebar {
    display: none;
}
@media (min-width: 1024px) {
    .ssr-landing {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 28px;
        align-items: start;
    }
    .landing-sidebar {
        display: flex;
        flex-direction: column;
        gap: 18px;
        position: sticky;
        top: 84px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        scrollbar-width: none;
    }
    .landing-sidebar::-webkit-scrollbar { display: none; }
}
.sidebar-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    -webkit-backdrop-filter: blur(8px) contrast(0.85) brightness(1.15);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 16px rgba(100, 100, 150, 0.05);
    transition: transform 0.25s var(--ease-out-quart), box-shadow 0.25s ease, border-color 0.25s ease;
}
.sidebar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(100, 100, 150, 0.1);
}
.sidebar-card h3 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(139, 92, 246, 0.18);
}
.sidebar-site { text-align: center; padding: 16px 20px; }
.sidebar-site h3 { text-align: center; }
.sidebar-site .sidebar-site-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 2px;
}
.sidebar-stat { text-align: center; }
.sidebar-stat b {
    display: block;
    font-size: 1.4rem;
    font-family: var(--font-display);
    color: var(--accent);
    line-height: 1.25;
}
.sidebar-stat span {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    margin-top: 2px;
}
.sidebar-cat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-cat-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.86rem;
    transition: background 0.2s var(--ease-out-quart), color 0.2s ease, padding-left 0.2s var(--ease-out-quart);
}
.sidebar-cat-list a:hover {
    background: var(--accent-soft);
    color: var(--accent);
    padding-left: 16px;
}
.sidebar-cat-list a span {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.sidebar-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sidebar-tag-cloud a {
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.72rem;
    text-decoration: none;
    transition: transform 0.2s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), background 0.2s ease, box-shadow 0.2s ease;
}
.sidebar-tag-cloud a:hover {
    transform: translateY(-2px) scale(1.06);
    background: rgba(139, 92, 246, 0.2);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.22);
}
[data-theme="dark"] .sidebar-card {
    background: rgba(24, 16, 48, 0.35);
    border-color: rgba(180, 150, 255, 0.08);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .sidebar-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .sidebar-cat-list a { color: #c4b5e0; }
[data-theme="dark"] .sidebar-cat-list a:hover { color: #f0eaff; }

/* ================================================================
   Mobile sidebar — slide-in from the left edge (phone only)
   Structure: [handle][cards (solid)] [frost (blurred)] all slide together
   ================================================================ */
/* Full-screen frosted layer behind the panel — outside area is blurred */
.mobile-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 949;
    background: rgba(30, 27, 75, 0.22);
    /* Reference frosted-glass recipe (workspace style.css): subtle blur */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.mobile-sidebar-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-sidebar {
    position: fixed;
    top: 50%;
    left: 0;
    /* Closed: translateX(-100%) puts the panel's RIGHT edge flush with the
       screen's LEFT edge (transform % is relative to the panel itself, so this
       holds at ANY viewport width — unlike the old `left: -90vw` which only
       matched width:min(90vw,340px) at 375px and pushed the handle off-screen
       on wider phones/tablets). The handle then peeks out [0..34px]. */
    transform: translateY(-50%) translateX(-100%);
    width: min(90vw, 340px);
    height: min(70vh, calc(100vh - 32px));
    min-height: min(360px, calc(100vh - 32px));
    max-height: min(78vh, calc(100vh - 32px));
    /* transform animation stays on the compositor — no per-frame layout */
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 950;
    display: flex;
    align-items: stretch;
    border-radius: 0 24px 24px 0;
    /* overflow must stay VISIBLE — the handle protrudes from the right edge;
       overflow:hidden clips it (invisible + unclickable). The card zone clips
       its own right corners below. */
    box-shadow: 8px 12px 44px rgba(60, 40, 120, 0.2);
}
.mobile-sidebar.open { transform: translateY(-50%) translateX(0); }
/* Handle hangs off the panel's RIGHT edge — closed: the panel is off-screen
   and the handle alone peeks at the screen's left edge; open: it rides along
   to the panel's right edge. Mirrored: rounded on the outward (right) side. */
.mobile-sidebar-handle {
    position: absolute;
    right: -34px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 56px;
    border: none;
    background: rgba(255, 255, 255, 0.72);
    /* no backdrop-filter here — 0.72 alpha + small surface: blur only costs
       GPU work on scroll/animation with no visible gain */
    border-radius: 0 28px 28px 0;
    box-shadow: 2px 0 14px rgba(60, 40, 120, 0.16);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    z-index: 2;
}
.mobile-sidebar-handle:active {
    background: rgba(255, 255, 255, 0.95);
    color: #7c3aed;
    box-shadow: 2px 0 18px rgba(60, 40, 120, 0.28);
}
.handle-arrow {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: currentColor;
    display: block;
}
.handle-arrow::before { content: '\203A'; } /* › — closed: opening faces right */
.mobile-sidebar.open .handle-arrow::before { content: '\2039'; } /* ‹ — open: faces left */
/* When the sidebar is open, its panel (z 950) + overlay (z 949) must cover the
   assistant handle (z 951) so users can't misclick it while browsing the sidebar. */
body.mobile-sidebar-open .ai-assistant-handle { z-index: 1; }
body.mobile-sidebar-open .ai-assistant-panel { z-index: 1; }
/* Outer layer clips the right-corner radius (overflow:hidden); the inner
   cards zone scrolls. Two layers because Chromium's rounded clipping on a
   scrolling container is unreliable once children carry their own backgrounds. */
.mobile-sidebar-cards-outer {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.96);
    /* no backdrop-filter — 0.96 alpha is effectively opaque; blur is pure
       GPU cost here (full-surface resample on every scroll frame) */
    border-radius: 0 24px 24px 0;
    overflow: hidden;
    display: flex;
    z-index: 1;
    /* Android Chrome bug: this overflow:hidden + border-radius clipping
       container paints INCOMPLETELY (cards show only half until an
       interaction forces a repaint) when it is a plain painting layer.
       Force a compositing layer via a no-op transform — restores the
       composited state the old backdrop-filter used to provide, without
       the blur cost. */
    transform: translateZ(0);
    will-change: transform;
}
.mobile-sidebar-cards {
    flex: 1;
    min-width: 0;
    padding: 14px 14px 16px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* old-iOS inertial scrolling */
    overscroll-behavior: contain;        /* don't chain scroll to <body> */
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mobile-sidebar-cards .sidebar-card {
    padding: 14px 15px;
    font-size: 0.95rem;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(100, 100, 150, 0.06);
    /* iOS Safari render bug: backdrop-filter inside a scrolling container
       samples late on scroll → cards flash blank until an interaction forces
       a repaint. The panel behind is already near-opaque (0.96), so the card
       blur has nothing to sample — drop it, use a solid-ish card background. */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="dark"] .mobile-sidebar-cards .sidebar-card {
    background: rgba(24, 16, 48, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mobile-sidebar-cards .sidebar-card h3 { font-size: 0.82rem; margin-bottom: 6px; padding-bottom: 5px; }
.mobile-sidebar-cards .sidebar-cat-list a,
.mobile-sidebar-cards .sidebar-rank-list a { padding: 8px 12px; font-size: 0.92rem; }
/* Cap the category list so the rank card (now above it) stays visible when
   the panel opens — the list scrolls internally if it overflows. */
.mobile-sidebar-cards .sidebar-cat-list {
    max-height: 34vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
/* Short viewports (landscape phones): shrink the category cap so the rank
   card above it stays fully visible. */
@media (max-height: 500px) {
    .mobile-sidebar-cards .sidebar-cat-list { max-height: 22vh; }
    /* Compress card density so site + rank + categories all fit on screen */
    .mobile-sidebar-cards .sidebar-card { padding: 8px 12px; }
    .mobile-sidebar-cards .sidebar-card h3 { margin-bottom: 3px; padding-bottom: 3px; }
    .mobile-sidebar-cards .sidebar-cat-list a,
    .mobile-sidebar-cards .sidebar-rank-list a { padding: 6px 10px; }
    .mobile-sidebar-cards .sidebar-stat b { font-size: 1.2rem; }
}
.mobile-sidebar-cards .sidebar-site-stats { gap: 24px; }
.mobile-sidebar-cards .sidebar-stat b { font-size: 1.4rem; }
body.mobile-sidebar-open,
html.mobile-sidebar-open { overflow: hidden; }

/* ---------- Notification panel (system notifications) ---------- */
.notification-panel {
    position: fixed;
    inset: 0;
    z-index: 1200;               /* above mobile sidebar (950) + nav (999) */
    background: rgba(15, 12, 40, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: notifFadeIn 0.22s var(--ease-out-expo) both;
}
.notification-panel-card {
    width: min(92vw, 420px);
    max-height: 70vh;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(20, 10, 60, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: notifPop 0.26s var(--ease-out-expo) both;
}
.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(100, 100, 150, 0.12);
}
.notification-panel-header h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--heading-color, #333);
    margin: 0;
}
.notification-panel-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(100, 100, 150, 0.1);
    color: var(--text-secondary, #666);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    padding: 0;
}
.notification-panel-close:hover { background: rgba(100, 100, 150, 0.2); color: var(--danger, #e53e3e); }
.notification-panel-body {
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-muted, #999);
}
.notification-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.08);
    position: relative;
}
.notification-empty-icon::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 2px solid rgba(139, 92, 246, 0.35);
    border-radius: 50%;
}
.notification-empty p { font-size: 0.9rem; margin: 0; }
.notification-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Collapsible card: head (dot + title + date) always visible; content hidden
   until the card is expanded. Expanding one collapses the others. */
.notification-item {
    padding: 13px 15px;
    border-radius: 12px;
    background: rgba(100, 100, 150, 0.06);
    border: 1px solid rgba(100, 100, 150, 0.1);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.notification-item:hover {
    background: rgba(100, 100, 150, 0.1);
}
.notification-item.unread {
    background: rgba(139, 92, 246, 0.07);
    border-color: rgba(139, 92, 246, 0.28);
}
.notification-item-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.notification-item-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 7px;
}
.notification-item-title {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--heading-color, #333);
    word-break: break-word;
}
.notification-item.unread .notification-item-title {
    font-weight: 700;
    color: var(--accent);
}
/* Date always visible on its own line, left-aligned under the title */
.notification-item-meta {
    margin-top: 4px;
    padding-left: 16px;   /* aligns with the title text (dot 8px + gap 8px) */
}
.notification-item-date {
    font-size: 0.75rem;
    color: var(--text-muted, #999);
}
/* Animated expand/collapse: grid-rows 0fr → 1fr keeps height smooth */
.notification-item-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s var(--ease-out-quart), opacity 0.3s ease;
    opacity: 0;
}
.notification-item.expanded .notification-item-body {
    grid-template-rows: 1fr;
    opacity: 1;
}
.notification-item-body-inner {
    overflow: hidden;
    min-height: 0;
}
.notification-item-content {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(139, 92, 246, 0.2);
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--text-secondary, #666);
    white-space: pre-wrap;
    word-break: break-word;
}
.notification-item.expanded {
    background: rgba(139, 92, 246, 0.05);
    box-shadow: 0 4px 18px rgba(60, 40, 120, 0.08);
}
/* While one card is expanded the others are hidden (restored on "关闭") */
.notification-item.hidden { display: none; }
/* Bottom action bar — "关闭" appears once a card is expanded */
.notification-panel-actions {
    padding: 12px 16px;
    border-top: 1px solid rgba(100, 100, 150, 0.12);
    display: flex;
    justify-content: center;
}
.notification-panel-done {
    min-width: 120px;
    padding: 9px 24px;
    border: none;
    border-radius: 10px;
    background: var(--accent, #6366f1);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.notification-panel-done:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
}
[data-theme="dark"] .notification-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(180, 150, 255, 0.1);
}
[data-theme="dark"] .notification-item.unread {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(167, 139, 250, 0.4);
}
[data-theme="dark"] .notification-item-title { color: #f0eaff; }

/* ---------- Generic smooth expand/collapse (grid-rows 0fr→1fr) ----------
   Reusable: wrap content in <div class="expand-wrap"><div class="expand-inner">…
   then toggle .open on .expand-wrap. Height is fully auto (no max-height guess).
   Used by: notification cards, comment reply box, … */
.expand-wrap {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.32s var(--ease-out-quart), opacity 0.28s ease;
}
.expand-wrap.open {
    grid-template-rows: 1fr;
    opacity: 1;
}
.expand-inner {
    overflow: hidden;
    min-height: 0;
}
/* ---------- Admin: notification management ---------- */
.admin-notif-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-notif-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(100, 100, 150, 0.05);
    border: 1px solid rgba(100, 100, 150, 0.12);
}
.admin-notif-row.muted { opacity: 0.6; }
.admin-notif-main { flex: 1; min-width: 0; }
.admin-notif-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--heading-color, #333);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-notif-preview {
    font-size: 0.82rem;
    color: var(--text-muted, #999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}
.admin-notif-date { font-size: 0.75rem; color: var(--text-muted, #999); }
.admin-notif-side {
    display: flex;
    gap: 8px;
    flex: none;
}
.notif-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15, 12, 40, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: notifFadeIn 0.2s var(--ease-out-quart) both;
}
.notif-editor-card {
    width: min(94vw, 520px);
    max-height: 86vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(20, 10, 60, 0.28);
    padding: 22px;
    animation: notifPop 0.28s var(--ease-out-quart) both;
}
.notif-editor-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--heading-color, #333);
    margin: 0 0 16px;
}
.notif-editor-field {
    margin-bottom: 14px;
}
.notif-editor-field label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted, #888);
    margin-bottom: 6px;
    letter-spacing: 0.04em;
}
.notif-editor-field input[type="text"],
.notif-editor-field input[type="datetime-local"],
.notif-editor-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(100, 100, 150, 0.25);
    background: var(--input-bg, rgba(255, 255, 255, 0.8));
    color: var(--text-primary, #333);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.notif-editor-field input:focus,
.notif-editor-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.notif-editor-field textarea { resize: vertical; line-height: 1.6; }
.notif-editor-check label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
    cursor: pointer;
}
.notif-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}
[data-theme="dark"] .notif-editor-card { background: rgba(24, 17, 48, 0.98); }
[data-theme="dark"] .notif-editor-card h3 { color: #f0eaff; }
[data-theme="dark"] .admin-notif-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(180, 150, 255, 0.12);
}
[data-theme="dark"] .admin-notif-title { color: #f0eaff; }
@keyframes notifFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes notifPop {
    from { opacity: 0; transform: translateY(10px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .notification-panel,
    .notification-panel-card { animation: none; }
}
[data-theme="dark"] .notification-panel {
    background: rgba(7, 5, 15, 0.5);
}
[data-theme="dark"] .notification-panel-card { background: rgba(20, 14, 42, 0.96); }
[data-theme="dark"] .notification-panel-header h3 { color: #f0eaff; }
[data-theme="dark"] .mobile-sidebar {
    box-shadow: 8px 12px 44px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .mobile-sidebar-overlay {
    background: rgba(7, 5, 15, 0.3);
}
[data-theme="dark"] .mobile-sidebar-handle {
    background: rgba(24, 16, 48, 0.75);
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.4);
    color: #a78bfa;
}
[data-theme="dark"] .mobile-sidebar-handle:active { background: rgba(30, 22, 58, 0.95); color: #c4b5e0; }
[data-theme="dark"] .mobile-sidebar-cards-outer {
    background: rgba(15, 10, 32, 0.96);
}
@media (min-width: 1024px) {
    .mobile-sidebar,
    .mobile-sidebar-overlay { display: none; }
}

/* ---------- Sidebar: 全部分类 entry + engagement ranking menu ---------- */
.sidebar-cat-all { font-weight: 600; }
.sidebar-cat-all span { color: inherit; }
.sidebar-cat-list a.active,
.sidebar-rank-list a.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.sidebar-cat-list a.active span,
.sidebar-rank-list a.active span { color: var(--accent); }
.sidebar-rank-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-rank-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.86rem;
    transition: background 0.2s var(--ease-out-quart), color 0.2s ease, padding-left 0.2s var(--ease-out-quart);
}
.sidebar-rank-list a:hover {
    background: var(--accent-soft);
    color: var(--accent);
    padding-left: 16px;
}
#posts-wrap { scroll-margin-top: 76px; }
[data-theme="dark"] .sidebar-rank-list a { color: #c4b5e0; }
[data-theme="dark"] .sidebar-rank-list a:hover { color: #f0eaff; }
[data-theme="dark"] .sidebar-rank-list a.active { background: rgba(167,139,250,0.14); color: #f0eaff; }

/* ---------- Card bottom row: author + engagement metrics ---------- */
.card-footer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--card-border);
}
.card-footer-row .card-author {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.card-metrics {
    position: absolute;
    right: 24px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    background: transparent;
}
.metric { display: inline-flex; align-items: center; gap: 4px; }
.metric svg { width: 13px; height: 13px; }
.ssr-post:hover .metric { color: var(--text-secondary); }
.ssr-post { position: relative; }

/* Mobile: author + metrics pinned to the card's bottom-right corner */
@media (max-width: 767px) {
    .card-author-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 130px;
    }
    .card-metrics {
        right: 14px;
        bottom: 14px;
        gap: 10px;
    }
    .ssr-landing { padding: 0 14px 40px; }
    .ssr-posts { gap: 14px; margin-top: 20px; }
    .ssr-post { padding: 16px; border-radius: 14px; }
    .card-footer-row { padding-bottom: 6px; }
}

/* ---------- Post detail: mobile adaptation ---------- */
@media (max-width: 767px) {
    .post-detail {
        padding: 26px 18px;
        margin-top: 16px;
        border-radius: 14px;
    }
    .post-title {
        font-size: 1.45rem;
        line-height: 1.35;
    }
    .post-meta-bar {
        gap: 10px;
        padding-bottom: 16px;
        margin-bottom: 20px;
    }
    /* Meta bar on phones: row 1 = category/date/views, row 2 = author + actions */
    .post-meta-bar .post-category { order: 1; }
    .post-meta-bar time { order: 2; }
    .post-meta-bar .post-views { order: 3; margin-left: auto; }
    .post-meta-bar .post-author { order: 4; flex-basis: 100%; }
    .post-meta-bar .btn-sm { order: 5; margin-left: 0; }
    .post-meta-bar .admin-menu-wrap { order: 6; }
    .post-content {
        font-size: 0.98rem;
        line-height: 1.85;
    }
    .comments-section {
        padding: 22px 18px;
        margin: 20px auto 40px;
        border-radius: 14px;
    }
    .comment {
        gap: 12px;
        padding: 14px 0;
    }
    .comment-avatar-initial {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
    .comment-form .guest-fields {
        flex-direction: column;
        gap: 10px;
    }
    .post-detail .post-tags {
        margin-top: 20px;
        padding-top: 16px;
    }
    .markdown-body pre { padding: 14px 14px; }
    .markdown-body table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ================================================================
   Post engagement card (between article & comments)
   ================================================================ */
.post-engage-card {
    max-width: var(--content-max);
    margin: 22px auto 0;
    padding: 18px 22px;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    animation: fadeUp 0.5s ease;
}
.post-engage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.post-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.post-more-btn svg { width: 20px; height: 20px; }
.post-more-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
}
.post-engage-metrics {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.post-engage-metrics .metric { display: inline-flex; align-items: center; gap: 5px; }
.post-engage-metrics .metric svg { width: 15px; height: 15px; }
.post-engage-actions {
    display: flex;
    gap: 12px;
    margin-top: 14px;
}
.engage-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1;
    padding: 11px 16px;
    border-radius: 12px;
    border: none;
    background: rgba(139, 92, 246, 0.06);
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: color 0.22s ease, box-shadow 0.22s ease, transform 0.18s var(--ease-out-quart);
}
.engage-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #8b5cf6, #c084fc);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 0;
}
.engage-btn > svg, .engage-btn > span { position: relative; z-index: 1; }
.engage-btn svg { width: 17px; height: 17px; }
.engage-btn:hover { color: var(--accent); }
.engage-btn:hover::before { opacity: 0.08; }
.engage-btn.active { color: #fff; box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3); }
.engage-btn.active::before { opacity: 1; }
.engage-btn:active { transform: scale(0.97); }
.engage-btn.active svg {
    animation: engagePop 0.4s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
@keyframes engagePop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ⋮ popup action modal */
.post-more-modal {
    padding: 8px 10px !important;
    width: 260px !important;
    max-width: calc(100vw - 48px);
}
.post-more-head {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    text-align: center;
    padding: 10px 0 8px;
    border-bottom: 1px dashed rgba(99, 102, 161, 0.14);
    margin-bottom: 6px;
}
.post-more-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s var(--ease-out-quart);
}
.post-more-item:hover {
    background: var(--accent-soft);
    color: var(--accent);
    padding-left: 20px;
}
.post-more-item.danger { color: #e53e3e; }
.post-more-item.danger:hover {
    background: rgba(229, 62, 62, 0.08);
    color: #e53e3e;
}
.post-more-item .more-ic { width: 22px; display: inline-flex; justify-content: center; flex-shrink: 0; }
.post-more-item .more-ic svg { width: 17px; height: 17px; }
.post-more-cancel {
    width: 100%;
    margin-top: 6px;
    padding: 11px;
    border: none;
    border-radius: 10px;
    background: rgba(99, 102, 161, 0.08);
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease;
}
.post-more-cancel:hover { background: rgba(99, 102, 161, 0.16); }
[data-theme="dark"] .post-more-modal { background: #171030; }
[data-theme="dark"] .post-more-item { color: #f0eaff; }
[data-theme="dark"] .post-more-item:hover { background: rgba(167, 139, 250, 0.14); }

/* Mobile: engagement card */
@media (max-width: 767px) {
    .post-engage-card { padding: 14px 16px; margin-top: 16px; }
    .post-engage-metrics { gap: 12px; font-size: 0.74rem; }
    .post-engage-actions { gap: 10px; }
    .engage-btn { padding: 10px 10px; font-size: 0.82rem; }
}

/* ================================================================
   ADMIN + MOBILE PERFORMANCE HARDENING (2026-08-16)
   ================================================================ */

/* 1. iOS zooms the page when a form control <16px gets focus — opening the
      user-role select on a phone used to zoom/jump the whole layout.
      Force 16px on all admin/editor controls on small screens. */
@media (max-width: 768px) {
    .admin-shell select.admin-select,
    .admin-shell .admin-input,
    .admin-shell .admin-field input,
    .admin-shell .admin-field select,
    .admin-shell .admin-field textarea,
    .editor-form input,
    .editor-form select,
    .editor-form textarea,
    .editor-form .form-group input,
    .editor-form .form-group select,
    .ai-behavior-item > input[type="number"],
    .ai-model-search input {
        font-size: 16px;
    }
}

/* 2. Touch devices: drop the expensive frosted-glass blur on admin surfaces.
      backdrop-filter re-blurs the whole panel on every repaint (row hover,
      dropdown open, innerHTML swap) — the #1 mobile jank source. The panels
      are transparent anyway (--glass-bg), so removing it is visually ~identical. */
@media (hover: none) and (pointer: coarse) {
    .admin-sidebar, .admin-main, .admin-stat-card, .admin-quick,
    .admin-card, .admin-inline-form-box, .admin-row,
    .ssr-post, .myposts-row, .profile-post-item {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* 3. Touch devices: kill sticky hover (a tap leaves :hover stuck) and the
      translateY/sweep transitions that re-blur + re-layout rows on phones.
      Hover-only effects are pointless without a pointer anyway. */
@media (hover: none) and (pointer: coarse) {
    .ssr-post, .admin-row, .myposts-row, .profile-post-item {
        transition: border-color 0.15s ease, background 0.15s ease !important;
        transform: none !important;
    }
    .ssr-post:hover, .admin-row:hover, .myposts-row:hover,
    .profile-post-item:hover {
        transform: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }
    .admin-row::after, .myposts-row::after,
    .ssr-post .thumb img, .post-list img.thumb, .profile-post-item img {
        transition: none !important;
    }
    .ssr-post:hover .thumb img, .ssr-post:hover img.thumb,
    .profile-post-item:hover img {
        transform: none !important;
    }
}

/* AI admin sub-tabs (AI users | Global configs) */
.ai-admin-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.ai-admin-tab {
    padding: 8px 16px; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
    color: var(--text-muted); background: var(--card-bg, rgba(255,255,255,0.6));
    border: 1px solid var(--glass-border, rgba(0,0,0,0.08)); cursor: pointer;
    text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ai-admin-tab:hover { color: var(--text-primary); }
.ai-admin-tab.active {
    color: #fff; background: var(--accent, #2f6f6a);
    border-color: var(--accent, #2f6f6a);
}
[data-theme="dark"] .ai-admin-tab { background: rgba(24,16,48,0.5); border-color: rgba(180,150,255,0.15); }
[data-theme="dark"] .ai-admin-tab.active { background: var(--accent, #2f6f6a); border-color: var(--accent, #2f6f6a); }

/* ===== Global AI config: type-card grid + review rule groups ===== */
.ai-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.ai-type-card { background: var(--card-bg, #fff); border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 16px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; }
.ai-type-card:active { transform: scale(0.97); }
.ai-type-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(60,40,120,0.12); }
.ai-type-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--accent-gradient); flex-shrink: 0; }
.ai-type-ic svg { width: 20px; height: 20px; }
.ai-type-card h3 { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--text-primary, #222); }
.ai-type-card p { margin: 0; font-size: 0.76rem; color: var(--text-muted, #888); line-height: 1.4; }
.ai-type-card .ai-type-count { margin-top: 2px; font-size: 0.72rem; color: var(--accent, #2f6f6a); font-weight: 600; }
.ai-type-back { margin-bottom: 12px; }
.ai-rule-group { border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: var(--card-bg, #fff); }
.ai-rule-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: rgba(0,0,0,0.03); }
.ai-rule-group-head h4 { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--text-primary, #222); display: flex; flex-direction: column; gap: 2px; }
.ai-rule-group-desc { font-size: 0.7rem; font-weight: 400; color: var(--text-muted, #888); }
.ai-rule-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-top: 1px solid rgba(0,0,0,0.05); }
.ai-rule-row .ai-rule-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ai-rule-row .ai-rule-main b { font-size: 0.82rem; color: var(--text-primary, #222); }
.ai-rule-row .ai-rule-main span { font-size: 0.74rem; color: var(--text-muted, #888); line-height: 1.45; }
[data-theme="dark"] .ai-type-card { background: #1a1430; border-color: rgba(180,150,255,0.14); }
[data-theme="dark"] .ai-type-card:hover { border-color: var(--accent); }
[data-theme="dark"] .ai-rule-group { background: #1a1430; border-color: rgba(180,150,255,0.14); }
[data-theme="dark"] .ai-rule-group-head { background: rgba(180,150,255,0.06); }
[data-theme="dark"] .ai-rule-row { border-top-color: rgba(180,150,255,0.1); }
@media (max-width: 480px) { .ai-type-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; } }

/* ===== AI Admin Assistant (left edge-sidebar, mirrors mobile sidebar) ===== */
.ai-assistant-panel {
    position: fixed;
    top: 68px;
    left: 0;
    /* Top-anchored (no vertical centering) so the panel always sits in the
       upper half of the screen, well clear of the mobile keyboard. Height is
       capped by 100dvh minus margins: on phones the dynamic viewport shrinks
       when the keyboard opens, so the panel auto-compresses. */
    transform: translateX(-100%);
    width: min(92vw, 360px);
    height: min(64vh, calc(100vh - 150px));
    height: min(64vh, calc(100dvh - 150px));
    min-height: 240px;
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 950;
    display: flex;
    align-items: stretch;
    border-radius: 0 24px 24px 0;
    box-shadow: 8px 12px 44px rgba(60, 40, 120, 0.2);
    pointer-events: none;
}
.ai-assistant-panel.open { transform: translateX(0); pointer-events: auto; }
/* Frosted overlay behind the assistant panel — mirrors .mobile-sidebar-overlay
   so the rest of the page blurs/dims when the assistant is open. */
.ai-assistant-overlay {
    position: fixed;
    inset: 0;
    z-index: 948;
    background: rgba(30, 27, 75, 0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.ai-assistant-overlay.open { opacity: 1; pointer-events: auto; }
/* Keyboard open (JS sets --avail = visual viewport height): squeeze the panel
   so its bottom edge stays above the keyboard. */
body.assistant-kbd-open .ai-assistant-panel { max-height: calc(var(--avail, 100dvh) - 60px); }
/* The handle is a CHILD of the panel (like .mobile-sidebar-handle) so it
   rides along with the slide animation. It must stay clickable even while
   the panel itself is pointer-events:none (closed state). */
.ai-assistant-panel .ai-assistant-handle { pointer-events: auto; }
/* Opaque card zone — same as mobile-sidebar-cards-outer (0.96 alpha ≈ solid). */
.ai-assistant-card {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0 24px 24px 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateZ(0);
    will-change: transform;
}
[data-theme="dark"] .ai-assistant-card { background: #16112b; }
/* Left-edge handle — child of .ai-assistant-panel (absolute, hangs off the
   panel's RIGHT edge, exactly like .mobile-sidebar-handle). Always visible. */
.ai-assistant-handle {
    position: absolute;
    right: -34px;
    /* Directly below the mobile sidebar button (which is vertically centered):
       sidebar bottom = 50vh + 28px; assistant handle top = that + ~8px gap.
       Handle center (relative to panel, top:68px) = 50vh + 28 + 8 + 28 = 50vh + 64
       → top = 50vh + 64 - 68 = 50vh - 4px. */
    top: calc(50vh - 4px);
    transform: translateY(-50%);
    width: 34px;
    height: 56px;
    border: none;
    background: #fff;
    border-radius: 0 28px 28px 0;
    box-shadow: 2px 0 14px rgba(60, 40, 120, 0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b5cf6;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    z-index: 951;
}
.ai-assistant-handle:active { background: #f4f4f8; color: #7c3aed; box-shadow: 2px 0 18px rgba(60, 40, 120, 0.28); }
.ai-assistant-handle svg { width: 22px; height: 22px; }
.ai-assistant-handle.open { color: #7c3aed; }
[data-theme="dark"] .ai-assistant-handle { background: #1e1836; color: #b4a5ff; }
.ai-assistant-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
}
[data-theme="dark"] .ai-assistant-head { border-bottom-color: rgba(180,150,255,0.15); }
.ai-assistant-head h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.ai-assistant-head-actions { display: flex; align-items: center; gap: 2px; }
.ai-assistant-token {
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 8px;
}
.ai-assistant-token:hover { background: rgba(0,0,0,0.05); color: #8b5cf6; }
.ai-assistant-token svg { width: 16px; height: 16px; }
/* Token usage popover — anchored under the head, right-aligned */
.ai-assistant-usage-pop {
    position: absolute;
    top: 52px;
    right: 46px;
    width: 168px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(60, 40, 120, 0.16);
    padding: 8px 12px;
    z-index: 952;
}
[data-theme="dark"] .ai-assistant-usage-pop { background: #1e1836; border-color: rgba(180,150,255,0.15); }
.ai-usage-head { font-size: 0.72rem; font-weight: 700; color: #8b5cf6; padding: 4px 0 2px; border-bottom: 1px solid rgba(0,0,0,0.06); margin-bottom: 2px; }
[data-theme="dark"] .ai-usage-head { border-bottom-color: rgba(180,150,255,0.12); }
.ai-usage-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 0.78rem; }
.ai-usage-row span { color: var(--text-muted); }
.ai-usage-row b { color: #8b5cf6; font-weight: 700; font-variant-numeric: tabular-nums; }
.ai-assistant-close {
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 8px;
}
.ai-assistant-close:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }
.ai-assistant-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
.ai-assistant-msg { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.ai-assistant-msg.user { align-items: flex-end; }
.ai-assistant-msg.bot { align-items: flex-start; }
.ai-assistant-bubble {
    max-width: 86%; min-width: 0; padding: 9px 13px; border-radius: 14px; font-size: 0.86rem;
    line-height: 1.6; word-break: break-word; overflow-wrap: anywhere; white-space: normal;
}
.ai-assistant-msg.user .ai-assistant-bubble { background: var(--accent, #2f6f6a); color: #fff; border-bottom-right-radius: 4px; }
.ai-assistant-msg.bot .ai-assistant-bubble { background: rgba(0,0,0,0.06); color: var(--text-primary); border-bottom-left-radius: 4px; }
[data-theme="dark"] .ai-assistant-msg.bot .ai-assistant-bubble { background: rgba(180,150,255,0.12); }
/* Markdown content inside bubbles — proper paragraph spacing, heading
   hierarchy, and pre-line so single newlines (common in chat replies) are
   preserved instead of collapsing into one blob. */
.ai-assistant-bubble pre { background: rgba(0,0,0,0.07); border-radius: 8px; padding: 8px 10px; overflow-x: auto; margin: 0.45em 0; font-size: 0.78rem; line-height: 1.5; }
.ai-assistant-bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ai-assistant-bubble p { margin: 0.45em 0; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.ai-assistant-bubble p:first-child { margin-top: 0; }
.ai-assistant-bubble p:last-child { margin-bottom: 0; }
.ai-assistant-bubble ul, .ai-assistant-bubble ol { margin: 0.45em 0; padding-left: 20px; }
.ai-assistant-bubble li { margin: 0.25em 0; line-height: 1.55; }
.ai-assistant-bubble a { color: var(--accent, #2f6f6a); text-decoration: underline; }
.ai-assistant-bubble h1, .ai-assistant-bubble h2, .ai-assistant-bubble h3, .ai-assistant-bubble h4,
.ai-assistant-bubble h5, .ai-assistant-bubble h6 { margin: 0.65em 0 0.3em; font-weight: 700; line-height: 1.4; }
.ai-assistant-bubble h1 { font-size: 1.2em; }
.ai-assistant-bubble h2 { font-size: 1.14em; }
.ai-assistant-bubble h3 { font-size: 1.08em; }
.ai-assistant-bubble h4, .ai-assistant-bubble h5, .ai-assistant-bubble h6 { font-size: 1em; }
.ai-assistant-bubble img { max-width: 100%; border-radius: 8px; margin: 4px 0; }
.ai-assistant-bubble blockquote { margin: 0.5em 0; padding-left: 10px; border-left: 3px solid rgba(0,0,0,0.15); color: var(--text-muted); }
[data-theme="dark"] .ai-assistant-bubble pre { background: rgba(255,255,255,0.08); }
.ai-assistant-busy { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.ai-assistant-busy i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
    animation: ai-dot 1.2s infinite ease-in-out;
}
.ai-assistant-busy i:nth-child(2) { animation-delay: 0.15s; }
.ai-assistant-busy i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-dot { 0%,80%,100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-assistant-input {
    display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
}
[data-theme="dark"] .ai-assistant-input { border-top-color: rgba(180,150,255,0.15); }
.ai-assistant-input input,
.ai-assistant-input textarea {
    flex: 1; min-width: 0; padding: 9px 12px; border-radius: 14px; font-size: 0.88rem;
    border: 1px solid rgba(0,0,0,0.12); background: #fff; color: var(--text-primary);
    outline: none; transition: border-color 0.2s; resize: none;
    line-height: 1.5; max-height: 96px; overflow-y: auto;
}
[data-theme="dark"] .ai-assistant-input input,
[data-theme="dark"] .ai-assistant-input textarea { background: #1e1836; border-color: rgba(180,150,255,0.2); }
.ai-assistant-input input:focus { border-color: var(--accent, #2f6f6a); }
.ai-assistant-send {
    width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--accent, #2f6f6a); color: #fff; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform 0.15s;
}
.ai-assistant-send svg { width: 16px; height: 16px; }
.ai-assistant-send:active { transform: scale(0.92); }

/* Content review rules */
.ai-rules-desc { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 12px; }
.ai-rules-list { display: flex; flex-direction: column; gap: 8px; }
.ai-rule-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    background: var(--card-bg, rgba(255,255,255,0.6));
    border: 1px solid var(--glass-border, rgba(0,0,0,0.06));
}
.ai-rule-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-rule-main b { font-size: 0.88rem; color: var(--text-primary); }
.ai-rule-main span { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
[data-theme="dark"] .ai-rule-row { background: rgba(24,16,48,0.5); border-color: rgba(180,150,255,0.15); }
/* ============================================================
   Round: stability fixes (kept from reader-features round)
   - engage-card compositing fix (comment hydration white flash)
   - notification panel frosted overlay + smooth expand/collapse
   - image lightbox with gesture deadlock guard
   ============================================================ */

/* ---------- Engage card: never flash white on comment hydration ----------
   Android Chromium repaints the backdrop-filter layer blank/white when the
   comment list below is inserted (same bug family as the old mobile sidebar
   cards). Force a composited layer AND raise the alpha so even a transient
   blur failure cannot look like an empty white box. */
.post-engage-card {
    background: rgba(255, 255, 255, 0.88);
    transform: translateZ(0);
    will-change: transform;
}
[data-theme="dark"] .post-engage-card {
    background: rgba(24, 16, 48, 0.76);
}

/* ---------- Notification panel polish ---------- */
/* Frosted overlay, matching the mobile sidebar / assistant panels */
.notification-panel {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
/* Sibling cards fade out before display:none (smooth collapse feel) */
.notification-item.collapsed {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
/* "关闭" action bar fades in instead of popping */
.notification-panel-actions { animation: notifFadeIn 0.25s var(--ease-out-quart); }

/* ---------- Image lightbox (article images) ---------- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(8, 6, 20, 0.88);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
    animation: notifFadeIn 0.2s ease both;
    /* Pinch-zoom deadlock guard: native two-finger zoom inside a fixed
       backdrop-filter layer froze some mobile browsers (infinite gesture/
       repaint loop). The image is already fit to the viewport, so zooming
       gains nothing — disable every touch gesture except tap. */
    touch-action: none;
}
.lightbox-overlay img {
    max-width: 94vw;
    max-height: 88vh;
    border-radius: 10px;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.55);
    object-fit: contain;
    animation: notifPop 0.25s var(--ease-out-quart) both;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}


/* ---- Assistant streaming UI (202608170900) ---- */
.ai-assistant-msg.bot { flex-direction: column; align-items: flex-start; }
.ai-assistant-stream {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: none; background: transparent;
    border-radius: 8px; color: #8b5cf6; cursor: pointer; padding: 0;
}
.ai-assistant-stream:hover { background: rgba(0,0,0,0.05); }
.ai-assistant-stream svg { width: 15px; height: 15px; }
.ai-assistant-stream .ai-stream-off { display: none; }
.ai-assistant-stream.off { color: rgba(0,0,0,0.35); }
.ai-assistant-stream.off .ai-stream-on { display: none; }
.ai-assistant-stream.off .ai-stream-off { display: block; }
.ai-assistant-toolcard {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 86%;
    font-size: 0.74rem; color: #6d28d9;
    background: rgba(139,92,246,0.08);
    border: 1px solid rgba(139,92,246,0.18);
    border-radius: 12px; padding: 4px 9px; margin: 1px 0;
    word-break: break-word; line-height: 1.4;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ai-assistant-toolcard svg { width: 12px; height: 12px; flex-shrink: 0; }
.ai-assistant-toolcard .ai-assistant-toolname { font-weight: 600; flex-shrink: 0; }
.ai-assistant-toolcard .ai-tool-time {
    color: rgba(0,0,0,0.45); font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: auto;
}
.ai-assistant-toolcard.tooling { color: #8b5cf6; background: rgba(139,92,246,0.13); border-color: rgba(139,92,246,0.35); }
.ai-assistant-toolcard.tooling .ai-tool-spinner {
    width: 10px; height: 10px; flex-shrink: 0;
    border: 2px solid rgba(139,92,246,0.25); border-top-color: #8b5cf6;
    border-radius: 50%; animation: ai-tool-spin 0.8s linear infinite;
}
@keyframes ai-tool-spin { to { transform: rotate(360deg); } }
.ai-assistant-toolcard.done { color: rgba(0,0,0,0.55); background: rgba(139,92,246,0.05); border-color: rgba(139,92,246,0.12); }
.ai-assistant-toolcard.done svg { color: #16a34a; }
.ai-assistant-toolcard.error { color: #dc2626; border-color: rgba(220,38,38,0.3); background: rgba(220,38,38,0.06); }
.ai-assistant-toolcard.error svg { color: #dc2626; }
[data-theme="dark"] .ai-assistant-toolcard { color: #c4b5fd; background: rgba(139,92,246,0.12); border-color: rgba(180,150,255,0.2); }
[data-theme="dark"] .ai-assistant-toolcard.tooling { color: #ddd6fe; background: rgba(139,92,246,0.2); border-color: rgba(196,181,253,0.4); }
[data-theme="dark"] .ai-assistant-toolcard.done { color: rgba(255,255,255,0.6); background: rgba(139,92,246,0.08); border-color: rgba(180,150,255,0.12); }
[data-theme="dark"] .ai-assistant-toolcard .ai-tool-time { color: rgba(255,255,255,0.4); }
.ai-assistant-img {
    max-width: 100%; max-height: 320px; width: auto; display: block;
    border-radius: 12px; margin: 3px 0; object-fit: contain;
    background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.06);
}
[data-theme="dark"] .ai-assistant-img { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
.ai-assistant-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.ai-assistant-typing i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
    animation: ai-dot 1.2s infinite ease-in-out;
}
.ai-assistant-typing i:nth-child(2) { animation-delay: 0.15s; }
.ai-assistant-typing i:nth-child(3) { animation-delay: 0.3s; }
.ai-usage-sec {
    font-size: 0.68rem; font-weight: 700; color: #8b5cf6;
    padding: 6px 0 2px; border-bottom: 1px solid rgba(0,0,0,0.06);
}
[data-theme="dark"] .ai-usage-sec { border-bottom-color: rgba(180,150,255,0.12); }
.ai-assistant-retry { margin-top: 6px; align-self: flex-start; }

/* ===== Desktop adaptation for the AI assistant (>=1024px) =====
   The assistant was tuned for phones; on wide screens the 360px panel and
   34px handle feel tiny. Enlarge the panel, handle, fonts and input while
   keeping the mobile layout untouched below 1024px. */
@media (min-width: 1024px) {
    .ai-assistant-panel {
        width: min(30vw, 480px);
        height: min(76vh, calc(100dvh - 110px));
        min-height: 320px;
        max-height: calc(100dvh - 110px);
        border-radius: 0 28px 28px 0;
    }
    .ai-assistant-handle {
        right: -42px;
        width: 42px;
        height: 68px;
        border-radius: 0 32px 32px 0;
        box-shadow: 3px 0 18px rgba(60, 40, 120, 0.22);
    }
    .ai-assistant-handle svg { width: 28px; height: 28px; }
    .ai-assistant-head { padding: 16px 18px; }
    .ai-assistant-head h3 { font-size: 1.1rem; }
    .ai-assistant-head-actions { gap: 4px; }
    .ai-assistant-head-actions button { padding: 6px; }
    .ai-assistant-body { padding: 16px; gap: 12px; }
    .ai-assistant-bubble {
        max-width: 78%;
        padding: 11px 15px;
        font-size: 0.96rem;
        line-height: 1.65;
        border-radius: 16px;
    }
    .ai-assistant-bubble h1 { font-size: 1.3em; }
    .ai-assistant-bubble h2 { font-size: 1.22em; }
    .ai-assistant-bubble h3 { font-size: 1.14em; }
    .ai-assistant-bubble pre { font-size: 0.84rem; }
    .ai-assistant-input { padding: 12px 14px; gap: 10px; }
    .ai-assistant-input textarea { font-size: 0.95rem; padding: 10px 14px; }
    .ai-assistant-send { width: 42px; height: 42px; }
    .ai-assistant-send svg { width: 18px; height: 18px; }
    .ai-assistant-toolcard {
        max-width: 78%;
        font-size: 0.82rem;
        padding: 5px 11px;
        border-radius: 14px;
    }
    .ai-assistant-toolcard svg { width: 14px; height: 14px; }
    .ai-assistant-img { max-height: 380px; border-radius: 14px; }
    .ai-assistant-usage-pop { font-size: 0.84rem; }
    .ai-usage-row { font-size: 0.84rem; padding: 6px 0; }
    .ai-usage-sec { font-size: 0.74rem; }
}

/* ============================================================
   个人主页悬浮层（Profile Mask）v2
   点击头像 → 头像飞行到中央（transform 一镜到底）→ 白色遮罩展开
   遮罩内容复用原 .profile-* 布局（白底 + 紫色点缀）
   z-index: overlay 995（> 侧边栏 950 / 助手 948，< nav 999 / 模态框 1000）
   ============================================================ */
.profile-mask-overlay {
    position: fixed;
    inset: 0;
    z-index: 995;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.profile-mask-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30, 20, 60, 0.35);
    /* 流畅性关键：动画期间 blur(0px)——backdrop-filter 每帧重算整屏背景是
       移动端掉帧头号杀手。打开/关闭动画（opacity 0↔1）期间无模糊开销，动画
       完成（.settled）后 transition 平滑过渡到 blur(2px)，不突变不闪。 */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
    opacity: 0;
}
.profile-mask-overlay.settled .profile-mask-backdrop {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ---- 飞行头像：外层定位 + 内层缩放（translate/scale 解耦 → 直线飞行） ----
   外层：position fixed left/top 0，90x90，只动画 translate（直线路径）。
   内层：100% 撑满，只动画 scale（独立缩放）。
   打开：触发源 → 遮罩头像位。关闭：遮罩头像位 → 触发源。 */
.profile-avatar-flight {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 996;
    width: 90px;
    height: 90px;
    pointer-events: none;
    will-change: transform;
}
.profile-avatar-flight-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--accent-gradient, linear-gradient(135deg, #8b5cf6, #c084fc));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    overflow: hidden;
    /* 与最终头像视觉一致：紫色 ring 外圈（无模糊光晕 → 不显大） */
    box-shadow: 0 0 0 2.5px var(--accent, #8b5cf6);
    will-change: transform;
}
.profile-avatar-flight-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* adopt 常驻后：不再需要合成层提升（fixed 飞行已结束）。
   reparent(fixed→static) 时元素若带独立合成层(will-change:transform)，
   渲染线程要异步迁移合成层，低端机会闪一帧。adopted 类清掉 will-change，
   让元素以普通层身份进入遮罩布局——迁移变轻量、零闪烁。 */
.profile-avatar-flight.adopted,
.profile-avatar-flight.adopted .profile-avatar-flight-inner {
    will-change: auto;
}

/* ---- 白色遮罩（从头像中心 scale 展开/收缩，WAAPI 控制） ---- */
.profile-mask {
    position: relative;
    z-index: 995;
    width: 92vw;
    height: 88vh;
    max-width: 560px;
    max-height: 92vh;
    background: #ffffff;
    color: #2b2440;
    border-radius: 22px;
    box-shadow: 0 24px 80px rgba(20, 10, 50, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.18);
    opacity: 0;
    transform-origin: center center;
    pointer-events: none;
}
.profile-mask.open {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}
.profile-mask-overlay.closing .profile-mask {
    pointer-events: none;
}

/* ---- 头部（标题 + 关闭按钮） ---- */
.profile-mask-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.14);
    flex-shrink: 0;
}
.profile-mask-title {
    font-family: var(--font-heading, inherit);
    font-size: 1.05rem;
    font-weight: 700;
    color: #2b2440;
}
.profile-mask-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(139, 92, 246, 0.1);
    color: #6b5b95;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.profile-mask-close svg { width: 18px; height: 18px; }
.profile-mask-close:hover { background: rgba(139, 92, 246, 0.2); transform: rotate(90deg); }
.profile-mask-close:active { transform: scale(0.92); }

/* ---- 滚动内容区 ---- */
.profile-mask-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 28px;
    /* 无论内容长短都预留滚动条空间：骨架(内容短无滚动条)与真实内容
       (长,有滚动条)的可用宽度一致 → 头像水平位置零偏差 */
    scrollbar-gutter: stable;
}

/* ============================================================
   遮罩内复用原个人主页布局（.profile-*），白底 + 紫色点缀适配
   ============================================================ */
.profile-mask-body .profile-page {
    max-width: 100%;
    margin: 0;
    padding: 0;
    animation: none;
}
.profile-mask-body .profile-header {
    background: #faf8ff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(139, 92, 246, 0.14);
    border-radius: 16px;
    box-shadow: none;
    padding: 22px 18px;
    margin-bottom: 14px;
    /* 骨架与真实内容高度对齐：骨架 header(内容短)与真实 header(文字多)高度
       不一致会导致内容替换瞬间下方区域整体跳动（闪）。min-height 兜底，
       骨架/真实都至少 260px → 替换时头像与下方卡片位置零变化。 */
    min-height: 260px;
}
.profile-mask-body .profile-left { min-width: 90px; }
.profile-mask-body .profile-avatar-img,
.profile-mask-body .profile-avatar-initial {
    /* 用 box-shadow 外圈替代 border：不占布局，保证 90px 内容尺寸
       与骨架头像(90px 无边框)完全一致，飞行层落点与头像零偏差 */
    border: none;
    box-shadow: 0 0 0 2.5px var(--accent, #8b5cf6), 0 6px 20px rgba(139, 92, 246, 0.28);
}
.profile-mask-body .profile-name { color: #241d3a; margin-top: 0; }
.profile-mask-body .profile-username-tag { color: #8b7fb0; }
.profile-mask-body .profile-bio { color: #554a78; }
.profile-mask-body .profile-chip {
    background: rgba(139, 92, 246, 0.08);
    color: #6b5b95;
}
.profile-mask-body .profile-stats-row { gap: 10px; margin-bottom: 14px; }
.profile-mask-body .profile-stat-card {
    background: #faf8ff;
    backdrop-filter: none;
    border: 1px solid rgba(139, 92, 246, 0.12);
    box-shadow: none;
}
.profile-mask-body .profile-stat-num { color: #2b2440; }
.profile-mask-body .profile-stat-label { color: #8b7fb0; }
.profile-mask-body .profile-split-row { gap: 14px; margin-bottom: 18px; }
.profile-mask-body .profile-split-card {
    background: #faf8ff;
    backdrop-filter: none;
    border: 1px solid rgba(139, 92, 246, 0.12);
    box-shadow: none;
    padding: 14px 16px;
}
.profile-mask-body .profile-section-title {
    color: #3d3460;
    border-bottom-color: rgba(139, 92, 246, 0.14);
}
.profile-mask-body .profile-cat-name { color: #554a78; }
.profile-mask-body .profile-cat-bar-wrap { background: rgba(139, 92, 246, 0.12); }
.profile-mask-body .profile-cat-count { color: #8b7fb0; }
.profile-mask-body .profile-recent-item,
.profile-mask-body .profile-post-item {
    border-color: rgba(139, 92, 246, 0.12);
}
.profile-mask-body .profile-recent-title { color: #3d3460; }
.profile-mask-body .profile-recent-item:hover .profile-recent-title { color: var(--accent, #8b5cf6); }
.profile-mask-body .profile-recent-meta { color: #b3a8cf; }
.profile-mask-body .profile-post-title { color: #2b2440; }
.profile-mask-body .profile-post-item:hover .profile-post-title { color: var(--accent, #8b5cf6); }
.profile-mask-body .profile-post-meta { color: #8b7fb0; }
.profile-mask-body .profile-post-cat {
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent, #8b5cf6);
}
.profile-mask-body .profile-edit-form {
    background: #faf8ff;
    backdrop-filter: none;
    border: 1px solid rgba(139, 92, 246, 0.12);
    box-shadow: none;
}

/* ---- 桌面端：居中卡片 ---- */
@media (min-width: 768px) {
    .profile-mask { width: 560px; height: 88vh; }
    .profile-mask-body { padding: 20px 24px 32px; }
}
/* 窄屏小高度：遮罩略矮，避免溢出 */
@media (max-height: 640px) {
    .profile-mask { height: 92vh; }
}

/* ============================================================
   深色模式适配（遮罩 + 遮罩内原布局）
   ============================================================ */
[data-theme="dark"] .profile-mask {
    background: #16112b;
    color: #e8e0f5;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .profile-mask-head { border-color: rgba(180, 150, 255, 0.16); }
[data-theme="dark"] .profile-mask-title { color: #f0eafd; }
[data-theme="dark"] .profile-mask-close {
    background: rgba(180, 150, 255, 0.12);
    color: #c4b8e0;
}
[data-theme="dark"] .profile-mask-close:hover { background: rgba(180, 150, 255, 0.22); }

[data-theme="dark"] .profile-mask-body .profile-header,
[data-theme="dark"] .profile-mask-body .profile-stat-card,
[data-theme="dark"] .profile-mask-body .profile-split-card,
[data-theme="dark"] .profile-mask-body .profile-edit-form {
    background: #1d1730;
    border-color: rgba(180, 150, 255, 0.16);
    box-shadow: none;
}
[data-theme="dark"] .profile-mask-body .profile-name { color: #f0eafd; }
[data-theme="dark"] .profile-mask-body .profile-username-tag { color: #a99ac8; }
[data-theme="dark"] .profile-mask-body .profile-bio { color: #c4b8e0; }
[data-theme="dark"] .profile-mask-body .profile-chip {
    background: rgba(180, 150, 255, 0.14);
    color: #c4b8e0;
}
[data-theme="dark"] .profile-mask-body .profile-stat-num { color: #f0eafd; }
[data-theme="dark"] .profile-mask-body .profile-stat-label { color: #a99ac8; }
[data-theme="dark"] .profile-mask-body .profile-section-title {
    color: #e8e0f5;
    border-bottom-color: rgba(180, 150, 255, 0.16);
}
[data-theme="dark"] .profile-mask-body .profile-cat-name { color: #d0c6ea; }
[data-theme="dark"] .profile-mask-body .profile-cat-bar-wrap { background: rgba(180, 150, 255, 0.16); }
[data-theme="dark"] .profile-mask-body .profile-cat-count { color: #a99ac8; }
[data-theme="dark"] .profile-mask-body .profile-recent-item,
[data-theme="dark"] .profile-mask-body .profile-post-item { border-color: rgba(180, 150, 255, 0.14); }
[data-theme="dark"] .profile-mask-body .profile-recent-title { color: #e8e0f5; }
[data-theme="dark"] .profile-mask-body .profile-recent-meta { color: #a99ac8; }
[data-theme="dark"] .profile-mask-body .profile-post-title { color: #f0eafd; }
[data-theme="dark"] .profile-mask-body .profile-post-meta { color: #a99ac8; }
[data-theme="dark"] .profile-mask-body .profile-post-cat {
    background: rgba(180, 150, 255, 0.16);
    color: #d0c6ea;
}
[data-theme="dark"] .profile-mask-body .profile-avatar-img,
[data-theme="dark"] .profile-mask-body .profile-avatar-initial {
    box-shadow: 0 0 0 2.5px #a78bfa, 0 6px 20px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .profile-avatar-skeleton {
    background: rgba(180, 150, 255, 0.14);
    box-shadow: 0 0 0 2.5px rgba(180, 150, 255, 0.22);
}
[data-theme="dark"] .skeleton-line { background: rgba(180, 150, 255, 0.12); }

/* ---- 骨架屏（数据加载中的占位，与真实布局同构） ---- */
.profile-avatar-skeleton {
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.14);
    /* box-shadow 外圈替代 border：不占布局，尺寸严格 90px 与真实头像一致 */
    box-shadow: 0 0 0 2.5px rgba(139, 92, 246, 0.2);
    animation: skeletonPulse 1.3s ease-in-out infinite;
    animation-delay: 0.45s; /* 遮罩展开后再脉动，避免 scale 动画期间抖动 */
    flex-shrink: 0;
}
.skeleton-line {
    height: 14px;
    border-radius: 7px;
    background: rgba(139, 92, 246, 0.1);
    margin: 9px 0;
    animation: skeletonPulse 1.3s ease-in-out infinite;
    animation-delay: 0.45s;
}
@keyframes skeletonPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

/* 深色模式飞行层 ring 与最终头像一致 */
[data-theme="dark"] .profile-avatar-flight-inner {
    box-shadow: 0 0 0 2.5px #a78bfa;
}