:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-soft: #fafafa;
    --surface-dark: #111214;
    --text: #1f1f20;
    --muted: #7b7b82;
    --line: #e9eaee;
    --line-deep: #d8dae1;
    --primary: #111214;
    --accent: #1677ff;
    --warm: #ff8c36;
    --danger: #e5484d;
    --success: #1f9d63;
    --shadow: 0 10px 30px rgba(17, 18, 20, 0.05);
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --mobile-header-offset: 0px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    position: relative;
    overflow-x: hidden;
}

body.theme-hacker {
    --bg: #020807;
    --surface: rgba(4, 16, 14, 0.92);
    --surface-soft: rgba(8, 24, 21, 0.9);
    --surface-dark: #020706;
    --text: #d9fff3;
    --muted: #88b8aa;
    --line: rgba(52, 255, 180, 0.18);
    --line-deep: rgba(52, 255, 180, 0.34);
    --primary: #00e493;
    --accent: #30ffab;
    --shadow: 0 18px 48px rgba(0, 255, 150, 0.08);
    background:
        radial-gradient(circle at 14% 18%, rgba(0, 255, 156, 0.12), transparent 22%),
        radial-gradient(circle at 84% 12%, rgba(0, 178, 120, 0.10), transparent 20%),
        linear-gradient(180deg, #020807 0%, #06100e 58%, #020807 100%);
    color: var(--text);
}

body.theme-particle {
    --bg: #f4fbfb;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-soft: rgba(244, 252, 252, 0.92);
    --text: #172326;
    --muted: #607276;
    --line: rgba(0, 174, 190, 0.18);
    --line-deep: rgba(0, 150, 165, 0.30);
    --primary: #062a2f;
    --accent: #00b7c8;
    --shadow: 0 18px 46px rgba(0, 148, 164, 0.10);
    background:
        radial-gradient(circle at 18% 12%, rgba(0, 213, 190, 0.16), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(22, 119, 255, 0.10), transparent 24%),
        linear-gradient(180deg, #fbffff 0%, #eef8f8 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

textarea {
    resize: vertical;
}

.container {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
}

.page-shell {
    padding: 24px 0 56px;
    position: relative;
    z-index: 1;
}

.site-background {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

body.theme-hacker.home-body .site-background,
body.theme-particle.home-body .site-background {
    z-index: 2;
    mix-blend-mode: multiply;
}

body.theme-hacker .site-background,
body.theme-particle .site-background {
    z-index: 2;
}

body.theme-hacker .site-background {
    mix-blend-mode: screen;
}

body.theme-particle .site-background {
    mix-blend-mode: multiply;
}

body.theme-hacker .site-background::before,
body.theme-hacker .site-background::after,
body.theme-particle .site-background::before,
body.theme-particle .site-background::after {
    content: "";
    position: absolute;
    inset: -12%;
    pointer-events: none;
}

body.theme-hacker .site-background::before {
    background-image:
        linear-gradient(rgba(48, 255, 171, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(48, 255, 171, 0.08) 1px, transparent 1px),
        radial-gradient(circle, rgba(48, 255, 171, 0.26) 0 1px, transparent 2px);
    background-size: 44px 44px, 44px 44px, 88px 88px;
    opacity: 0.62;
    animation: particle-drift 20s linear infinite;
}

body.theme-hacker .site-background::after {
    background:
        radial-gradient(circle at 18% 24%, rgba(0, 255, 156, 0.22), transparent 18%),
        radial-gradient(circle at 78% 72%, rgba(48, 255, 171, 0.16), transparent 20%);
    opacity: 0.72;
    filter: blur(3px);
    animation: particle-pulse 6s ease-in-out infinite alternate;
}

body.theme-particle .site-background::before {
    background-image:
        radial-gradient(circle, rgba(0, 213, 190, 0.32) 0 1.4px, transparent 2.4px),
        radial-gradient(circle, rgba(22, 119, 255, 0.16) 0 1.2px, transparent 2.2px);
    background-size: 54px 54px, 92px 92px;
    background-position: 0 0, 28px 18px;
    opacity: 0.74;
    animation: particle-drift 14s linear infinite;
}

body.theme-particle .site-background::after {
    background:
        radial-gradient(circle at 16% 20%, rgba(0, 213, 190, 0.26), transparent 20%),
        radial-gradient(circle at 72% 18%, rgba(22, 119, 255, 0.16), transparent 18%),
        radial-gradient(circle at 84% 80%, rgba(0, 213, 190, 0.18), transparent 22%);
    opacity: 0.82;
    filter: blur(2px);
    animation: particle-pulse 5s ease-in-out infinite alternate;
}

.site-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: none;
}

body.theme-hacker .site-particles,
body.theme-particle .site-particles {
    display: block;
    opacity: 0.95;
}

.site-background__glow {
    position: absolute;
    inset: auto auto -12% -6%;
    width: min(44vw, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 219, 191, 0.11), rgba(0, 219, 191, 0.04) 42%, rgba(0, 0, 0, 0) 72%);
    filter: blur(18px);
    opacity: 0.8;
}

body.theme-hacker.home-body .site-background__glow,
body.theme-particle.home-body .site-background__glow {
    opacity: 0.95;
}

@keyframes particle-drift {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(76px, 42px, 0);
    }
}

@keyframes particle-pulse {
    from {
        opacity: 0.42;
        transform: scale(0.98);
    }

    to {
        opacity: 0.78;
        transform: scale(1.03);
    }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.site-footer {
    position: relative;
    z-index: 1;
}

body.has-mobile-header {
    padding-top: var(--mobile-header-offset);
}

body.has-mobile-header .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    transition: transform 0.26s ease, box-shadow 0.24s ease;
    will-change: transform;
    box-shadow: 0 12px 28px rgba(17, 18, 20, 0.08);
}

body.has-mobile-header .site-header.is-mobile-hidden {
    transform: translateY(calc(-100% - 10px));
    box-shadow: none;
}

.site-header__top {
    background: var(--surface-dark);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
}

.site-header__top-inner,
.site-header__main-inner,
.site-header__micro-links,
.primary-nav,
.header-tools,
.channel-nav__inner,
.footer-shell,
.section__title,
.forum-card__media-top,
.forum-card__media-bottom,
.forum-card__author,
.forum-card__meta,
.thread-actions,
.badge-row,
.reply-card__head,
.thread-meta,
.action-row,
.search-bar,
.pagination,
.admin-nav,
.checkbox-row,
.hero-feature__badges,
.hero-feature__meta,
.detail-banner__head,
.detail-banner__meta,
.board-hero__meta,
.contributor-item,
.contributor-item__meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-header__top-inner {
    justify-content: space-between;
    min-height: 38px;
}

.site-header__main {
    position: relative;
}

.site-header__top > .container,
.site-header__main > .container {
    width: min(1720px, calc(100% - 72px));
}

.site-header__copy,
.brand__text,
.hero-feature__body,
.hero-mini__content,
.forum-card__body,
.forum-card__author div,
.sidebar-card,
.notice-item,
.ranking-item div,
.contributor-item__meta,
.circle-card__body,
.page-header > div,
.profile-hero > div,
.detail-banner__content,
.thread-card,
.thread-card h3,
.thread-card p,
.thread-card__head,
.thread-card__footer,
.reply-card__content,
.editor-workspace__head > div,
.editor-submitbar__meta,
.editor-toolbar,
.editor-toolbar__group {
    min-width: 0;
}

.site-header__copy {
    line-height: 1.5;
}

.site-header__micro-links {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.site-header__micro-links a:hover {
    color: #fff;
}

.site-header__main-inner {
    display: grid;
    grid-template-columns: minmax(300px, 0.92fr) minmax(360px, 1.35fr) max-content;
    align-items: center;
    min-height: 78px;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.brand__logo {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 18px rgba(17, 18, 20, 0.12);
}

.brand__text {
    display: grid;
    gap: 2px;
}

.brand__text strong {
    font-size: 1rem;
}

.brand__text small {
    color: var(--muted);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.primary-nav {
    min-width: 0;
    justify-self: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
    padding-inline: 0;
}

.primary-nav::-webkit-scrollbar {
    display: none;
}

.primary-nav a,
.site-header__micro-links a {
    transition: color 0.2s ease;
}

.primary-nav a {
    flex: 0 0 auto;
    position: relative;
    color: #4b4d55;
    font-weight: 500;
}

.primary-nav a.is-active,
.primary-nav a:hover {
    color: var(--text);
}

.primary-nav a.is-active::after,
.primary-nav a:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 2px;
    background: var(--text);
}

.header-tools {
    justify-self: end;
    justify-content: flex-end;
    flex-shrink: 0;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 10px;
}

.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    order: 20;
    padding: 6px 7px 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    box-shadow: 0 8px 20px rgba(17, 18, 20, 0.04);
}

.theme-switch span {
    font-size: 0.82rem;
    color: var(--muted);
    white-space: nowrap;
}

.theme-switch select {
    width: 76px;
    border: 0;
    border-radius: 999px;
    padding: 7px 20px 7px 9px;
    background:
        linear-gradient(135deg, rgba(0, 213, 190, 0.12), rgba(255, 255, 255, 0.72)),
        var(--surface-soft);
    color: var(--text);
    font-weight: 700;
    outline: none;
    cursor: pointer;
}

@media (min-width: 1500px) {
    .theme-switch {
        position: absolute;
        top: 50%;
        right: clamp(24px, 4.5vw, 96px);
        z-index: 35;
        transform: translateY(-50%);
    }
}

.header-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px;
    width: 64px;
    min-width: 64px;
    overflow: hidden;
    transition: width 0.24s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.header-search input {
    width: 0;
    min-width: 0;
    border: none;
    opacity: 0;
    padding: 6px 0;
    background: transparent;
    outline: none;
    pointer-events: none;
    transition: width 0.24s ease, opacity 0.18s ease;
}

.header-search:focus-within,
.header-search.is-expanded {
    width: clamp(160px, 20vw, 240px);
    border-color: #c9ced8;
    box-shadow: 0 10px 24px rgba(17, 18, 20, 0.08);
}

.header-search:focus-within input,
.header-search.is-expanded input {
    width: 100%;
    opacity: 1;
    pointer-events: auto;
}

.header-search__toggle,
.header-search__submit {
    border: none;
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.18s ease, max-width 0.24s ease, padding 0.24s ease;
}

.header-search__toggle {
    background: var(--primary);
    color: #fff;
    flex-shrink: 0;
    min-width: 42px;
    padding-left: 10px;
    padding-right: 10px;
}

.header-search__submit {
    background: var(--primary);
    color: #fff;
    flex-shrink: 0;
    max-width: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    pointer-events: none;
}

.header-search:focus-within .header-search__submit,
.header-search.is-expanded .header-search__submit {
    max-width: 88px;
    opacity: 1;
    padding-left: 14px;
    padding-right: 14px;
    pointer-events: auto;
}

.header-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    min-width: 0;
}

.header-points {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(22, 119, 255, 0.18);
    background: linear-gradient(180deg, #f4f8ff 0%, #eef4ff 100%);
    color: #1c4fa0;
    font-weight: 600;
    white-space: nowrap;
}

.header-points strong {
    font-size: 1rem;
    color: #0f2e66;
}

.header-pet-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 213, 190, 0.22);
    background: linear-gradient(135deg, rgba(0, 213, 190, 0.12), rgba(255, 255, 255, 0.9));
    color: #08766f;
    font-weight: 700;
    white-space: nowrap;
}

.header-user span:last-child {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-nav {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.channel-nav__inner {
    min-height: 54px;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.channel-nav__inner::-webkit-scrollbar {
    display: none;
}

.channel-chip,
.status-pill,
.tag,
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.82rem;
    border-radius: 999px;
}

.channel-chip {
    padding: 8px 14px;
    border: 1px solid var(--line);
    color: #53555e;
    background: #fff;
}

.channel-chip.is-active,
.channel-chip:hover,
.channel-chip.is-static {
    color: var(--text);
    border-color: #cfd2db;
    background: #f8f8fa;
}

.status-pill {
    padding: 5px 10px;
    background: rgba(17, 18, 20, 0.08);
    color: #3f4045;
}

.status-pill--warm {
    background: rgba(255, 140, 54, 0.14);
    color: #b35f18;
}

.button {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 12px 18px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button--compact {
    padding: 10px 14px;
    font-size: 0.92rem;
}

.button--ghost {
    background: #fff;
    color: var(--text);
    border-color: var(--line-deep);
}

body.theme-hacker .site-header,
body.theme-hacker .channel-nav,
body.theme-hacker .site-footer {
    background: rgba(2, 10, 9, 0.88);
    border-color: var(--line);
    color: var(--text);
    backdrop-filter: blur(18px) saturate(1.3);
}

body.theme-hacker .site-header__top {
    background: #020706;
    color: rgba(217, 255, 243, 0.72);
}

body.theme-hacker .brand__logo,
body.theme-hacker .avatar-badge {
    box-shadow: 0 0 0 1px rgba(48, 255, 171, 0.28), 0 0 28px rgba(0, 255, 156, 0.18);
}

body.theme-hacker .primary-nav a::after {
    background: var(--accent);
    box-shadow: 0 0 14px rgba(48, 255, 171, 0.7);
}

body.theme-hacker .header-search,
body.theme-hacker .header-user,
body.theme-hacker .header-points,
body.theme-hacker .theme-switch,
body.theme-hacker .button--ghost,
body.theme-hacker .channel-chip,
body.theme-hacker .flash,
body.theme-hacker .sidebar-card,
body.theme-hacker .board-hero,
body.theme-hacker .detail-banner,
body.theme-hacker .forum-card,
body.theme-hacker .thread-card,
body.theme-hacker .auth-card,
body.theme-hacker .settings-card,
body.theme-hacker .admin-card,
body.theme-hacker .point-product-card,
body.theme-hacker .pet-egg-card,
body.theme-hacker .pet-active-panel,
body.theme-hacker .pet-chat-hero,
body.theme-hacker .pet-ai-chat,
body.theme-hacker .pet-ai-empty,
body.theme-hacker .pet-side-card,
body.theme-hacker .pet-card,
body.theme-hacker .pet-species-card,
body.theme-hacker .pet-companion-widget__panel,
body.theme-hacker .thread-paywall,
body.theme-hacker .editor-panel,
body.theme-hacker .editor-preview,
body.theme-hacker .responsive-admin-table tr {
    background: rgba(4, 18, 16, 0.86);
    border-color: var(--line);
    color: var(--text);
    box-shadow: 0 12px 36px rgba(0, 255, 156, 0.08);
}

body.theme-hacker input,
body.theme-hacker select,
body.theme-hacker textarea {
    background-color: rgba(1, 12, 10, 0.78);
    border-color: rgba(48, 255, 171, 0.24);
    color: var(--text);
}

body.theme-hacker input::placeholder,
body.theme-hacker textarea::placeholder {
    color: rgba(217, 255, 243, 0.46);
}

body.theme-hacker .button,
body.theme-hacker .header-search__toggle,
body.theme-hacker .header-search__submit {
    background: linear-gradient(135deg, #00c782 0%, #30ffab 100%);
    color: #02100c;
    box-shadow: 0 0 20px rgba(0, 255, 156, 0.20);
}

body.theme-hacker .tag,
body.theme-hacker .status-pill,
body.theme-hacker .badge--muted {
    background: rgba(48, 255, 171, 0.10);
    color: #aaffde;
}

body.theme-particle .site-header,
body.theme-particle .channel-nav,
body.theme-particle .site-footer {
    background: rgba(255, 255, 255, 0.84);
    border-color: var(--line);
    backdrop-filter: blur(18px) saturate(1.2);
}

body.theme-particle .header-search,
body.theme-particle .header-user,
body.theme-particle .header-points,
body.theme-particle .theme-switch,
body.theme-particle .button--ghost,
body.theme-particle .channel-chip,
body.theme-particle .sidebar-card,
body.theme-particle .board-hero,
body.theme-particle .detail-banner,
body.theme-particle .forum-card,
body.theme-particle .thread-card,
body.theme-particle .auth-card,
body.theme-particle .settings-card,
body.theme-particle .admin-card,
body.theme-particle .point-product-card,
body.theme-particle .pet-egg-card,
body.theme-particle .pet-active-panel,
body.theme-particle .pet-chat-hero,
body.theme-particle .pet-ai-chat,
body.theme-particle .pet-ai-empty,
body.theme-particle .pet-side-card,
body.theme-particle .pet-card,
body.theme-particle .pet-species-card,
body.theme-particle .pet-companion-widget__panel,
body.theme-particle .thread-paywall,
body.theme-particle .editor-panel,
body.theme-particle .editor-preview {
    background: rgba(255, 255, 255, 0.84);
    border-color: var(--line);
    box-shadow: 0 18px 48px rgba(0, 150, 165, 0.10);
}

body.theme-particle .button,
body.theme-particle .header-search__toggle,
body.theme-particle .header-search__submit {
    background: linear-gradient(135deg, #06333a 0%, #00b7c8 100%);
    color: #fff;
}

body.theme-particle .channel-chip.is-active,
body.theme-particle .channel-chip:hover,
body.theme-particle .tag,
body.theme-particle .status-pill {
    background: rgba(0, 213, 190, 0.12);
    border-color: rgba(0, 150, 165, 0.22);
    color: #07545d;
}

.button--danger {
    background: #fff1f1;
    color: var(--danger);
    border-color: #ffd2d4;
}

.inline-form {
    display: inline-flex;
}

.hero {
    padding-top: 14px;
}

.hero-grid,
.stream-layout,
.detail-layout,
.circle-grid,
.thread-grid,
.forum-grid,
.notice-grid,
.section--split,
.admin-grid {
    display: grid;
    gap: 18px;
}

.hero-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
}

.hero-feature,
.hero-mini,
.sidebar-card,
.forum-card,
.circle-card,
.form-card,
.thread-card,
.notice-card,
.table-card,
.content-card,
.reply-card,
.page-header,
.profile-hero,
.empty-state,
.board-hero,
.detail-banner {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.hero-feature {
    min-height: 420px;
    display: flex;
    overflow: hidden;
    color: #fff;
}

.hero-feature__overlay {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(8, 10, 15, 0.78) 100%);
}

.hero-feature__body h1 {
    margin: 14px 0 10px;
    font-size: clamp(2rem, 4vw, 3.05rem);
    line-height: 1.1;
}

.hero-feature__body p {
    margin: 0;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.82);
}

.hero-feature__eyebrow,
.section__eyebrow {
    display: inline-flex;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.76rem;
    font-weight: 700;
}

.hero-feature__eyebrow {
    color: rgba(255, 255, 255, 0.72);
}

.hero-feature__meta {
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 18px;
}

.hero-side {
    display: grid;
    gap: 14px;
}

.hero-mini {
    display: grid;
    gap: 8px;
    padding: 20px 22px;
    min-height: 96px;
}

.hero-mini strong {
    font-size: 1rem;
    line-height: 1.45;
}

.hero-mini small,
.hero-mini__category,
.forum-card__meta,
.notice-item p,
.mini-channel small,
.detail-banner__meta,
.board-hero__meta,
.thread-meta,
.footer-shell,
.footer-links,
.muted,
.pagination {
    color: var(--muted);
}

.hero-mini__category {
    font-size: 0.78rem;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.hero-stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 16px;
    display: grid;
    gap: 4px;
    text-align: center;
}

.hero-stat strong {
    font-size: 1.4rem;
    color: var(--text);
}

.hero-feature--tone-1,
.hero-mini--tone-1,
.forum-card--tone-1 .forum-card__media,
.detail-banner--tone-1 {
    background: linear-gradient(135deg, #263342 0%, #47637f 100%);
}

.hero-feature--tone-2,
.hero-mini--tone-2,
.forum-card--tone-2 .forum-card__media,
.detail-banner--tone-2 {
    background: linear-gradient(135deg, #2b2f39 0%, #5f748d 100%);
}

.hero-feature--tone-3,
.hero-mini--tone-3,
.forum-card--tone-3 .forum-card__media,
.detail-banner--tone-3 {
    background: linear-gradient(135deg, #3d2e2a 0%, #88634f 100%);
}

.hero-feature--tone-4,
.hero-mini--tone-4,
.forum-card--tone-4 .forum-card__media,
.detail-banner--tone-4 {
    background: linear-gradient(135deg, #24353b 0%, #46737d 100%);
}

.hero-feature--tone-5,
.hero-mini--tone-5,
.forum-card--tone-5 .forum-card__media,
.detail-banner--tone-5 {
    background: linear-gradient(135deg, #30303d 0%, #69718d 100%);
}

.section {
    margin-top: 28px;
}

.section__title {
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
}

.section__title h2,
.section__title h3,
.form-card h1,
.form-card h2,
.page-header h1,
.profile-hero h1,
.board-hero h1,
.detail-banner h1 {
    margin: 0;
}

.section__eyebrow {
    color: #8a8b92;
    margin-bottom: 6px;
}

.text-link {
    color: #4e5058;
}

.text-link:hover {
    color: var(--text);
}

.stream-layout,
.detail-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(290px, 0.85fr);
    align-items: start;
}

.stream-main,
.detail-main,
.stream-sidebar,
.detail-sidebar {
    display: grid;
    gap: 18px;
}

.detail-main,
.detail-sidebar {
    min-width: 0;
}

.forum-list {
    display: grid;
    gap: 18px;
}

.forum-list .forum-card {
    height: 254px;
    min-height: 254px;
}

.forum-list .forum-card__media,
.forum-list .forum-card__media-overlay {
    height: 100%;
    min-height: 0;
}

.forum-list .forum-card__body {
    min-height: 0;
    overflow: hidden;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.forum-list .forum-card h3 a,
.forum-list .forum-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.forum-list .forum-card h3 a {
    -webkit-line-clamp: 2;
}

.forum-list .forum-card p {
    -webkit-line-clamp: 2;
}

.forum-list .tag-row {
    max-height: 70px;
    overflow: hidden;
}

.forum-list .forum-card__meta {
    align-self: end;
}

.forum-grid,
.thread-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.forum-card {
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}

.forum-card__media {
    min-height: 220px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
}

.forum-card__media-top,
.forum-card__media-bottom {
    justify-content: space-between;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.84);
}

.forum-card__body,
.sidebar-card,
.form-card,
.thread-card,
.notice-card,
.table-card,
.content-card,
.reply-card,
.page-header,
.profile-hero,
.board-hero {
    padding: 22px;
}

.forum-card__body {
    display: grid;
    gap: 12px;
}

.forum-card__author strong,
.ranking-item strong,
.notice-item strong,
.contributor-item strong,
.circle-card strong,
.mini-channel strong {
    display: block;
}

.forum-card__author small,
.forum-card__meta,
.ranking-item small,
.notice-item p,
.circle-card p,
.mini-channel small,
.contributor-item small {
    font-size: 0.9rem;
}

.forum-card h3 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.4;
}

.forum-card p,
.circle-card p,
.notice-item p {
    margin: 0;
}

.avatar-badge {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f2f3f6;
    color: var(--text);
    font-weight: 700;
    flex-shrink: 0;
}

.forum-card__category,
.tag,
.badge {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-row--tight {
    margin-bottom: -4px;
}

.tag {
    background: #f1f3f7;
    color: #50525a;
}

.forum-card__meta {
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

.sidebar-card {
    display: grid;
    gap: 14px;
}

.sidebar-card__title {
    font-size: 1.05rem;
    font-weight: 700;
}

.notice-list,
.ranking-list,
.contributor-list,
.mini-channel-list,
.stack-list,
.simple-list {
    display: grid;
    gap: 12px;
}

.brand-preview {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-preview img {
    width: 86px;
    height: 86px;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(17, 18, 20, 0.08);
}

.notice-item,
.simple-list__item,
.stack-item {
    padding: 14px;
    border-radius: 16px;
    background: #fafafb;
    border: 1px solid var(--line);
}

.ranking-item,
.mini-channel,
.contributor-item--link {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.ranking-item:last-child,
.mini-channel:last-child,
.contributor-item--link:last-child {
    border-bottom: none;
}

.ranking-item__index {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #111214;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
}

.contributor-item {
    justify-content: space-between;
}

.circle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.circle-card {
    padding: 22px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
}

.circle-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #f3f5f8;
    font-weight: 700;
}

.circle-card__count {
    color: #5b5d66;
    font-weight: 600;
}

.board-hero,
.detail-banner {
    padding: 28px;
}

.board-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.board-hero__copy p,
.detail-banner p {
    max-width: 760px;
    margin: 10px 0 0;
}

.detail-banner {
    color: #fff;
}

.detail-banner__head {
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.detail-banner h1 {
    margin-top: 16px;
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    line-height: 1.16;
}

.detail-banner__meta {
    flex-wrap: wrap;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.78);
}

.detail-article {
    padding: 0;
    overflow: hidden;
}

.detail-reader {
    width: min(100%, 860px);
    margin: 0 auto;
    padding: 30px clamp(22px, 4vw, 40px);
    font-size: 1.02rem;
    line-height: 1.9;
    text-align: left;
}

.detail-reader > * {
    max-width: 100%;
}

.detail-reader h1,
.detail-reader h2,
.detail-reader h3,
.detail-reader h4,
.detail-reader h5,
.detail-reader h6,
.detail-reader p,
.detail-reader ul,
.detail-reader ol,
.detail-reader dl,
.detail-reader blockquote,
.detail-reader hr {
    width: min(100%, 760px);
    margin-left: 0;
    margin-right: auto;
}

.article-heading-anchor {
    scroll-margin-top: 118px;
}

.article-outline-card {
    position: sticky;
    top: 112px;
    min-width: 0;
    max-height: min(620px, calc(100vh - 132px));
    overflow: hidden;
}

.article-outline-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: min(46vh, 430px);
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 4px 2px 12px;
    border-left: 2px solid rgba(17, 24, 39, 0.1);
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    mask-image: linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 18px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 18px), transparent);
}

.article-outline-list::-webkit-scrollbar {
    width: 6px;
    height: 0;
}

.article-outline-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.22);
}

.article-outline-link {
    position: relative;
    display: block;
    min-width: 0;
    max-width: 100%;
    padding: 6px 9px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.35;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.article-outline-link[hidden] {
    display: none;
}

.article-outline-link::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: transparent;
    transform: translateY(-50%);
}

.article-outline-link:hover,
.article-outline-link.is-active {
    color: var(--text);
    background: rgba(0, 213, 190, 0.1);
    transform: translateX(2px);
}

.article-outline-link.is-active::before {
    background: var(--accent);
}

.article-outline-link--h1 {
    font-weight: 800;
}

.article-outline-link--h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    font-size: 0.84rem;
}

.article-outline-link--parent {
    color: #404552;
    font-weight: 700;
}

.article-outline-toggle {
    display: inline-grid;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 6px;
    background: rgba(17, 24, 39, 0.06);
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1;
}

.article-outline-link--parent:hover .article-outline-toggle,
.article-outline-link--parent.is-expanded .article-outline-toggle {
    background: rgba(0, 213, 190, 0.16);
    color: var(--text);
}

.article-outline-link--h3,
.article-outline-link--h4 {
    margin-left: 20px;
    font-size: 0.8rem;
}

.article-outline-link--h5,
.article-outline-link--h6 {
    margin-left: 28px;
    font-size: 0.78rem;
    opacity: 0.88;
}

.detail-reader pre,
.detail-reader table,
.detail-reader figure,
.detail-reader .highlight,
.detail-reader .mermaid,
.detail-reader .table-wrapper {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.reply-section,
.reply-list {
    display: grid;
    gap: 18px;
}

.thread-paywall,
.daily-points-card__body {
    display: grid;
    gap: 12px;
}

.thread-paywall {
    padding: 26px;
    border: 1px solid rgba(0, 213, 190, 0.22);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(0, 213, 190, 0.08), rgba(255, 255, 255, 0.92)),
        #fff;
}

.thread-paywall h2,
.daily-points-card__body p {
    margin: 0;
}

.daily-points-card {
    border-color: rgba(0, 213, 190, 0.2);
}

.daily-points-card__body strong {
    font-size: 1.8rem;
    line-height: 1;
}

.daily-claim-message--success {
    color: var(--success);
    font-weight: 600;
}

.daily-claim-message--danger {
    color: var(--danger);
    font-weight: 600;
}

.reply-card__head {
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.reply-card__content {
    margin-top: 10px;
}

.flash-stack {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

.flash {
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
}

.flash--success {
    background: #ecfbf4;
    border-color: #c9f0da;
    color: var(--success);
}

.flash--danger {
    background: #fff1f2;
    border-color: #ffd3d6;
    color: var(--danger);
}

.flash--warning {
    background: #fff6ea;
    border-color: #ffe0b8;
    color: #a86117;
}

.auth-shell {
    display: grid;
    place-items: center;
}

.auth-layout,
.settings-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
    gap: 18px;
    width: min(1120px, 100%);
}

.auth-layout--narrow {
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1fr);
}

.auth-layout--wechat {
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.2fr);
}

.auth-stack {
    display: grid;
    gap: 18px;
    width: min(780px, 100%);
}

.auth-brand {
    background: linear-gradient(180deg, #0c0f15 0%, #131923 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 40px rgba(17, 18, 20, 0.16);
    display: grid;
    gap: 16px;
}

.auth-brand--soft {
    background: linear-gradient(180deg, #11161f 0%, #1a2230 100%);
}

.auth-brand img {
    width: 118px;
    height: 118px;
    object-fit: cover;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-brand h1 {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.12;
}

.auth-brand p,
.auth-brand .notice-item p {
    color: rgba(255, 255, 255, 0.78);
}

.auth-brand .section__eyebrow {
    color: rgba(127, 245, 222, 0.88);
}

.auth-brand .notice-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.auth-brand .notice-item strong {
    color: #fff;
}

.form-card {
    width: min(780px, 100%);
}

.form-card--compact {
    width: 100%;
}

.wechat-login-card {
    display: grid;
    gap: 14px;
}

.wechat-qrcode-panel {
    min-height: 360px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at top left, rgba(16, 224, 189, 0.08), transparent 42%),
        linear-gradient(180deg, #fbfcfd 0%, #f3f5f8 100%);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.wechat-qrcode-panel iframe {
    width: 100%;
    min-height: 360px;
    border: 0;
}

.wechat-login-actions {
    display: flex;
    justify-content: flex-start;
}

.form-grid,
.reply-edit-form {
    display: grid;
    gap: 16px;
}

.form-note {
    font-size: 0.92rem;
    color: var(--muted);
}

.email-code-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.email-code-actions .muted {
    margin: 0;
    flex: 1 1 240px;
}

.form-grid label,
.reply-edit-form label {
    display: grid;
    gap: 8px;
}

.form-section-heading {
    display: grid;
    gap: 6px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0, 213, 190, 0.08), rgba(22, 119, 255, 0.06));
}

.form-section-heading h3,
.form-section-heading p {
    margin: 0;
}

.custom-nav-editor {
    display: grid;
    gap: 12px;
}

.custom-nav-editor__row {
    display: grid;
    grid-template-columns: minmax(120px, 0.7fr) minmax(220px, 1.3fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 720px) {
    .custom-nav-editor__row {
        grid-template-columns: 1fr;
    }
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line-deep);
    border-radius: 14px;
    padding: 12px 14px;
    background: #fff;
    color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(22, 119, 255, 0.14);
    border-color: rgba(22, 119, 255, 0.4);
}

.search-bar {
    gap: 10px;
}

.search-bar input {
    flex: 1;
}

.search-bar--compact {
    width: min(360px, 100%);
}

.settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.settings-grid .form-card:last-child {
    grid-column: 1 / -1;
}

.security-summary,
.security-actions {
    display: grid;
    gap: 14px;
}

.security-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff6ea;
    color: #a86117;
    border: 1px solid #ffe0b8;
    font-weight: 600;
}

.security-badge--ok {
    background: #ecfbf4;
    color: var(--success);
    border-color: #c9f0da;
}

.security-inline-note {
    color: var(--muted);
    font-size: 0.92rem;
}

.form-grid--tight {
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.backup-panel,
.code-panel {
    padding: 18px;
    border-radius: 18px;
    background: #f7f9fc;
    border: 1px solid var(--line);
    display: grid;
    gap: 12px;
}

.backup-panel h3 {
    margin: 0;
}

.backup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
}

.backup-grid code,
.code-panel code {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    background: #0f131b;
    color: #7ff5de;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.92rem;
    word-break: break-word;
}

.code-panel__row {
    display: grid;
    gap: 8px;
}

.code-panel__row span {
    color: var(--muted);
    font-size: 0.92rem;
}

.code-panel__uri {
    max-height: 126px;
    overflow: auto;
}

.page-header,
.profile-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.profile-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stat-card,
.hero-stat {
    border: 1px solid var(--line);
}

.stat-card {
    display: grid;
    gap: 4px;
    padding: 18px 16px;
    border-radius: 18px;
    background: #fff;
}

.stat-card strong {
    font-size: 1.4rem;
}

.pagination {
    justify-content: center;
    margin-top: 22px;
}

.empty-state {
    padding: 30px 24px;
    text-align: center;
    color: var(--muted);
}

.empty-state strong {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
}

.empty-state--compact {
    padding: 18px 16px;
    border-radius: 16px;
}

.empty-state--large {
    max-width: 720px;
    margin: 40px auto;
}

.table-responsive {
    overflow-x: auto;
}

.table-responsive--admin {
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 14px 10px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.responsive-admin-table th,
.responsive-admin-table td {
    white-space: normal;
}

.cell-truncate {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}

.responsive-admin-table .cell--email,
.responsive-admin-table .cell--academic,
.responsive-admin-table .cell--student-number,
.responsive-admin-table .cell--note,
.responsive-admin-table .cell--creator,
.responsive-admin-table .cell--used-by {
    overflow: hidden;
}

.responsive-admin-table .cell--role,
.responsive-admin-table .cell--status,
.responsive-admin-table .cell--two-factor,
.responsive-admin-table .cell--points,
.responsive-admin-table .cell--datetime {
    white-space: nowrap;
}

.responsive-admin-table .cell--datetime {
    color: #5c6470;
    font-variant-numeric: tabular-nums;
}

.responsive-admin-table .cell--actions .button,
.responsive-admin-table .cell--actions code,
.responsive-admin-table .cell--code code {
    white-space: nowrap;
}

.admin-users-table {
    min-width: 1680px;
    table-layout: fixed;
}

.admin-users-table .cell--username,
.admin-users-table .cell--display-name,
.admin-users-table .cell--role,
.admin-users-table .cell--status,
.admin-users-table .cell--two-factor,
.admin-users-table .cell--points {
    white-space: nowrap;
}

.admin-users-table .cell--email {
    min-width: 260px;
}

.admin-users-table .cell--username .cell-truncate,
.admin-users-table .cell--display-name .cell-truncate,
.admin-users-table .cell--role .cell-truncate,
.admin-users-table .cell--status .cell-truncate,
.admin-users-table .cell--two-factor .cell-truncate,
.admin-users-table .cell--datetime .cell-truncate {
    max-width: 100%;
}

.admin-users-table .cell--email .cell-truncate {
    max-width: 260px;
}

.admin-users-table .cell--academic .cell-truncate {
    max-width: 220px;
}

.admin-users-table .cell--student-number .cell-truncate {
    max-width: 130px;
}

.admin-users-table .cell--actions {
    min-width: 180px;
}

.admin-users-table .action-row {
    align-items: flex-start;
}

.admin-action-menu {
    position: relative;
    display: inline-block;
}

.admin-action-menu > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.admin-action-menu > summary::-webkit-details-marker {
    display: none;
}

.admin-action-menu > summary::after {
    content: "▾";
    margin-left: 8px;
    font-size: 0.78rem;
    color: var(--muted);
}

.admin-action-menu[open] > summary::after {
    content: "▴";
}

.admin-action-menu__panel {
    position: absolute;
    z-index: 30;
    right: 0;
    top: calc(100% + 8px);
    width: min(460px, 80vw);
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
}

.admin-action-menu__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-action-menu__quick .button {
    padding: 10px 14px;
}

.admin-users-table .admin-role-editor {
    max-width: none;
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.admin-invites-table {
    min-width: 980px;
    table-layout: fixed;
}

.admin-invites-table .cell--code code {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-invites-table .cell--note .cell-truncate {
    max-width: 180px;
}

.admin-invites-table .cell--creator .cell-truncate,
.admin-invites-table .cell--used-by .cell-truncate {
    max-width: 140px;
}

.badge-row--truncate .badge {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-responsive--admin + .pagination {
    margin-top: 18px;
}

.admin-nav {
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.admin-nav a {
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
}

.admin-body {
    background:
        radial-gradient(circle at top right, rgba(0, 191, 166, 0.08), transparent 22%),
        linear-gradient(180deg, #f3f6f9 0%, #eef2f7 100%);
}

.admin-body--moderator {
    background:
        radial-gradient(circle at top left, rgba(22, 119, 255, 0.08), transparent 24%),
        radial-gradient(circle at bottom right, rgba(0, 191, 166, 0.07), transparent 26%),
        linear-gradient(180deg, #f2f6fb 0%, #edf3fb 100%);
}

.admin-console-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid rgba(18, 37, 49, 0.08);
    background:
        linear-gradient(135deg, rgba(7, 27, 35, 0.95) 0%, rgba(18, 41, 54, 0.92) 100%);
    box-shadow: 0 18px 42px rgba(13, 24, 33, 0.14);
    color: #fff;
}

.admin-console-hero--moderator {
    background:
        linear-gradient(135deg, rgba(9, 28, 58, 0.95) 0%, rgba(15, 71, 124, 0.9) 100%);
    box-shadow: 0 18px 42px rgba(14, 41, 75, 0.16);
}

.admin-console-hero h1 {
    margin: 6px 0 8px;
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
}

.admin-console-hero p {
    margin: 0;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.76);
}

.admin-console-hero .section__eyebrow {
    color: rgba(111, 241, 219, 0.92);
    margin-bottom: 0;
}

.admin-console-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-nav--console {
    margin-bottom: 24px;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(18, 37, 49, 0.08);
    backdrop-filter: blur(10px);
}

.admin-nav--console a {
    background: transparent;
    border-color: transparent;
    color: #425360;
    font-weight: 600;
}

.admin-nav--console a.is-active,
.admin-nav--console a:hover {
    color: #0d2230;
    background: #fff;
    border-color: rgba(18, 37, 49, 0.08);
    box-shadow: 0 8px 18px rgba(12, 27, 36, 0.08);
}

.admin-nav--moderator {
    background: rgba(240, 247, 255, 0.8);
}

.admin-nav--moderator a.is-active,
.admin-nav--moderator a:hover {
    color: #0d3566;
    border-color: rgba(15, 91, 170, 0.1);
    box-shadow: 0 8px 18px rgba(14, 70, 127, 0.08);
}

.admin-scope-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(10, 26, 40, 0.06);
    color: #365164;
    font-weight: 600;
    font-size: 0.9rem;
}

.moderator-scope-card {
    margin-bottom: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 250, 255, 0.94));
}

.admin-metric-card--moderator {
    background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.admin-role-editor {
    margin-top: 10px;
}

.admin-role-editor summary {
    cursor: pointer;
    color: #2f5879;
    font-weight: 600;
}

.admin-role-editor[open] {
    padding-top: 10px;
}

.moderator-board-picker {
    display: grid;
    gap: 10px;
}

.checkbox-row--wrap {
    flex-wrap: wrap;
    align-items: flex-start;
}

.admin-inline-tip--moderator {
    border-color: rgba(22, 119, 255, 0.14);
    background: rgba(240, 247, 255, 0.76);
}

.admin-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.admin-metric-card {
    display: grid;
    gap: 6px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(18, 37, 49, 0.08);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 26px rgba(12, 27, 36, 0.06);
}

.admin-metric-card span,
.admin-metric-card small {
    color: #62717d;
}

.admin-metric-card strong {
    font-size: 1.7rem;
    line-height: 1.1;
    color: #0d2230;
}

.admin-inline-tip {
    margin: 18px 0;
}

.points-page-header {
    align-items: stretch;
}

.points-balance-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(22, 119, 255, 0.16);
    background: linear-gradient(135deg, #f6f9ff 0%, #eef4ff 100%);
}

.points-balance-card strong {
    display: block;
    margin: 8px 0 4px;
    font-size: clamp(2rem, 3vw, 2.6rem);
    line-height: 1;
    color: #0f2e66;
}

.points-balance-card p {
    margin: 0;
    color: #50637d;
}

.points-balance-card--hero {
    min-width: min(100%, 340px);
}

.admin-surface {
    border-color: rgba(12, 26, 45, 0.1);
    box-shadow: 0 16px 34px rgba(9, 19, 31, 0.08);
}

.points-product-grid {
    align-items: stretch;
}

.points-product-card,
.points-product-admin-card {
    display: grid;
    gap: 16px;
}

.points-product-card__price {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 10px 0 12px;
    padding: 10px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.06) 0%, rgba(0, 191, 166, 0.12) 100%);
    border: 1px solid rgba(0, 191, 166, 0.16);
    color: #0f172a;
}

.points-product-card__price-label,
.points-product-card__price-unit {
    color: #516170;
    font-size: 0.92rem;
    font-weight: 600;
}

.points-product-card__price strong {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1;
    color: #062b27;
}

.points-product-card__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #eef1f6;
}

.points-product-card .thread-card__head,
.points-product-admin-card .thread-card__head {
    align-items: flex-start;
}

.points-product-admin-card .form-grid {
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

.points-ledger {
    display: grid;
    gap: 12px;
}

.pet-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 18px;
    align-items: stretch;
}

.pet-egg-card,
.pet-active-panel,
.pet-card,
.pet-species-card {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-soft);
}

.pet-egg-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 14px;
    align-items: center;
    padding: 16px;
    border-radius: 24px;
}

.pet-egg-card form {
    grid-column: 1 / -1;
}

.pet-egg-card__egg {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.96), rgba(0, 213, 190, 0.16) 48%, rgba(12, 16, 24, 0.08)),
        linear-gradient(135deg, rgba(0, 213, 190, 0.16), rgba(22, 119, 255, 0.12));
    font-size: 2.4rem;
}

