/* ============================================================
   Polar Impact Records · 社区 / 账户
   ============================================================ */
:root {
    --c-ink: #071426;
    --c-text: #34465c;
    --c-muted: #73859a;
    --c-line: #e2ebf5;
    --c-blue: #0098e8;
    --c-blue-deep: #006fc4;
    --c-green: #0a9f5b;
    --c-bg: #f2f6fb;
    --c-card: #ffffff;
}

.community-page,
.auth-page,
.user-page {
    background: var(--c-bg);
    min-height: 100vh;
    color: var(--c-text);
}

[hidden] {
    display: none !important;
}

/* 导航在九个入口 + 登录按钮下保持单行 */
.navbar-brand {
    flex-shrink: 0;
}

.navbar-brand h1 {
    font-size: 1.35rem;
    white-space: nowrap;
}

.navbar-menu {
    flex-wrap: nowrap;
}

.navbar-menu li {
    flex: 0 0 auto;
    margin-left: 16px;
    white-space: nowrap;
}

.navbar-menu a {
    font-size: 0.9rem;
    white-space: nowrap;
}

.community-page {
    padding-bottom: 70px;
}

.community-hero {
    position: relative;
    overflow: hidden;
    padding: 104px 0 48px;
    background:
        radial-gradient(90% 110% at 88% 0%, rgba(0, 170, 255, 0.28), transparent 55%),
        radial-gradient(80% 120% at 8% 100%, rgba(105, 70, 255, 0.2), transparent 58%),
        linear-gradient(120deg, #050d19 0%, #0a1d33 52%, #07182b 100%);
    color: #fff;
}

.community-hero::before {
    content: "FORUM";
    position: absolute;
    right: 4%;
    bottom: -34px;
    color: rgba(255, 255, 255, 0.045);
    font-size: clamp(5rem, 15vw, 12rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 1;
    pointer-events: none;
}

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

.c-eyebrow {
    margin: 0 0 12px;
    color: #63cfff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.24em;
}

.community-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
}

.community-hero p {
    max-width: 680px;
    margin: 16px 0 0;
    color: #a9bed3;
    font-size: 0.95rem;
    line-height: 1.85;
}

.community-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 20px;
}

.community-hero-stats span {
    color: #8ea6be;
    font-size: 0.75rem;
}

.community-hero-stats strong {
    display: block;
    color: #fff;
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
}

.forum-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
    align-items: center;
}

.forum-hero-copy {
    min-width: 0;
}

.forum-topics-panel {
    min-width: 0;
    max-height: 310px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
}

.forum-topics-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.forum-topics-head h2 {
    margin: 0;
    color: #fff;
    font-size: 0.92rem;
}

.forum-topics-head span {
    color: #7f9cb8;
    font-size: 0.65rem;
}

.forum-topics-list {
    display: grid;
    gap: 6px;
    max-height: 230px;
    overflow-y: auto;
}

.forum-topics-empty {
    margin: 8px 0;
    color: #8ca5bd;
    font-size: 0.72rem;
}

.forum-topic-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.055);
    color: #cfe3f5;
    font-family: inherit;
    font-size: 0.76rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.forum-topic-item:hover,
.forum-topic-item.is-active {
    border-color: rgba(92, 204, 255, 0.5);
    background: rgba(0, 170, 255, 0.16);
    color: #fff;
}

.forum-topic-item em {
    flex: 0 0 auto;
    color: #7f9cb8;
    font-size: 0.65rem;
    font-style: normal;
}

.forum-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid #cfe9fb;
    border-radius: 10px;
    background: #eef9ff;
    color: #45637e;
    font-size: 0.76rem;
}

.forum-filter strong {
    color: var(--c-blue-deep);
}

.post-topic-row {
    margin-bottom: 8px;
}

.post-topic {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 0;
    border-radius: 999px;
    background: #eaf7ff;
    color: #087bbd;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.post-topic:hover {
    background: #d8f0ff;
    color: #006aa5;
}

.community-shell {
    margin-top: -38px;
    position: relative;
    z-index: 2;
}

.forum-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 24px;
    align-items: start;
}

.forum-main {
    min-width: 0;
    padding: 0;
}

.forum-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid var(--c-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 42, 71, 0.05);
}

.forum-toolbar h2 {
    margin: 0;
    color: var(--c-ink);
    font-size: 1.05rem;
    font-weight: 800;
}

.forum-toolbar p {
    margin: 2px 0 0;
    color: var(--c-muted);
    font-size: 0.75rem;
}