.pet-active-panel {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(180px, 0.8fr) minmax(220px, 320px);
    gap: 18px;
    align-items: center;
    padding: 18px 20px;
    border-radius: 26px;
}

.pet-grid,
.pet-species-grid {
    display: grid;
    gap: 18px;
}

.pet-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    align-items: stretch;
}

.pet-species-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.pet-card,
.pet-species-card {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 26px;
    overflow: hidden;
}

.pet-card {
    grid-template-rows: minmax(190px, auto) 1fr;
    align-items: stretch;
    min-width: 0;
    min-height: 430px;
}

.pet-card::before,
.pet-species-card::before,
.pet-active-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 10%, rgba(0, 213, 190, 0.12), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(22, 119, 255, 0.09), transparent 28%);
    pointer-events: none;
}

.pet-card > *,
.pet-species-card > *,
.pet-active-panel > * {
    position: relative;
    z-index: 1;
}

.pet-card.is-active,
.pet-species-card.is-owned {
    border-color: rgba(0, 213, 190, 0.34);
}

.pet-card__body,
.pet-assist-search {
    display: grid;
    gap: 12px;
}

.pet-card__body {
    align-content: start;
    min-width: 0;
}

.pet-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.pet-card__head h3 {
    margin: 0;
    min-width: 0;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.pet-card p,
.pet-species-card p,
.pet-active-panel p {
    margin: 0;
    color: var(--muted);
}

.pet-card p {
    display: -webkit-box;
    overflow: hidden;
    min-height: 3.9em;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.pet-card .badge-row {
    min-width: 0;
    gap: 8px;
}

.pet-card .badge {
    max-width: 100%;
    white-space: nowrap;
}

.pet-card form,
.pet-card .button {
    align-self: end;
}

.pet-active-panel h2 {
    margin: 4px 0 8px;
    max-width: 11em;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.pet-active-panel p {
    max-width: 24em;
    line-height: 1.55;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pet-active-panel .badge-row {
    gap: 8px;
}

.pet-active-panel .badge {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.pet-assist-search input {
    min-width: 0;
}

.pet-assist-search .button {
    width: 100%;
}

.pet-page-chat {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
}

.pet-portrait {
    --pet-accent: #00d5be;
    position: relative;
    width: 220px;
    display: block;
    flex: 0 0 auto;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 18px 20px rgba(6, 13, 22, 0.18));
    animation: pet-idle-float 4.8s ease-in-out infinite;
    isolation: isolate;
}

.pet-portrait--large {
    width: min(340px, 32vw, 100%);
}

.pet-portrait--card {
    justify-self: center;
    align-self: end;
    width: min(230px, 100%);
    max-height: 210px;
}

.pet-portrait--card img {
    max-height: 210px;
}

.pet-portrait--egg-card {
    width: 96px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 28px;
}

.pet-portrait--float {
    width: 128px;
    filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.25));
    animation: pet-desktop-idle 4.2s ease-in-out infinite;
}

.pet-portrait img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center bottom;
    transform-origin: center bottom;
    animation: pet-breathe 3.6s ease-in-out infinite;
}

.pet-portrait__fallback {
    transition: opacity 0.18s ease;
}

.pet-portrait[data-pet-ready="true"] .pet-portrait__fallback {
    opacity: 0;
}

.pet-sprite {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 800% 900%;
    image-rendering: auto;
    transform-origin: center bottom;
    animation: pet-breathe 3.2s ease-in-out infinite;
}

.pet-portrait[data-pet-ready="true"] {
    aspect-ratio: 192 / 208;
}

.pet-portrait[data-pet-ready="true"].pet-portrait--float {
    width: 148px;
}

.pet-portrait--float img {
    animation: pet-breathe 3.2s ease-in-out infinite, pet-wave 6.8s ease-in-out infinite;
}

.pet-portrait--egg {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 36% 22%, rgba(255, 255, 255, 0.96), transparent 28%),
        linear-gradient(145deg, rgba(0, 213, 190, 0.88), #07111b 78%);
}

.pet-portrait__egg-core {
    width: 52%;
    height: 64%;
    border-radius: 50% 50% 46% 46%;
    background:
        radial-gradient(circle at 38% 22%, rgba(255, 255, 255, 0.96), transparent 26%),
        linear-gradient(160deg, #f7ffff, #00d5be 52%, #07111b);
    box-shadow: inset 0 -10px 22px rgba(0, 0, 0, 0.2), 0 0 24px rgba(0, 213, 190, 0.34);
    animation: pet-egg-pulse 2.6s ease-in-out infinite;
}

.pet-portrait__egg-ring {
    position: absolute;
    width: 76%;
    height: 26%;
    border-radius: 999px;
    border: 2px solid rgba(0, 213, 190, 0.46);
    transform: rotate(-8deg);
}

@keyframes pet-idle-float {
    0%,
    100% {
        transform: translateY(0) rotate(-0.6deg);
    }
    50% {
        transform: translateY(-7px) rotate(0.7deg);
    }
}

@keyframes pet-breathe {
    0%,
    100% {
        transform: scale(1);
        filter: saturate(1) brightness(1);
    }
    50% {
        transform: scale(1.025);
        filter: saturate(1.08) brightness(1.035);
    }
}

@keyframes pet-desktop-idle {
    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }
    45% {
        transform: translateY(-10px) rotate(1.2deg);
    }
    70% {
        transform: translateY(-4px) rotate(-0.4deg);
    }
}

@keyframes pet-wave {
    0%,
    76%,
    100% {
        rotate: 0deg;
    }
    82% {
        rotate: 1.4deg;
    }
    88% {
        rotate: -1.2deg;
    }
    94% {
        rotate: 0.7deg;
    }
}

@keyframes pet-egg-pulse {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-3px) scale(1.035);
    }
}

.pet-avatar {
    --pet-accent: #00d5be;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.92), transparent 30%),
        linear-gradient(145deg, var(--pet-accent), #111214 78%);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.pet-avatar span {
    font-size: 2.05rem;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.18));
}

.pet-avatar--large {
    width: 112px;
    height: 112px;
    border-radius: 34px;
}

.pet-avatar--large span {
    font-size: 3.2rem;
}

.pet-assist-search label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 0.9rem;
}

.pet-assist-search input,
.pet-companion-widget__panel input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 11px 13px;
    background: #fff;
    color: var(--text);
}

.pet-companion-widget {
    --pet-accent: #00d5be;
    position: fixed;
    right: 26px;
    bottom: 28px;
    z-index: 70;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 12px;
}

.pet-companion-widget__avatar {
    display: grid;
    place-items: center;
    width: 132px;
    min-height: 112px;
    border-radius: 22px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button.pet-companion-widget__avatar {
    padding: 0;
    font: inherit;
}

.pet-companion-widget__avatar:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: none;
}

.pet-companion-widget__avatar .pet-portrait {
    width: 132px;
}

.pet-companion-widget__panel {
    width: 260px;
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-soft);
    transform-origin: right bottom;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.pet-companion-widget.is-open .pet-companion-widget__panel,