.forum-feed {
    display: grid;
    gap: 14px;
}

/* 论坛内联发帖 / 编辑 */
.forum-composer {
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid var(--c-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 42, 71, 0.045);
}

.forum-composer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.forum-composer-head h2 {
    margin: 0;
    color: var(--c-ink);
    font-size: 1rem;
    font-weight: 800;
}

.forum-composer-head p {
    margin: 3px 0 0;
    color: var(--c-muted);
    font-size: 0.72rem;
}

.composer-head-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.composer-login-tip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px dashed #cfe2f2;
    border-radius: 12px;
    background: #f8fbfe;
}

.composer-login-tip p {
    margin: 0;
    color: var(--c-muted);
    font-size: 0.8rem;
}

.composer-textarea {
    min-height: 110px;
}

.composer-topic-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.composer-topic-row label {
    color: var(--c-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.composer-topic-select {
    width: auto;
    min-width: 180px;
    max-width: 100%;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 0.76rem;
}

.composer-topic-create {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px dashed #cfe4f4;
    border-radius: 9px;
    background: #f8fcff;
}

.composer-topic-create .c-input {
    width: auto;
    flex: 1 1 220px;
    min-width: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 0.76rem;
}

.composer-image-preview {
    position: relative;
    width: min(100%, 280px);
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid #e2edf7;
    border-radius: 10px;
    background: #f7fafd;
}

.composer-image-preview img {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: contain;
}

.composer-remove-image {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(6, 18, 34, 0.72);
    color: #fff;
    font-size: 0.75rem;
    cursor: pointer;
}

.composer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.composer-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.composer-tool {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border: 1px solid #e2ebf4;
    border-radius: 8px;
    background: #f8fbfe;
    color: #52677e;
    font-family: inherit;
    font-size: 0.74rem;
    cursor: pointer;
}

.composer-tool:hover {
    border-color: #b9dcf6;
    background: #eef9ff;
    color: var(--c-blue-deep);
}

.composer-file {
    padding-top: 7px;
    padding-bottom: 7px;
}

.composer-image-status {
    color: var(--c-muted);
    font-size: 0.7rem;
}

.composer-count {
    color: var(--c-muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.emoji-pop {
    display: grid;
    grid-template-columns: repeat(10, 30px);
    gap: 3px;
    width: max-content;
    max-width: 100%;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid #e0ebf5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 42, 71, 0.1);
}

.emoji-pop button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.emoji-pop button:hover {
    background: #eef8ff;
}

.composer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f5fa;
}

.post-card {
    padding: 20px;
    border: 1px solid var(--c-line);
    border-radius: 18px;
    background: var(--c-card);
    box-shadow: 0 10px 28px rgba(15, 42, 71, 0.045);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.post-card:hover {
    border-color: #c9deef;
}

.post-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.author-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.author-link:hover strong {
    color: var(--c-blue-deep);
}

.post-image {
    margin: 14px 0 16px;
    overflow: hidden;
    border: 1px solid #e5eef7;
    border-radius: 12px;
    background: #f6f9fc;
}

.post-image img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
}

.post-author {
    min-width: 0;
    flex: 1;
}

.post-author strong {
    display: block;
    overflow: hidden;
    color: var(--c-ink);
    font-size: 0.9rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-author span {
    display: block;
    margin-top: 2px;
    color: var(--c-muted);
    font-size: 0.7rem;
}

.post-delete {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #a8b6c6;
    font-size: 0.72rem;
    cursor: pointer;
}

.post-head-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.post-delete:hover {
    color: #d14356;
}

.post-content {
    margin: 14px 0 16px;
    color: #26384d;
    font-size: 0.93rem;
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
}

.post-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #f0f5fa;
}

.post-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--c-muted);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.post-action:hover {
    background: #f3f8fd;
    color: var(--c-blue-deep);
}

.post-action.is-liked {
    color: #e04b67;
}

.post-comments {
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    background: #f7fafd;
}

.comment-list {
    display: grid;
    gap: 10px;
}

.comment-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.78rem;
    line-height: 1.65;
}

.comment-avatar-link {
    display: inline-flex;
    flex: 0 0 auto;
    text-decoration: none;
}

.comment-body {
    min-width: 0;
    flex: 1;
}

.comment-body strong {
    color: var(--c-ink);
    font-weight: 700;
}

.comment-author-link {
    color: inherit;
    text-decoration: none;
}

.comment-author-link:hover strong {
    color: var(--c-blue-deep);
}

.comment-body p {
    margin: 2px 0 0;
    color: #52677e;
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-time {
    margin-left: 6px;
    color: #9aabba;
    font-size: 0.66rem;
}

.comment-delete {
    border: 0;
    background: transparent;
    color: #a8b6c6;
    font-size: 0.66rem;
    cursor: pointer;
}

.comment-delete:hover {
    color: #d14356;
}

.comment-more {
    margin-top: 8px;
    border: 0;
    background: transparent;
    color: var(--c-blue-deep);
    font-family: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}

.comment-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.comment-form input {
    min-width: 0;
    flex: 1;
    padding: 9px 11px;
    border: 1px solid #dbe7f2;
    border-radius: 8px;
    background: #fff;
    color: var(--c-ink);
    font-family: inherit;
    font-size: 0.78rem;
}

.comment-form input:focus {
    outline: none;
    border-color: #8ed5ff;
    box-shadow: 0 0 0 3px rgba(0, 152, 232, 0.1);
}

.comment-form button {
    flex: 0 0 auto;
    padding: 8px 13px;
    border: 0;
    border-radius: 8px;
    background: var(--c-ink);
    color: #fff;
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.comment-form button:hover {
    background: var(--c-blue-deep);
}

.comment-login-tip {
    margin: 10px 0 0;
    color: var(--c-muted);
    font-size: 0.75rem;
}

.comment-login-tip a {
    color: var(--c-blue-deep);
}

.feed-empty,
.feed-loading,
.feed-error {
    padding: 46px 24px;
    border: 1px dashed #cfe0ef;
    border-radius: 16px;
    background: #fff;
    color: var(--c-muted);
    font-size: 0.85rem;
    text-align: center;
}

.feed-error {
    border-color: #ffd7dc;
    background: #fff7f8;
    color: #b53b4d;
}

.forum-more {
    margin-top: 16px;
    width: 100%;
}

.forum-side {
    display: grid;
    gap: 14px;
    position: sticky;
    top: 92px;
}

.forum-side-card {
    padding: 18px;
    border: 1px solid var(--c-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 42, 71, 0.04);
}

.forum-side-card h3 {
    margin: 0 0 8px;
    color: var(--c-ink);
    font-size: 0.9rem;
    font-weight: 800;
}

.forum-side-card p {
    margin: 0;
    color: var(--c-muted);
    font-size: 0.76rem;
    line-height: 1.8;
}

.forum-side-card .c-btn {
    width: 100%;
    margin-top: 12px;
}

.forum-side-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.forum-side-user strong {
    display: block;
    color: var(--c-ink);
    font-size: 0.85rem;
}

.forum-side-user span {
    color: var(--c-muted);
    font-size: 0.7rem;
}

.forum-rules {
    margin: 0;
    padding-left: 16px;
    color: var(--c-muted);
    font-size: 0.74rem;
    line-height: 1.9;
}

/* 头像 */
.c-avatar {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a2a4a, #0d7fc4);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
}

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

.c-avatar.c-avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 0.75rem;
}

.c-avatar.c-avatar-lg {
    width: 76px;
    height: 76px;
    font-size: 1.4rem;
}

.c-avatar.c-avatar-xl {
    width: 104px;
    height: 104px;
    font-size: 1.8rem;
}

/* 通用按钮 / 表单 */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: #eef5fb;
    color: var(--c-ink);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

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

.c-btn-primary {
    background: linear-gradient(135deg, #00aaff, #0073d9);
    box-shadow: 0 10px 22px rgba(0, 120, 220, 0.22);
    color: #fff;
}

.c-btn-primary:hover {
    background: linear-gradient(135deg, #16b6ff, #006fc4);
}

.c-btn-dark {
    background: var(--c-ink);
    color: #fff;
}

.c-btn-outline {
    border-color: #cfe1f1;
    background: #fff;
    color: var(--c-ink);
}

.c-btn-danger {
    border-color: #ffd3da;
    background: #fff5f7;
    color: #bf3d51;
}

.c-btn[disabled] {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

.c-field {
    display: grid;
    gap: 7px;
}

.c-field label {
    color: var(--c-ink);
    font-size: 0.78rem;
    font-weight: 700;
}

.c-input,
.c-textarea,
.c-select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #d9e6f2;
    border-radius: 9px;
    background: #fbfdff;
    color: var(--c-ink);
    font-family: inherit;
    font-size: 0.86rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.c-input:focus,
.c-textarea:focus,
.c-select:focus {
    outline: none;
    border-color: #80cfff;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 152, 232, 0.1);
}

.c-textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.75;
}

.c-hint {
    margin: 0;
    color: var(--c-muted);
    font-size: 0.7rem;
    line-height: 1.65;
}

.c-alert {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #ffd7dc;
    border-radius: 9px;
    background: #fff3f5;
    color: #b53b4d;
    font-size: 0.78rem;
    line-height: 1.6;
}

.c-alert.is-ok {
    border-color: #c9efd9;
    background: #f0fbf5;
    color: #087b47;
}

.c-toast {
    position: fixed;
    top: 88px;
    left: 50%;
    z-index: 2000;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--c-ink);
    box-shadow: 0 14px 34px rgba(3, 17, 33, 0.28);
    color: #fff;
    font-size: 0.8rem;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.c-toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.c-form {
    display: grid;
    gap: 15px;
}

.c-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* 登录 / 注册 */
.auth-page {
    padding: 118px 0 64px;
}

.auth-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    max-width: 1030px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(10, 31, 55, 0.16);
}

.auth-visual {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 590px;
    padding: 42px;
    background:
        radial-gradient(100% 100% at 90% 0%, rgba(0, 170, 255, 0.34), transparent 56%),
        radial-gradient(100% 110% at 0% 100%, rgba(111, 66, 193, 0.32), transparent 58%),
        linear-gradient(140deg, #06101e, #0a2139 55%, #071727);
    color: #fff;
}

.auth-visual .c-eyebrow {
    color: #67d2ff;
}

.auth-visual h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.auth-visual h1 span {
    display: block;
    color: #5fc8ff;
}

.auth-visual p {
    max-width: 380px;
    margin: 16px 0 0;
    color: #9fb6cc;
    font-size: 0.86rem;
    line-height: 1.9;
}

.auth-quote {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: #9fb6cc;
    font-size: 0.8rem;
    line-height: 1.8;
}

.auth-quote strong {
    display: block;
    margin-bottom: 4px;
    color: #fff;
}

.auth-card {
    padding: 38px 36px;
}

.auth-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: 10px;
    background: #f1f6fb;
}

.auth-tab {
    flex: 1;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b8198;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.auth-tab.is-active {
    background: #fff;
    box-shadow: 0 4px 12px rgba(20, 53, 86, 0.08);
    color: var(--c-ink);
}

.auth-card h2 {
    margin: 22px 0 6px;
    color: var(--c-ink);
    font-size: 1.45rem;
}

.auth-card > p {
    margin: 0 0 20px;
    color: var(--c-muted);
    font-size: 0.78rem;
    line-height: 1.7;
}

.auth-form {
    display: none;
}

.auth-form.is-active {
    display: grid;
}

.auth-inline-link {
    margin: -4px 0 0;
    text-align: right;
    font-size: 0.74rem;
}

.auth-inline-link a {
    color: var(--c-blue-deep);
    text-decoration: none;
}

.code-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.code-row .c-input {
    min-width: 0;
    flex: 1;
    letter-spacing: 0.16em;
}

.code-send {
    flex: 0 0 auto;
    min-width: 112px;
    padding: 0 12px;
    border: 1px solid #b9dcf6;
    border-radius: 9px;
    background: #f2faff;
    color: #0073b8;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.code-send:hover {
    border-color: #7cc8f5;
    background: #e7f6ff;
}

.code-send:disabled {
    color: #8b9ab0;
    cursor: wait;
    opacity: 0.75;
}

.auth-foot {
    margin-top: 18px;
    color: var(--c-muted);
    font-size: 0.72rem;
    line-height: 1.7;
}

.auth-foot a {
    color: var(--c-blue-deep);
}

/* 公开用户主页 */
.profile-page {
    padding: 118px 0 64px;
    background: var(--c-bg);
    min-height: 100vh;
}

.profile-shell {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.profile-card {
    padding: 24px;
    border: 1px solid var(--c-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 42, 71, 0.06);
    position: sticky;
    top: 92px;
    text-align: center;
}

.profile-card .c-avatar-xl {
    margin: 0 auto 12px;
}

.profile-card h1 {
    margin: 0;
    color: var(--c-ink);
    font-size: 1.35rem;
    overflow-wrap: anywhere;
}

.profile-role {
    margin: 4px 0 0;
    color: var(--c-blue-deep);
    font-size: 0.76rem;
    font-weight: 700;
}

.profile-bio {
    margin: 14px 0 0;
    color: var(--c-muted);
    font-size: 0.8rem;
    line-height: 1.8;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.profile-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #edf3f9;
}

.profile-stats-row strong {
    display: block;
    color: var(--c-ink);
    font-size: 1.2rem;
}

.profile-stats-row span {
    color: var(--c-muted);
    font-size: 0.68rem;
}

.profile-joined {
    margin: 14px 0 0;
    color: #92a3b6;
    font-size: 0.68rem;
}

.profile-actions {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.profile-main {
    min-width: 0;
    padding: 0;
}

.profile-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.profile-main-head h2 {
    margin: 0;
    color: var(--c-ink);
    font-size: 1.05rem;
}

.profile-main-head span {
    color: var(--c-muted);
    font-size: 0.72rem;
}

.profile-empty {
    padding: 46px 24px;
    border: 1px dashed #cfe0ef;
    border-radius: 16px;
    background: #fff;
    color: var(--c-muted);
    font-size: 0.85rem;
    text-align: center;
}

/* 用户中心 */
.user-page {
    padding: 118px 0 64px;
}

.user-hero {
    padding: 0 0 24px;
}

.user-hero h1 {
    margin: 6px 0 0;
    color: var(--c-ink);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    letter-spacing: -0.035em;
}

.user-hero p {
    margin: 8px 0 0;
    color: var(--c-muted);
    font-size: 0.85rem;
}

.user-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) 320px;
    gap: 24px;
    align-items: start;
}

.user-main {
    min-width: 0;
    padding: 0;
}

.user-panel {
    padding: 24px;
    border: 1px solid var(--c-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 42, 71, 0.05);
}

.user-panel[hidden] {
    display: none;
}

.user-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.user-panel-head h2 {
    margin: 0;
    color: var(--c-ink);
    font-size: 1.18rem;
}

.user-panel-head p {
    margin: 4px 0 0;
    color: var(--c-muted);
    font-size: 0.76rem;
    line-height: 1.65;
}

.compose-box {
    display: grid;
    gap: 12px;
}

.compose-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--c-muted);
    font-size: 0.7rem;
}

.compose-actions {
    display: flex;
    justify-content: flex-end;
}

.my-posts {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.my-posts h3 {
    margin: 0;
    color: var(--c-ink);
    font-size: 0.95rem;
}

.my-post {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #edf3f9;
    border-radius: 11px;
    background: #fbfdff;
}

.my-post-body {
    min-width: 0;
    flex: 1;
}

.my-post-image {
    display: block;
    width: 100%;
    max-height: 180px;
    margin-bottom: 8px;
    border-radius: 8px;
    object-fit: cover;
    background: #eef4fa;
}

.my-post-body p {
    margin: 0;
    color: #33485f;
    font-size: 0.82rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.my-post-meta {
    margin-top: 6px;
    color: var(--c-muted);
    font-size: 0.68rem;
}

.my-post-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.user-side {
    display: grid;
    gap: 14px;
    position: sticky;
    top: 92px;
}

.user-card {
    padding: 22px;
    border: 1px solid var(--c-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 42, 71, 0.05);
}

.user-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
}

.user-card-head h2 {
    margin: 0;
    color: var(--c-ink);
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.user-card-head p {
    margin: 2px 0 0;
    color: var(--c-muted);
    font-size: 0.7rem;
}

.user-card-role {
    color: var(--c-blue-deep) !important;
    font-size: 0.68rem !important;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.user-card-bio {
    margin: 14px 0 0;
    color: var(--c-muted);
    font-size: 0.76rem;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.user-menu {
    display: grid;
    gap: 5px;
    padding: 8px;
    border: 1px solid var(--c-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 42, 71, 0.05);
}

.user-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #52677e;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.user-menu button:hover {
    background: #f3f8fd;
    color: var(--c-ink);
}

.user-menu button.is-active {
    background: #eaf7ff;
    color: #006fc4;
}

.user-menu button.c-menu-danger {
    color: #b24a5b;
}

.user-menu button.c-menu-danger:hover {
    background: #fff4f6;
    color: #b53b4d;
}

.avatar-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.avatar-preview {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #eef5fb;
    box-shadow: 0 8px 24px rgba(15, 42, 71, 0.12);
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.avatar-editor-actions p {
    margin: 0;
    color: var(--c-muted);
    font-size: 0.7rem;
}

.file-input {
    max-width: 100%;
    color: var(--c-muted);
    font-family: inherit;
    font-size: 0.75rem;
}

.profile-stats {
    display: flex;
    gap: 20px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #edf3f9;
}

.profile-stats span {
    color: var(--c-muted);
    font-size: 0.68rem;
}

.profile-stats strong {
    display: block;
    color: var(--c-ink);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

/* 导航登录按钮 */
.nav-auth-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 172px;
    padding: 5px 11px !important;
    border: 1px solid rgba(0, 170, 255, 0.48);
    border-radius: 999px;
    background: rgba(0, 170, 255, 0.12);
    color: #dff5ff !important;
    font-size: 0.8rem !important;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
}

#nav-auth-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-auth-link:hover {
    border-color: #5fd4ff;
    background: rgba(0, 170, 255, 0.24);
    color: #fff !important;
}

.nav-auth-avatar {
    display: none;
    width: 23px;
    height: 23px;
    overflow: hidden;
    flex: 0 0 23px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a2a4a, #0d7fc4);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
}

.nav-auth-avatar.has-avatar,
.nav-auth-avatar.has-fallback {
    display: inline-grid;
}

.nav-auth-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-auth-link.is-current {
    border-color: #5fd4ff;
    background: rgba(0, 170, 255, 0.28);
}

.nav-auth-item {
    margin-left: 14px !important;
}

/* 导航 9 项后的桌面间距 */
@media (max-width: 1180px) {
    .navbar-menu li {
        margin-left: 14px;
    }

    .navbar-menu a {
        font-size: 0.86rem;
    }

    .navbar-brand h1 {
        font-size: 1.2rem;
    }
}

@media (max-width: 980px) {
    .navbar-menu li {
        margin-left: 9px;
    }

    .navbar-menu a {
        font-size: 0.8rem;
    }

    .navbar-brand h1 {
        font-size: 1.05rem;
    }

    .forum-layout,
    .user-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .forum-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .forum-topics-panel {
        max-width: 560px;
        max-height: none;
    }
}

@media (max-width: 900px) {
    .auth-layout {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .auth-visual {
        min-height: 0;
        padding: 28px;
    }

    .auth-visual .auth-quote {
        display: none;
    }

    .auth-card {
        padding: 30px 24px;
    }

    .forum-layout,
    .user-layout {
        grid-template-columns: 1fr;
    }

    .profile-shell {
        grid-template-columns: 1fr;
    }

    .profile-card {
        position: static;
    }

    .forum-side,
    .user-side {
        position: static;
    }

    .forum-side {
        order: 2;
    }
}

@media (max-width: 860px) {
    .navbar-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding: 30px 0;
        background: #000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transform: translateY(-150%);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .navbar-menu.active {
        opacity: 1;
        transform: translateY(0);
    }

    .navbar-menu li {
        margin: 15px 0;
    }

    .nav-auth-item {
        margin-left: 0 !important;
    }

    .navbar-toggle {
        display: block;
    }
}

@media (max-width: 768px) {
    .navbar-menu {
        width: 100%;
    }

    .navbar-menu li {
        margin: 15px 0;
    }

    .nav-auth-item {
        margin-left: 0 !important;
    }

    .nav-auth-link {
        padding: 8px 18px !important;
        font-size: 0.9rem !important;
    }

    .community-hero {
        padding: 94px 0 40px;
    }

    .community-shell {
        margin-top: -24px;
    }

    .community-hero-stats {
        gap: 18px;
    }

    .post-card {
        padding: 16px;
    }

    .c-form-row {
        grid-template-columns: 1fr;
    }

    .user-page,
    .auth-page {
        padding-top: 100px;
    }
}

@media (max-width: 520px) {
    .auth-card {
        padding: 24px 18px;
    }

    .auth-visual {
        padding: 24px 20px;
    }

    .code-row {
        flex-direction: column;
    }

    .code-send {
        min-height: 40px;
    }

    .user-panel {
        padding: 18px;
    }

    .post-actions {
        flex-wrap: wrap;
    }

    .comment-form {
        flex-direction: column;
    }

    .comment-form button {
        width: 100%;
    }
}

/* 个人中心「我的帖子」展开评论 */
.my-post-comment-toggle {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-blue-deep);
    font-family: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}

.my-post-comment-toggle:hover {
    text-decoration: underline;
}

.my-post-comments {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed #e1ebf4;
    display: grid;
    gap: 8px;
}

.my-comment {
    padding: 8px 10px;
    border-radius: 8px;
    background: #f6f9fd;
    font-size: 0.75rem;
    line-height: 1.65;
}

.my-comment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.my-comment-head strong {
    color: var(--c-ink);
    font-size: 0.75rem;
}

.my-comment-head span {
    color: #96a7b9;
    font-size: 0.65rem;
}

.my-comment p {
    margin: 3px 0 0;
    color: #52677e;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Music community forms and post metadata */
.forum-fields { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; padding:16px; border:1px solid var(--c-line); border-radius:12px; background:var(--c-bg); }
.forum-fields label { display:flex; flex:1 1 180px; flex-direction:column; gap:7px; color:var(--c-text); font-size:13px; min-width:0; }
.forum-fields [hidden] { display:none; }
.forum-fields input,.forum-fields select { width:100%; box-sizing:border-box; padding:10px; border-radius:6px; border:1px solid var(--c-line); background:var(--c-card); color:var(--c-ink); min-width:0; }
.forum-fields p { flex-basis:100%; color:var(--c-text); line-height:1.7; margin:0; }
.forum-post-details { margin:12px 0; padding:12px; background:rgba(120,160,210,.07); border-radius:8px; overflow-wrap:anywhere; }
.forum-post-details a,#forum-notices a { color:var(--c-blue-deep); }
.post-actions { flex-wrap:wrap; }
.post-action[aria-pressed="true"] { color:var(--c-blue-deep); }
#forum-notices { padding:16px; margin-bottom:18px; border:1px solid var(--c-line); border-radius:10px; }
#forum-notices summary { cursor:pointer; }
.forum-fields :focus-visible,.post-action:focus-visible { outline:2px solid var(--c-blue-deep); outline-offset:3px; }

.personal-library { margin-top:28px; border-top:1px solid var(--c-line); padding-top:20px; }
.personal-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.personal-tabs [aria-pressed="true"] { background:#e8f4ff; color:var(--c-ink); border-color:var(--c-blue-deep); }
.personal-kind-label { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:16px 0; color:var(--c-text); }
.personal-kind-label select { min-width:150px; max-width:100%; }
.personal-notice { padding:16px; border-bottom:1px solid var(--c-line); line-height:1.7; }
.personal-notice a,.my-post-body > a { color:var(--c-blue-deep); }
.personal-notice span { color:var(--c-muted); font-size:12px; }
.personal-notice.is-unread { border-left:3px solid var(--c-blue-deep); }
.my-post-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }
.my-post-body { min-width:0; overflow-wrap:anywhere; }
#my-public-profile { margin:12px 0; width:100%; }
@media (max-width:600px) { .my-post { flex-direction:column; } .my-post-actions { width:100%; } }

/* User follows are separate from followed forum posts. */
.user-social { margin:16px 0; }
.user-social-counts { display:flex; justify-content:center; gap:12px; margin-bottom:12px; }
.user-social-counts button { flex:1; padding:12px; border:1px solid var(--c-line); border-radius:10px; background:var(--c-card); color:var(--c-ink); cursor:pointer; }
.user-social-counts strong,.user-social-counts span { display:block; }
.user-social-counts strong { font-size:1.3rem; }
.user-social-counts span { margin-top:4px; color:var(--c-muted); font-size:.8rem; }
.user-social > [data-follow] { width:100%; }
.user-social-dialog { width:min(560px,calc(100% - 32px)); max-height:80vh; box-sizing:border-box; border:1px solid var(--c-line); border-radius:16px; padding:22px; color:var(--c-text); background:var(--c-card); }
.user-social-dialog::backdrop { background:rgba(7,20,38,.55); }
.social-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.social-dialog-head h2 { margin:0; font-size:1.2rem; color:var(--c-ink); }
.social-user-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--c-line); }
.social-user-row .author-link { min-width:0; }
.social-user-row strong { overflow-wrap:anywhere; }
.social-user-row small { display:block; color:var(--c-muted); }
.social-user-row > button { flex-shrink:0; }
.user-social-counts button:focus-visible { outline:2px solid var(--c-blue-deep); outline-offset:2px; }
@media(max-width:420px) { .social-user-row { flex-wrap:wrap; } }

/* Shared threaded comments */
.thread-item { min-width:0; padding:10px 0; border-bottom:1px solid var(--c-line); }
.thread-item .comment-item { margin:0; border:0; padding:0; align-items:flex-start; }
.thread-item .comment-body { min-width:0; flex:1; }
.thread-item .comment-body p { white-space:pre-wrap; overflow-wrap:anywhere; }
.thread-item a { color:var(--c-blue-deep); text-decoration:none; }
.thread-actions { display:flex; flex-wrap:wrap; gap:8px; }
.thread-actions button,.thread-expand,[data-thread-more],[data-thread-cancel] { border:1px solid var(--c-line); background:#fff; color:var(--c-muted); padding:5px 10px; border-radius:8px; cursor:pointer; font:inherit; font-size:12px; }
.thread-actions button[aria-pressed="true"] { color:var(--c-blue-deep); background:#e6f5ff; border-color:#93d8fa; }
.thread-replies { margin-left:28px; padding-left:12px; border-left:2px solid var(--c-line); }
.thread-replies:empty { display:none; }
.thread-expand { margin:8px 0 0 28px; }
.thread-target { color:var(--c-muted); font-size:12px; margin-top:5px; }
.thread-form { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.thread-form[hidden] { display:none; }
.thread-form [data-thread-target] { flex-basis:100%; font-size:13px; color:var(--c-muted); }
.thread-form textarea { width:100%; min-height:70px; resize:vertical; padding:10px; border:1px solid var(--c-line); border-radius:10px; background:#fff; color:var(--c-ink); font:inherit; box-sizing:border-box; }
.thread-form button[type="submit"] { border:0; border-radius:8px; padding:8px 18px; background:var(--c-blue-deep); color:white; cursor:pointer; }
.thread-item button:disabled,.thread-form button:disabled { opacity:.5; cursor:wait; }

/* Public community directory */
.index-page { padding-top:110px; min-height:70vh; }
.index-page .container { max-width:1100px; }
.index-heading { margin-bottom:24px; }
.index-heading h1 { margin:6px 0 12px; color:var(--c-ink); }
.index-heading p { color:var(--c-muted); }
.index-heading a,.index-card a { color:var(--c-blue-deep); text-decoration:none; }
.index-entry,.index-tabs { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.index-entry a,.index-tabs a { padding:9px 16px; border:1px solid var(--c-line); border-radius:10px; background:white; color:var(--c-blue-deep); text-decoration:none; }
.index-tabs a[aria-current="page"] { background:var(--c-blue-deep); color:white; border-color:var(--c-blue-deep); }
#index-search { background:#fff; border:1px solid var(--c-line); padding:20px; border-radius:16px; }
#index-search [hidden] { display:none; }
.index-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.index-card { padding:22px; background:white; border:1px solid var(--c-line); border-radius:16px; min-width:0; }
.index-card-head { display:flex; gap:12px; align-items:center; }
.index-card h2 { font-size:17px; margin:4px 0; overflow-wrap:anywhere; }
.index-card p { color:var(--c-text); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.index-card .index-meta { font-size:13px; color:var(--c-muted); margin:10px 0; }
.index-card-footer { display:flex; flex-wrap:wrap; gap:16px; margin-top:16px; font-size:14px; }
.index-pagination { display:flex; justify-content:center; align-items:center; gap:16px; margin:25px 0; }
.index-pagination button:disabled { opacity:.45; cursor:default; }
#index-status { margin:20px 0; color:var(--c-muted); }
@media(max-width:650px) { .index-results { grid-template-columns:1fr; } .index-page { padding-top:95px; } .index-card { padding:17px; } }

/* Forum-style direct-parent quotations */
.thread-quote { margin:12px 0; padding:12px 14px; border:1px solid #d8e6f2; border-left:3px solid var(--c-blue); border-radius:8px; background:#edf4fa; color:var(--c-text); font-size:13px; }
.thread-quote-heading { color:var(--c-blue-deep); font-weight:600; margin-bottom:6px; overflow-wrap:anywhere; }
.thread-item .thread-quote p,.thread-form .thread-quote p { margin:6px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.thread-quote summary { cursor:pointer; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.thread-quote .quote-expand,.thread-quote .quote-collapse { color:var(--c-blue-deep); }
.thread-quote .quote-collapse,.thread-quote details[open] .quote-expand,.thread-quote details[open] .quote-excerpt { display:none; }
.thread-quote details[open] .quote-collapse { display:inline; }
.thread-quote button { border:0; padding:4px 0; background:transparent; color:var(--c-blue-deep); cursor:pointer; font:inherit; }
.thread-item:focus { outline:2px solid var(--c-blue); outline-offset:4px; border-radius:8px; scroll-margin-top:90px; }
.thread-form .thread-quote { margin:0 0 8px; }