.pet-companion-widget:focus-within .pet-companion-widget__panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.pet-companion-widget__panel p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.pet-companion-widget__panel a {
    color: #08766f;
    font-weight: 700;
}

.pet-chat-log {
    display: grid;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 2px;
    scrollbar-width: thin;
}

.pet-chat-log--page {
    max-height: 320px;
    min-height: 150px;
}

.pet-chat-message {
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.55;
    word-break: break-word;
}

.pet-chat-message p,
.pet-chat-message ul,
.pet-chat-message h4,
.pet-chat-message h5,
.pet-chat-message h6 {
    margin: 0 0 8px;
}

.pet-chat-message p:last-child,
.pet-chat-message ul:last-child {
    margin-bottom: 0;
}

.pet-chat-message ul {
    padding-left: 1.2em;
}

.pet-chat-message li + li {
    margin-top: 4px;
}

.pet-chat-message strong {
    font-weight: 800;
}

.pet-chat-message code {
    padding: 2px 5px;
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.08);
    font-size: 0.86em;
    word-break: break-all;
}

.pet-chat-message a {
    color: #08766f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pet-chat-message--pet {
    background: linear-gradient(135deg, rgba(0, 213, 190, 0.16), rgba(22, 119, 255, 0.08));
    border: 1px solid rgba(0, 213, 190, 0.32);
    color: #132127;
}

.pet-chat-message--user {
    margin-left: 20px;
    background: #101114;
    color: #fff;
}

.pet-chat-message--error {
    background: rgba(255, 73, 73, 0.09);
    border: 1px solid rgba(255, 73, 73, 0.2);
    color: #c53030;
}

.pet-chat-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.pet-chat-sources a {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    font-size: 0.78rem;
}

.pet-chat-form {
    display: grid;
    gap: 8px;
}

.pet-chat-form textarea {
    min-height: 62px;
    resize: vertical;
    border-radius: 16px;
}

.pet-chat-form .button {
    width: 100%;
}

.pet-chat-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 20px;
    align-items: start;
    min-height: 0;
}

.pet-chat-main,
.pet-chat-sidebar {
    min-width: 0;
}

.pet-chat-main {
    display: grid;
    grid-template-rows: auto auto;
    gap: 16px;
}

.pet-chat-hero,
.pet-ai-chat,
.pet-ai-empty,
.pet-side-card {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
}

.pet-chat-hero {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 22px 24px;
    border-radius: 28px;
}

.pet-chat-hero h1,
.pet-chat-hero p,
.pet-side-card h2,
.pet-side-card h3,
.pet-side-card p {
    margin: 0;
}

.pet-chat-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.88);
}

.pet-chat-hero__status small {
    display: block;
    color: var(--muted);
}

.pet-ai-chat {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    height: clamp(560px, calc(100vh - 260px), 760px);
    min-height: 0;
    border-radius: 30px;
    overflow: hidden;
}

.pet-ai-chat__log {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    overflow-y: auto;
    padding: 28px;
    scrollbar-width: thin;
}

.pet-ai-message {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    max-width: 920px;
}

.pet-ai-message--user {
    grid-template-columns: minmax(0, 1fr) 42px;
    align-self: end;
    width: min(760px, 92%);
}

.pet-ai-message--user .pet-ai-message__avatar {
    grid-column: 2;
    grid-row: 1;
}

.pet-ai-message--user .pet-chat-message {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
}

.pet-ai-message__avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f1f5f9;
    overflow: hidden;
    font-size: 0.86rem;
    font-weight: 800;
}

.pet-ai-message__avatar .pet-portrait {
    width: 42px;
    height: 42px;
}

.pet-ai-message__avatar--text {
    color: #102024;
    border: 1px solid var(--line);
}

.pet-ai-chat .pet-chat-message {
    width: fit-content;
    max-width: min(760px, 100%);
    padding: 14px 16px;
    border-radius: 20px;
    font-size: 0.96rem;
}

.pet-ai-chat .pet-chat-message--pet {
    background: #fff;
    border-color: var(--line);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.pet-ai-chat .pet-chat-message--user {
    margin-left: 0;
    background: #111214;
    color: #fff;
}

.pet-ai-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin: 0 24px 18px;
    padding: 12px;
    border: 1px solid var(--line-deep);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}

.pet-ai-composer textarea {
    min-height: 48px;
    max-height: 160px;
    padding: 12px 14px;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
}

.pet-ai-composer textarea:focus {
    outline: none;
    border-color: transparent;
}

.pet-ai-composer .button {
    min-width: 86px;
    height: 46px;
}

.pet-ai-chat__tips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 28px 22px;
    color: var(--muted);
    font-size: 0.82rem;
}

.pet-ai-chat__tips span {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.04);
}

.pet-ai-empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    min-height: 520px;
    height: clamp(520px, calc(100vh - 260px), 720px);
    padding: 32px;
    border-radius: 30px;
    text-align: center;
}

.pet-chat-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: start;
}

.pet-side-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 26px;
}

.pet-side-card--active {
    overflow: hidden;
}

.pet-side-card--active .pet-portrait {
    justify-self: center;
    width: min(220px, 74%);
    max-width: 100%;
    max-height: none;
}

.pet-side-card--active .pet-portrait img {
    max-height: 220px;
    object-fit: contain;
}

.pet-side-card__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.pet-side-card__head .pet-egg-card__egg {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 2rem;
}

.section__title--compact {
    margin: 0;
}

.pet-side-list {
    display: grid;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
}

.pet-side-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.82);
}

.pet-side-item.is-active {
    border-color: rgba(0, 213, 190, 0.38);
    background: rgba(0, 213, 190, 0.08);
}

.pet-side-item .pet-portrait {
    width: 48px;
    height: 48px;
}

.pet-side-item strong,
.pet-side-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pet-side-item small {
    color: var(--muted);
}

.pet-growth-card {
    border-color: rgba(0, 213, 190, 0.26);
}

.pet-growth-row {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
    gap: 16px;
    align-items: stretch;
}

.pet-growth-row .pet-side-card {
    min-width: 0;
}

.pet-growth-row .pet-feed-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pet-growth-row .pet-feed-button {
    min-height: 74px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.pet-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
}

.pet-progress span {
    display: block;
    height: 100%;
    min-width: 8px;
    max-width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #00d5be, #8bf7e7);
    box-shadow: 0 0 18px rgba(0, 213, 190, 0.28);
}

.pet-feed-grid {
    display: grid;
    gap: 8px;
}

.pet-feed-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.9);
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.pet-feed-button:hover:not(:disabled) {
    border-color: rgba(0, 213, 190, 0.45);
    transform: translateY(-1px);
}

.pet-feed-button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.pet-feed-button span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.82rem;
}

.pet-custom-form {
    display: grid;
    gap: 10px;
}

.pet-custom-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 0.84rem;
}

.pet-custom-form input,
.pet-custom-form textarea {
    width: 100%;
    border-radius: 14px;
}

.ledger-item {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fafbfc;
}

.ledger-item__head,
.ledger-item__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ledger-item__head strong {
    min-width: 0;
}

.ledger-item__meta {
    margin-top: 8px;
    justify-content: flex-start;
    color: var(--muted);
    font-size: 0.9rem;
}

.admin-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.action-row {
    flex-wrap: wrap;
}

.checkbox-row {
    flex-wrap: wrap;
}

.mini-channel {
    align-items: start;
}

.mini-channel--large {
    grid-template-columns: auto 1fr;
    padding: 0;
    border-bottom: none;
}

.mini-channel span:first-child {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f3f5f8;
}

.footer-shell {
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 0 36px;
    color: var(--muted);
}

.footer-brand {
    display: grid;
    gap: 8px;
}

.footer-brand p {
    margin: 0;
}

.footer-record {
    color: #60646c;
    font-size: 0.92rem;
}

.footer-record:hover {
    color: var(--text);
}

.footer-links {
    display: grid;
    gap: 8px;
}

details summary {
    cursor: pointer;
    color: #4f525a;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.checkbox-inline input {
    width: auto;
}

.md-import-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f5f8fb 0%, #edf4fb 100%);
    border: 1px solid var(--line);
}

.md-import-panel p,
.review-note {
    margin: 0;
}

.md-import-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    padding: 12px 18px;
    font-weight: 600;
    cursor: pointer;
}

.md-import-status {
    margin-top: -6px;
}

.thread-card__head,
.thread-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.badge-row,
.thread-actions,
.hero-feature__badges {
    flex-wrap: wrap;
}

.review-note {
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff6ea;
    border: 1px solid #ffe0b8;
    color: #9c5a15;
    font-size: 0.92rem;
}

.review-note--banner {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.badge--success {
    background: #ecfbf4;
    color: var(--success);
}

.badge--danger {
    background: #fff1f2;
    color: var(--danger);
}

.badge--muted {
    background: #eef1f5;
    color: #5c6470;
}

.badge--pending {
    background: #fff6ea;
    color: #a86117;
}

.search-bar--admin {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.search-bar--admin select {
    width: auto;
    min-width: 160px;
}

.markdown-body {
    overflow-wrap: anywhere;
}

.markdown-body > :first-child {
    margin-top: 0;
}

.markdown-body > :last-child {
    margin-bottom: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    line-height: 1.25;
    margin: 1.2em 0 0.6em;
}

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body pre,
.markdown-body blockquote,
.markdown-body table {
    margin: 0 0 1rem;
}

.markdown-body pre {
    padding: 16px;
    border-radius: 16px;
    background: #10141c;
    color: #ecf2ff;
    overflow: auto;
}

.markdown-body code {
    font-family: "Consolas", "Courier New", monospace;
}

.markdown-body :not(pre) > code {
    padding: 0.2em 0.45em;
    border-radius: 8px;
    background: #f2f5fa;
}

.markdown-body blockquote {
    padding: 4px 0 4px 16px;
    border-left: 3px solid #cad5e3;
    color: #556171;
}

.markdown-body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 18px;
    margin: 18px 0;
    box-shadow: 0 14px 32px rgba(15, 19, 27, 0.08);
}

.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 14px;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid var(--line);
    padding: 10px 12px;
}

.markdown-body a {
    color: var(--accent);
}

.editor-page {
    margin-top: 18px;
}

.editor-form {
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(320px, 0.72fr);
    gap: 18px;
    align-items: start;
}

.editor-workspace,
.editor-sidebar {
    min-width: 0;
}

.editor-form [data-editor-error-focus] {
    scroll-margin-top: 140px;
}

.editor-workspace {
    width: 100%;
}

.editor-sidebar {
    display: grid;
    gap: 18px;
}

.editor-sidebar-card {
    width: 100%;
}

.editor-workspace__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.editor-workspace__head h1 {
    margin: 4px 0 8px;
}

.editor-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    flex-shrink: 0;
}

.editor-mode__button,
.editor-tool {
    border: 1px solid transparent;
    background: transparent;
    color: #454851;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.editor-mode__button {
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 600;
}

.editor-mode__button.is-active {
    background: #fff;
    border-color: var(--line-deep);
    color: var(--text);
}

.editor-title-field {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.editor-error-summary {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid #ffc4cb;
    background: linear-gradient(180deg, #fff8f8 0%, #fff2f4 100%);
    color: #b42338;
}

.editor-error-summary p,
.editor-field-error p {
    margin: 0;
}

.editor-field-error {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid #ffd4da;
    background: #fff8f8;
    color: #a23645;
    font-size: 0.92rem;
}

.editor-field-error__list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
}

.editor-field-error__list li {
    display: grid;
    gap: 6px;
}

.editor-field-error__list code {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    color: #70303b;
    word-break: break-word;
}

.editor-title-field input {
    font-size: 1.35rem;
    line-height: 1.35;
    padding-top: 16px;
    padding-bottom: 16px;
}

.editor-meta-grid,
.editor-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.editor-meta-grid {
    margin-bottom: 16px;
}

.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%);
    flex-wrap: wrap;
}

.editor-toolbar__group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.editor-tool {
    border-radius: 12px;
    border-color: var(--line);
    background: #fff;
    padding: 8px 12px;
    font-weight: 600;
}

.editor-tool:hover,
.editor-tool:focus-visible {
    border-color: rgba(22, 119, 255, 0.34);
    color: var(--accent);
}

.editor-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.editor-split.is-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editor-pane {
    min-width: 0;
}

.editor-pane[hidden] {
    display: none !important;
}

.editor-body-field {
    display: grid;
    gap: 10px;
}

.editor-title-field.is-invalid input,
.editor-meta-grid label.is-invalid select,
.editor-body-field.is-invalid textarea,
.editor-admin-grid label.is-invalid input {
    border-color: #f59cab;
    box-shadow: 0 0 0 4px rgba(180, 35, 56, 0.08);
    background: #fffafb;
}

.editor-body-field textarea {
    min-height: 620px;
    font-family: "Cascadia Code", "Fira Code", "Consolas", "PingFang SC", monospace;
    line-height: 1.8;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.editor-body-field textarea.is-dragover {
    border-color: rgba(22, 119, 255, 0.42);
    box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.08);
    background: #f7fbff;
}

.editor-preview {
    min-height: 620px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    overflow: auto;
}

.editor-preview__placeholder {
    color: var(--muted);
}

.editor-submitbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

.editor-submitbar__meta {
    display: grid;
    gap: 8px;
}

.editor-status-chip {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f4f7fb;
    border: 1px solid var(--line);
    color: #525660;
    font-size: 0.88rem;
    font-weight: 600;
}

.editor-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.editor-stat {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: 16px;
    background: #f7f9fc;
    border: 1px solid var(--line);
}

.editor-stat strong {
    font-size: 1.3rem;
}

.editor-draft-box {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: #f7f9fc;
    border: 1px solid var(--line);
}

.editor-checklist {
    display: grid;
    gap: 10px;
}

.editor-checklist__item {
    position: relative;
    padding-left: 24px;
    color: #6b6e76;
}

.editor-checklist__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #cfd4de;
}

.editor-checklist__item.is-complete {
    color: var(--text);
}

.editor-checklist__item.is-complete::before {
    background: var(--success);
}

.editor-import-card {
    margin-top: 4px;
}

.editor-sidebar-card .cover-upload {
    grid-template-columns: 1fr;
}

.form-grid__full {
    grid-column: 1 / -1;
}

.responsibility-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid rgba(0, 191, 166, 0.24);
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(0, 191, 166, 0.12), transparent 34%),
        linear-gradient(180deg, #fbfffe 0%, #f5fbfa 100%);
    color: var(--text);
    line-height: 1.75;
}

.responsibility-check input {
    width: 18px;
    height: 18px;
    margin-top: 5px;
    accent-color: var(--accent);
}

.responsibility-check a {
    color: var(--accent-strong);
    font-weight: 800;
}

.responsibility-hero {
    overflow: hidden;
    position: relative;
}

.responsibility-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 191, 166, 0.18), transparent 68%);
    pointer-events: none;
}

.responsibility-doc {
    max-width: 980px;
    margin-inline: auto;
    padding: clamp(22px, 4vw, 42px);
    line-height: 1.9;
}

.responsibility-doc h2 {
    margin: 28px 0 10px;
    font-size: clamp(1.18rem, 2.2vw, 1.55rem);
}

.responsibility-doc h2:first-child {
    margin-top: 0;
}

.responsibility-doc p {
    color: var(--muted);
}

.responsibility-doc ul {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.responsibility-doc li {
    position: relative;
    padding: 12px 14px 12px 38px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fbfcfe;
    color: var(--muted);
}

.responsibility-doc li::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 23px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 5px rgba(0, 191, 166, 0.12);
}

.responsibility-confirm {
    margin-top: 30px;
    padding: 18px 20px;
    border: 1px solid rgba(0, 191, 166, 0.28);
    border-radius: 20px;
    background:
        radial-gradient(circle at 18px 18px, rgba(0, 191, 166, 0.16), transparent 34%),
        linear-gradient(135deg, #f3fffc 0%, #f8fbff 100%);
}

.responsibility-confirm strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 1.05rem;
}

.responsibility-confirm p {
    margin: 0;
}

.cover-upload {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
}

.cover-upload.is-invalid {
    border-color: #ffc2ca;
    box-shadow: 0 0 0 4px rgba(180, 35, 56, 0.06);
    background: linear-gradient(180deg, #fffafa 0%, #fff4f6 100%);
}

.cover-upload.is-invalid .cover-upload__preview {
    box-shadow: inset 0 0 0 1px rgba(180, 35, 56, 0.18);
}

.cover-upload__preview {
    position: relative;
    min-height: 180px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #263342 0%, #44657e 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.cover-upload__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cover-upload__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.88);
}

.cover-upload__placeholder strong {
    font-size: 1.05rem;
}

.cover-upload__actions {
    display: grid;
    align-content: center;
    gap: 12px;
}

.hero-feature,
.hero-mini,
.forum-card__media,
.detail-banner {
    position: relative;
}

.hero-feature__image,
.hero-mini__image,
.forum-card__cover-image,
.detail-banner__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-feature__image,
.hero-mini__image,
.forum-card__cover-image {
    position: absolute;
    inset: 0;
}

.hero-feature__overlay,
.hero-mini__content,
.forum-card__media-overlay,
.detail-banner__content {
    position: relative;
    z-index: 1;
}

.hero-feature::after,
.hero-mini::after,
.forum-card__media::after,
.detail-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(8, 10, 15, 0.72) 100%);
    pointer-events: none;
}

.hero-mini {
    overflow: hidden;
    min-height: 128px;
}

.hero-mini::after {
    background:
        linear-gradient(90deg, rgba(4, 7, 12, 0.82) 0%, rgba(4, 7, 12, 0.52) 48%, rgba(4, 7, 12, 0.28) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(8, 10, 15, 0.78) 100%);
}

.hero-mini__content {
    display: grid;
    gap: 8px;
}

.hero-mini strong {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.62);
}

.hero-mini small,
.hero-mini__category {
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.56);
}

.forum-card__media {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.forum-card__media-overlay {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    color: #fff;
}

.forum-card__cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 8px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
}

.forum-card__cover-fallback span {
    font-size: 1.8rem;
    font-weight: 700;
}

.thread-card--manage,
.thread-card--admin {
    padding: 0;
    overflow: hidden;
}

.thread-card__cover {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #24353b 0%, #4d6f86 100%);
}

.thread-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thread-card--manage > :not(.thread-card__cover),
.thread-card--admin > :not(.thread-card__cover) {
    padding-left: 22px;
    padding-right: 22px;
}

.thread-card--manage .thread-card__head,
.thread-card--admin .thread-card__head {
    padding-top: 22px;
}

.thread-card--manage .action-row,
.thread-card--admin .action-row {
    padding-bottom: 22px;
}

.thread-list {
    display: grid;
    gap: 14px;
}

.thread-list .thread-card--manage,
.thread-list .thread-card--admin {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    align-items: stretch;
}

.thread-list .thread-card--manage:not(:has(.thread-card__cover)),
.thread-list .thread-card--admin:not(:has(.thread-card__cover)) {
    grid-template-columns: minmax(0, 1fr);
}

.thread-list .thread-card__cover {
    grid-row: 1 / span 8;
    min-height: 168px;
    height: 100%;
    aspect-ratio: auto;
}

.thread-list .thread-card--manage > :not(.thread-card__cover),
.thread-list .thread-card--admin > :not(.thread-card__cover) {
    min-width: 0;
}

.thread-list .thread-card--admin form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.profile-thread-list .forum-card {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.profile-thread-list .forum-card__media {
    min-height: 168px;
    height: 100%;
}

.profile-thread-list .forum-card__body {
    min-width: 0;
}

.login-history-table {
    min-width: 760px;
}

.login-history-agent {
    max-width: 520px;
}

.admin-body .page-shell > .container {
    width: min(1720px, calc(100% - 48px));
}

.thread-admin-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.detail-banner {
    overflow: hidden;
    padding: 0;
}

.detail-banner__cover {
    min-height: 280px;
}

.detail-banner__content {
    padding: 28px;
}

.timeline-list {
    display: grid;
    gap: 14px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.timeline-item__dot {
    width: 12px;
    height: 12px;
    margin-top: 6px;
    border-radius: 999px;
    background: #c9ced8;
    box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.08);
}

.timeline-item--success .timeline-item__dot {
    background: var(--success);
}

.timeline-item--danger .timeline-item__dot {
    background: var(--danger);
}

.timeline-item--pending .timeline-item__dot,
.timeline-item--scheduled .timeline-item__dot {
    background: var(--warm);
}

.timeline-item__content {
    display: grid;
    gap: 4px;
}

.timeline-item__content p,
.timeline-item__content small {
    margin: 0;
}

.timeline-item__content small {
    color: var(--muted);
}

@media (max-width: 1320px) {
    .site-header__main-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand tools"
            "nav nav";
        padding: 14px 0;
    }

    .brand {
        grid-area: brand;
        min-width: 0;
    }

    .primary-nav {
        grid-area: nav;
        justify-content: flex-start;
        padding-top: 4px;
    }

    .header-tools {
        grid-area: tools;
        flex-wrap: nowrap;
        row-gap: 8px;
    }

    .brand__text small {
        max-width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-search:focus-within,
    .header-search.is-expanded {
        width: clamp(170px, 28vw, 240px);
    }
}

@media (max-width: 1080px) {
    .hero-grid,
    .stream-layout,
    .detail-layout,
    .section--split,
    .circle-grid,
    .admin-grid,
    .auth-layout,
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .forum-grid,
    .thread-grid,
    .editor-form {
        grid-template-columns: 1fr;
    }

    .auth-layout--wechat .auth-brand {
        order: 2;
    }

    .auth-layout--wechat .auth-stack {
        order: 1;
    }

    .article-outline-card {
        position: static;
        max-height: none;
    }

    .article-outline-list {
        max-height: 280px;
    }
}

@media (max-width: 1200px) {
    .responsive-admin-table {
        min-width: 0;
    }

    .responsive-admin-table thead {
        display: none;
    }

    .responsive-admin-table,
    .responsive-admin-table tbody,
    .responsive-admin-table tr,
    .responsive-admin-table td {
        display: block;
        width: 100%;
    }

    .responsive-admin-table tbody {
        display: grid;
        gap: 16px;
    }

    .responsive-admin-table tr {
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(17, 18, 20, 0.06);
    }

    .responsive-admin-table td {
        display: grid;
        grid-template-columns: minmax(88px, 112px) minmax(0, 1fr);
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--line);
        align-items: start;
        white-space: normal;
    }

    .responsive-admin-table td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .responsive-admin-table td::before {
        content: attr(data-label);
        color: #65707c;
        font-size: 0.88rem;
        font-weight: 700;
        line-height: 1.45;
    }

    .responsive-admin-table .cell--actions {
        display: block;
    }

    .responsive-admin-table .cell--actions::before {
        display: block;
        margin-bottom: 10px;
    }

    .responsive-admin-table .cell--actions .action-row,
    .responsive-admin-table .cell--boards .badge-row {
        justify-content: flex-start;
    }

    .responsive-admin-table .cell--actions .button {
        min-width: 0;
    }

    .responsive-admin-table .admin-role-editor {
        margin-top: 12px;
        max-width: none;
    }

    .responsive-admin-table .admin-role-editor summary {
        width: fit-content;
    }

    .responsive-admin-table .cell-truncate,
    .responsive-admin-table .badge-row--truncate .badge {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
    }
}

@media (max-width: 1040px) {
    .header-user span:last-child {
        display: none;
    }

    .theme-switch span {
        display: none;
    }
}

@media (max-width: 960px) {
    .cover-upload,
    .thread-admin-meta,
    .editor-meta-grid,
    .editor-admin-grid {
        grid-template-columns: 1fr;
    }

    .pet-page-header,
    .pet-active-panel,
    .pet-chat-workspace {
        grid-template-columns: 1fr;
    }

    .pet-chat-sidebar {
        order: 0;
    }

    .pet-chat-main {
        grid-template-rows: auto auto;
    }

    .pet-ai-chat {
        height: min(620px, 70vh);
        min-height: 520px;
    }

    .pet-growth-row {
        grid-template-columns: 1fr;
    }

    .pet-growth-row .pet-feed-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pet-active-panel {
        align-items: start;
        gap: 14px;
        padding: 16px;
    }

    .pet-portrait--large {
        width: min(280px, 72vw);
    }

    .hero-feature {
        min-height: 360px;
    }

    .forum-card {
        grid-template-columns: 1fr;
    }

    .forum-card__media-overlay {
        min-height: 200px;
    }

    .forum-list .forum-card {
        height: auto;
        min-height: 0;
    }

    .forum-list .forum-card__media,
    .forum-list .forum-card__media-overlay {
        height: auto;
        min-height: 200px;
    }

    .editor-split.is-split {
        grid-template-columns: 1fr;
    }

    .editor-preview,
    .editor-body-field textarea {
        min-height: 460px;
    }

    .detail-banner__cover {
        min-height: 220px;
    }
}

@media (max-width: 860px) {
    .page-shell {
        padding: 20px 0 44px;
    }

    .site-header__top-inner {
        align-items: center;
        gap: 10px;
    }

    .site-header__micro-links {
        justify-content: flex-start;
        gap: 10px;
    }

    .site-header__main-inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "tools"
            "nav";
        justify-items: stretch;
        padding: 14px 0;
    }

    .brand {
        width: 100%;
    }

    .brand__text small {
        max-width: none;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .primary-nav {
        justify-content: center;
    }

    .header-tools {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-tools > * {
        min-width: 0;
    }

    .header-search {
        flex: 1 1 100%;
        width: 72px;
        max-width: none;
    }

    .header-search:focus-within,
    .header-search.is-expanded {
        width: min(100%, 360px);
    }

    .header-points {
        order: 2;
    }

    .header-user span:last-child {
        display: inline;
    }

    .forum-card__media,
    .forum-card__media-overlay {
        min-height: 180px;
    }

    .md-import-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .board-hero,
    .page-header,
    .profile-hero,
    .settings-grid {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
    }

    .profile-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .admin-nav::-webkit-scrollbar {
        display: none;
    }

    .admin-nav a {
        flex: 0 0 auto;
    }

    .search-bar--admin {
        justify-content: flex-start;
    }

    .admin-console-hero,
    .points-balance-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .container {
        width: min(100% - 24px, 1200px);
    }

    .site-header__top > .container,
    .site-header__main > .container {
        width: min(100% - 24px, 1200px);
    }

    .page-shell {
        padding: 16px 0 36px;
    }

    .site-header__top {
        display: none;
    }

    .site-header__top {
        font-size: 0.8rem;
    }

    .section__title,
    .reply-card__head,
    .search-bar,
    .detail-banner__head,
    .footer-shell {
        align-items: stretch;
        flex-direction: column;
    }

    .site-header__micro-links {
        justify-content: flex-start;
        gap: 10px;
    }

    .site-header__main-inner {
        gap: 12px;
    }

    .primary-nav {
        gap: 16px;
        padding-bottom: 2px;
    }

    .primary-nav a {
        font-size: 0.94rem;
    }

    .header-tools {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .header-search {
        width: 72px;
    }

    .header-search:focus-within,
    .header-search.is-expanded {
        width: 100%;
    }

    .header-search__toggle,
    .header-search__submit {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .header-user,
    .header-points,
    .header-pet-link,
    .theme-switch,
    .header-tools > .button,
    .header-tools > .inline-form {
        flex: 1 1 calc(50% - 6px);
        width: auto;
    }

    .header-user {
        justify-content: flex-start;
    }

    .theme-switch {
        justify-content: space-between;
    }

    .pet-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .pet-chat-workspace {
        gap: 14px;
        min-height: 0;
    }

    .pet-chat-main {
        grid-template-rows: auto auto;
    }

    .pet-chat-hero {
        display: grid;
        padding: 18px;
        border-radius: 22px;
    }

    .pet-chat-hero__status {
        width: 100%;
    }

    .pet-ai-chat {
        height: min(600px, 68vh);
        min-height: 480px;
        border-radius: 22px;
    }

    .pet-ai-chat__log {
        padding: 18px;
    }

    .pet-ai-message,
    .pet-ai-message--user {
        grid-template-columns: 34px minmax(0, 1fr);
        width: 100%;
        max-width: none;
        align-self: stretch;
    }

    .pet-ai-message--user .pet-ai-message__avatar {
        grid-column: 1;
    }

    .pet-ai-message--user .pet-chat-message {
        grid-column: 2;
        justify-self: start;
    }

    .pet-ai-message__avatar,
    .pet-ai-message__avatar .pet-portrait {
        width: 34px;
        height: 34px;
    }

    .pet-ai-chat .pet-chat-message {
        width: 100%;
        max-width: 100%;
        font-size: 0.92rem;
    }

    .pet-ai-composer {
        grid-template-columns: 1fr;
        margin: 0 14px 14px;
        border-radius: 20px;
    }

    .pet-ai-composer .button {
        width: 100%;
    }

    .pet-growth-row {
        grid-template-columns: 1fr;
    }

    .pet-growth-row .pet-feed-grid {
        grid-template-columns: 1fr;
    }

    .pet-growth-row .pet-feed-button {
        min-height: 0;
        flex-direction: row;
        align-items: center;
    }

    .pet-side-card {
        padding: 16px;
        border-radius: 22px;
    }

    .pet-side-card--active .pet-portrait {
        width: min(200px, 68vw);
    }

    .pet-side-list {
        max-height: 360px;
    }

    .pet-side-item {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .pet-side-item .pet-portrait {
        width: 44px;
        height: 44px;
    }

    .pet-side-item form,
    .pet-side-item > .badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .pet-companion-widget {
        right: 14px;
        bottom: 14px;
    }

    .pet-companion-widget__avatar,
    .pet-companion-widget__avatar .pet-portrait {
        width: 108px;
    }

    .pet-companion-widget__panel {
        width: calc(100vw - 96px);
    }

    .theme-switch span {
        display: inline;
    }

    .channel-nav__inner {
        gap: 8px;
        padding: 8px 0;
    }

    .channel-chip,
    .status-pill,
    .tag,
    .badge {
        font-size: 0.78rem;
    }

    .channel-chip {
        padding: 7px 12px;
    }

    .hero-grid,
    .stream-main,
    .stream-sidebar,
    .detail-main,
    .detail-sidebar,
    .forum-list,
    .editor-sidebar {
        gap: 14px;
    }

    .hero-feature {
        min-height: 280px;
        border-radius: 18px;
    }

    .hero-feature__overlay,
    .forum-card__body,
    .sidebar-card,
    .form-card,
    .table-card,
    .content-card,
    .reply-card,
    .circle-card,
    .page-header,
    .profile-hero,
    .board-hero,
    .detail-banner__content {
        padding: 16px;
    }

    .detail-banner {
        padding: 0;
    }

    .detail-banner__cover {
        min-height: 180px;
    }

    .detail-banner h1,
    .hero-feature__body h1 {
        font-size: clamp(1.62rem, 7vw, 2.1rem);
        line-height: 1.12;
    }

    .hero-feature__body p,
    .detail-banner p {
        font-size: 0.94rem;
    }

    .hero-feature__meta,
    .detail-banner__meta,
    .badge-row {
        gap: 8px;
    }

    .hero-mini {
        min-height: 108px;
        padding: 16px;
        border-radius: 18px;
    }

    .hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .hero-stat,
    .stat-card {
        padding: 14px 12px;
        border-radius: 16px;
    }

    .hero-stat strong,
    .stat-card strong {
        font-size: 1.2rem;
    }

    .forum-card__media-overlay {
        min-height: 160px;
        padding: 16px;
    }

    .forum-list .forum-card__media,
    .forum-list .forum-card__media-overlay {
        min-height: 160px;
    }

    .forum-card h3 {
        font-size: 1.05rem;
    }

    .forum-card__meta {
        gap: 10px;
    }

    .circle-card {
        grid-template-columns: auto 1fr;
        gap: 12px;
        align-items: start;
    }

    .circle-card__count {
        grid-column: 2;
    }

    .thread-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .thread-actions a,
    .thread-actions form,
    .thread-actions button,
    .search-bar .button,
    .search-bar--admin input,
    .search-bar--admin select,
    .search-bar--admin button,
    .editor-submitbar .button,
    .md-import-button {
        width: 100%;
    }

    .search-bar--admin select {
        min-width: 0;
    }

    .brand-preview {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-brand {
        width: 100%;
    }

    .profile-stats,
    .editor-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-metric-grid {
        grid-template-columns: 1fr;
    }

    .backup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .backup-grid code,
    .code-panel code {
        overflow-wrap: anywhere;
    }

    .detail-reader {
        font-size: 0.96rem;
        line-height: 1.82;
    }

    .detail-reader {
        width: 100%;
        padding: 22px 18px;
    }

    .markdown-body pre {
        padding: 12px;
        border-radius: 14px;
        font-size: 0.86rem;
    }

    .markdown-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .editor-workspace__head,
    .editor-submitbar {
        flex-direction: column;
        align-items: stretch;
    }

    .editor-mode {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .editor-mode__button {
        flex: none;
        text-align: center;
    }

    .editor-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
    }

    .editor-toolbar__group {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .editor-toolbar__group::-webkit-scrollbar {
        display: none;
    }

    .editor-tool {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 8px 11px;
    }

    .editor-title-field input {
        font-size: 1.1rem;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .editor-body-field textarea,
    .editor-preview {
        min-height: 360px;
    }

    .editor-stat,
    .editor-draft-box,
    .backup-panel,
    .code-panel,
    .cover-upload {
        padding: 14px;
        border-radius: 16px;
    }

    .cover-upload__preview {
        min-height: 160px;
    }

    .thread-card__cover {
        aspect-ratio: 16 / 10;
    }

    .thread-card--admin .action-row,
    .thread-card--manage .action-row {
        gap: 10px;
    }

    .thread-card--admin .action-row > a,
    .thread-card--manage .action-row > a,
    .thread-card--admin .action-row > button,
    .thread-card--manage .action-row > button,
    .thread-card--admin .action-row > form,
    .thread-card--manage .action-row > form {
        flex: 1 1 calc(50% - 6px);
    }

    .thread-card--admin .action-row form button,
    .thread-card--manage .action-row form button {
        width: 100%;
    }

    .auth-brand {
        padding: 22px;
    }

    .auth-brand img {
        width: 88px;
        height: 88px;
        border-radius: 20px;
    }

    .auth-brand h1 {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }

    .wechat-qrcode-panel,
    .wechat-qrcode-panel iframe {
        min-height: 300px;
    }
}

@media (max-width: 520px) {
    .site-header__main-inner {
        gap: 12px;
    }

    .brand {
        gap: 12px;
    }

    .brand__logo {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .brand__text strong {
        font-size: 0.96rem;
    }

    .brand__text small {
        font-size: 0.78rem;
    }

    .header-user,
    .header-points,
    .header-pet-link,
    .theme-switch,
    .header-tools > .button,
    .header-tools > .inline-form {
        flex-basis: 100%;
    }

    .primary-nav {
        gap: 14px;
    }

    .primary-nav a {
        font-size: 0.9rem;
    }

    .channel-chip {
        padding: 6px 11px;
    }

    .hero-feature {
        min-height: 240px;
    }

    .hero-feature__overlay {
        padding: 14px;
    }

    .hero-feature__body h1 {
        margin: 12px 0 8px;
        font-size: 1.48rem;
    }

    .hero-feature__meta,
    .detail-banner__meta {
        font-size: 0.84rem;
    }

    .hero-stats,
    .profile-stats,
    .editor-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .thread-card--admin .action-row > a,
    .thread-card--manage .action-row > a,
    .thread-card--admin .action-row > button,
    .thread-card--manage .action-row > button,
    .thread-card--admin .action-row > form,
    .thread-card--manage .action-row > form {
        flex-basis: 100%;
    }

    .editor-mode {
        gap: 4px;
        padding: 4px;
    }

    .editor-mode__button {
        padding: 8px 10px;
        font-size: 0.9rem;
    }

    .editor-body-field textarea,
    .editor-preview {
        min-height: 300px;
    }

    .form-card h1,
    .form-card h2,
    .page-header h1,
    .profile-hero h1 {
        font-size: 1.35rem;
    }

    .backup-grid {
        grid-template-columns: 1fr;
    }

    .wechat-qrcode-panel,
    .wechat-qrcode-panel iframe {
        min-height: 260px;
    }
}

@media (max-width: 420px) {
    .container {
        width: min(100% - 18px, 1200px);
    }

    .page-shell {
        padding: 14px 0 32px;
    }

    .site-header__top {
        font-size: 0.78rem;
    }

    .brand__text small {
        font-size: 0.8rem;
    }

    .hero-feature__overlay,
    .forum-card__body,
    .sidebar-card,
    .form-card,
    .table-card,
    .content-card,
    .reply-card,
    .circle-card,
    .page-header,
    .profile-hero,
    .board-hero,
    .detail-banner__content {
        padding: 14px;
    }

    .channel-chip,
    .badge,
    .tag,
    .status-pill {
        font-size: 0.75rem;
    }

    .detail-banner__cover {
        min-height: 160px;
    }

    .profile-stats,
    .editor-stats,
    .hero-stats {
        grid-template-columns: 1fr;
    }

    .thread-card--manage > :not(.thread-card__cover),
    .thread-card--admin > :not(.thread-card__cover) {
        padding-left: 14px;
        padding-right: 14px;
    }

    .thread-card--manage .thread-card__head,
    .thread-card--admin .thread-card__head {
        padding-top: 14px;
    }

    .thread-card--manage .action-row,
    .thread-card--admin .action-row {
        padding-bottom: 14px;
    }

    .editor-title-field input {
        font-size: 1rem;
    }
}

.install-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(0, 191, 166, 0.14), transparent 34%),
        linear-gradient(180deg, #03141d 0%, #071a24 100%);
}

.install-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 48px;
}

.install-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 24px;
    margin-bottom: 24px;
}

.install-hero__copy,
.install-hero__panel,
.install-card {
    background: rgba(7, 23, 31, 0.86);
    border: 1px solid rgba(121, 143, 155, 0.2);
    border-radius: 24px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

.install-hero__copy,
.install-hero__panel {
    padding: 28px;
    color: #f2f7fb;
}

.install-hero__copy p,
.install-hero__panel p {
    color: rgba(232, 241, 247, 0.78);
}

.install-checklist {
    margin: 16px 0 0;
    padding-left: 18px;
    color: rgba(232, 241, 247, 0.86);
}

.install-card {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.inline-input {
    display: flex;
    gap: 10px;
}

.inline-input input {
    flex: 1;
}

.install-db-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(121, 143, 155, 0.16);
}

.install-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .install-hero {
        grid-template-columns: 1fr;
    }

    .inline-input {
        flex-direction: column;
    }

    .install-actions {
        justify-content: stretch;
    }

    .install-actions .button {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .thread-list .thread-card--manage,
    .thread-list .thread-card--admin,
    .profile-thread-list .forum-card {
        grid-template-columns: 1fr;
    }

    .thread-list .thread-card__cover,
    .profile-thread-list .forum-card__media {
        grid-row: auto;
        height: auto;
        min-height: 160px;
        aspect-ratio: 16 / 9;
    }

    .login-history-agent {
        max-width: 280px;
    }

    .admin-body .page-shell > .container {
        width: min(100% - 18px, 1720px);
    }
}