/* Theme A: clear diary style */
:root {
    --theme-bg: #f7fbff;
    --theme-bg-soft: #eef7fc;
    --theme-card: rgba(255, 255, 255, 0.9);
    --theme-text: #263238;
    --theme-muted: #7a8a99;
    --theme-line: #e7eef5;
    --theme-pink: #e96ecf;
    --theme-blue: #7ec8e3;
    --theme-shadow: 0 18px 46px rgba(85, 119, 145, 0.12);
    --theme-radius: 18px;
}

html {
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    color: var(--theme-text);
    background:
        linear-gradient(180deg, rgba(247, 251, 255, 0.95), rgba(252, 254, 255, 0.98)),
        radial-gradient(circle at top left, rgba(233, 110, 207, 0.10), transparent 34%),
        var(--theme-bg) !important;
    background-attachment: fixed;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    max-width: 100%;
    overflow-x: hidden;
}

a {
    color: inherit;
}

.navbar {
    position: sticky;
    top: 0;
    height: auto;
    min-height: 72px;
    background: rgba(255, 255, 255, 0.78) !important;
    border-bottom: 1px solid rgba(231, 238, 245, 0.9);
    box-shadow: none !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.nav-container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    height: auto;
    min-height: 72px;
    padding: 0;
    gap: 28px;
}

.nav-logo a {
    color: var(--theme-text) !important;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.nav-logo a > span {
    color: var(--theme-text) !important;
    font-size: 18px;
    font-weight: 800;
}

.nav-logo a > img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(233, 110, 207, 0.32);
    background: #fff;
}

.nav-menu {
    gap: 8px;
    align-items: center;
    padding: 6px;
    border: 1px solid var(--theme-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
}

.nav-menu li,
.nav-menu li:hover {
    border-radius: 999px;
    background: transparent !important;
}

.nav-menu a {
    padding: 8px 15px;
    border-radius: 999px;
    color: var(--theme-muted) !important;
    font-size: 14px;
    line-height: 1.2;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
    color: var(--theme-pink) !important;
    background: rgba(233, 110, 207, 0.08) !important;
    text-decoration: none;
}

.nav-menu a[aria-current="page"] {
    color: #fff !important;
    background: var(--theme-pink) !important;
    box-shadow: 0 8px 18px rgba(233, 110, 207, 0.25);
}

.user-avatar > img {
    width: 42px;
    height: 42px;
    border: 2px solid #fff;
    box-shadow: 0 6px 20px rgba(126, 200, 227, 0.35);
}

.user-dropdown {
    border: 1px solid var(--theme-line);
    border-radius: 14px;
    box-shadow: var(--theme-shadow);
}

.user-name {
    background: #fbfdff;
    color: var(--theme-text);
    border-bottom: 1px solid var(--theme-line);
}

.user-dropdown a:hover,
.user-dropdown a:focus-visible {
    color: var(--theme-pink);
    background: rgba(233, 110, 207, 0.08);
}

.home-hero {
    width: min(1180px, calc(100% - 48px));
    margin: 34px auto 22px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
    gap: 22px;
}

.home-intro,
.home-note {
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    min-width: 0;
}

.home-intro {
    padding: 28px;
    border: 1px solid var(--theme-line);
    background: var(--theme-card);
}

.home-kicker,
.cat-badge,
.comment-count-badge,
.badge,
.blog-tag {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border-radius: 999px;
}

.home-kicker {
    padding: 6px 12px;
    color: var(--theme-pink);
    background: rgba(233, 110, 207, 0.08);
    font-size: 13px;
    font-weight: 700;
}

.home-intro h1 {
    max-width: 680px;
    margin: 18px 0 12px;
    font-size: 42px;
    line-height: 1.18;
    letter-spacing: 0;
}

.home-intro p {
    max-width: 64ch;
    margin: 0;
    color: var(--theme-muted);
    font-size: 16px;
    line-height: 1.9;
}

.home-note {
    min-height: 210px;
    padding: 24px;
    color: #fff;
    background: linear-gradient(145deg, #e96ecf, #7ec8e3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home-note strong {
    font-size: 26px;
    line-height: 1.35;
}

.home-note span,
.home-note p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.8;
}

.container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto 54px;
    padding-top: 0 !important;
    gap: 22px;
}

.middle,
.article_list,
.article_item,
.detail-card,
.comment-section,
.profile-main,
.publish-main,
.card,
.publish-card,
.editor-main {
    min-width: 0;
}

.detail-main,
.profile-main,
.publish-main {
    width: min(1100px, calc(100% - 48px)) !important;
    max-width: 1100px;
    margin-top: 34px !important;
}

.detail-card,
.comment-section,
.card,
.side-card,
.article_item,
.publish-card {
    background: var(--theme-card) !important;
    border: 1px solid var(--theme-line) !important;
    border-radius: var(--theme-radius) !important;
    box-shadow: 0 14px 34px rgba(85, 119, 145, 0.09) !important;
}

.side-card {
    padding: 18px;
}

.article_list {
    gap: 16px;
}

.article_item {
    padding: 22px !important;
    margin-bottom: 0 !important;
    transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}

.article_item::after {
    display: none !important;
}

.article_item:hover,
.blog-item:hover {
    transform: translateY(-3px);
    border-color: rgba(233, 110, 207, 0.42) !important;
    box-shadow: var(--theme-shadow) !important;
}

.article_item h5 a,
.blog-title a {
    color: var(--theme-text);
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-weight: 800;
}

.article_item h5 a {
    font-size: 22px;
    line-height: 1.35;
}

.article_desc {
    color: var(--theme-muted);
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.small,
.detail-meta,
.blog-meta,
.signature,
.side-desc,
.side-text,
.editor-hint,
.editor-count {
    color: var(--theme-muted) !important;
}

.side-title,
.filter-label,
.card-title::after,
.meta-author,
.blog-more,
.c-user,
.reply-target,
.stat-num {
    color: var(--theme-pink) !important;
}

.side-title,
.card-title,
.comment-header,
.detail-meta,
.detail-tags {
    border-color: var(--theme-line) !important;
}

.side-btn,
.btn-primary,
.btn-comment,
.tag-edit-actions #tag_save_btn,
.btn-up.up-active {
    color: #fff !important;
    background: var(--theme-pink) !important;
    border-color: var(--theme-pink) !important;
    box-shadow: 0 10px 22px rgba(233, 110, 207, 0.22) !important;
}

.btn-ghost,
.btn-up,
.pagination a,
.tag-edit-btn {
    color: var(--theme-pink) !important;
    background: rgba(233, 110, 207, 0.08) !important;
    border: 1px solid rgba(233, 110, 207, 0.22) !important;
}

.btn,
.side-btn,
.btn-up,
.btn-comment,
.pagination a,
.tag,
.cloud-tag,
.side-list a {
    transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.btn:hover,
.side-btn:hover,
.btn-up:hover,
.btn-comment:hover,
.pagination a:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.side-list li {
    border-bottom-color: var(--theme-line);
}

.side-list a,
.cloud-tag,
.tag,
.detail-tag,
.blog-tag,
.c-to,
.page-info {
    color: #4b91a9 !important;
    background: var(--theme-bg-soft) !important;
    border: 1px solid rgba(126, 200, 227, 0.26);
    border-radius: 999px;
}

.side-list a.side-active,
.cloud-tag.cloud-active,
.tag:hover,
.detail-tag:hover {
    color: #fff !important;
    background: var(--theme-pink) !important;
    border-color: var(--theme-pink);
}

.filter-bar,
.blog-empty,
.article-empty,
.comment-box,
.comment-textarea,
#tag_input {
    background: #fbfdff !important;
    border-color: var(--theme-line) !important;
}

.article-avatar img,
.meta-avatar,
.editor-avatar,
.comment-avatar,
.avatar,
.side-avatar {
    border-color: rgba(233, 110, 207, 0.35) !important;
}

.detail-card,
.comment-section,
.publish-card {
    padding: 34px !important;
}

.detail-title,
.publish-title,
.nickname {
    color: var(--theme-text) !important;
    letter-spacing: 0;
}

.detail-title {
    font-size: 34px;
    line-height: 1.3;
}

.detail-content {
    color: #40545d;
    line-height: 2;
    overflow-wrap: anywhere;
}

.small,
.detail-meta,
.comment-top,
.blog-summary,
.info-val,
.signature {
    overflow-wrap: anywhere;
}

.comment-textarea,
#tag_input,
.form-row input[type="text"],
.form-row select {
    border: 1px solid #ddeaf2 !important;
    border-radius: 14px !important;
    background: #fff !important;
}

.pagination {
    border-top-color: var(--theme-line) !important;
}

.page-info {
    padding: 8px 14px;
}

footer {
    background: #fff !important;
    border-top: 1px solid var(--theme-line);
    color: var(--theme-muted) !important;
    letter-spacing: 0 !important;
}

.bubbles {
    opacity: 0.45;
}

/* Auth pages —— 粉蓝海洋晨光，与首页同源 */
.auth-page {
    justify-content: center;
    align-items: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

/* 背景：与首页一致的 pastel 光晕，浓度更高 */
.auth-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(900px 480px at 82% -6%, rgba(126, 200, 227, 0.38), transparent 62%),
        radial-gradient(760px 440px at -6% 24%, rgba(233, 110, 207, 0.22), transparent 58%),
        radial-gradient(640px 420px at 58% 108%, rgba(126, 200, 227, 0.28), transparent 62%),
        radial-gradient(420px 300px at 92% 88%, rgba(233, 110, 207, 0.14), transparent 60%),
        linear-gradient(180deg, #eaf5fc 0%, #f8fbff 48%, #f2f7fc 100%);
    pointer-events: none;
}

/* 缓缓上升的小气泡 */
.auth-bubble {
    position: fixed;
    bottom: -40px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1), rgba(126,200,227,0.5));
    box-shadow: inset 0 0 8px rgba(255,255,255,0.9), 0 0 6px rgba(126,200,227,0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: auth-bubble-rise linear infinite;
}

@keyframes auth-bubble-rise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    8%   { opacity: 0.75; }
    50%  { transform: translateY(-55vh) translateX(14px); }
    95%  { opacity: 0.5; }
    100% { transform: translateY(-108vh) translateX(-10px); opacity: 0; }
}

/* 漂浮小鱼 */
.auth-fish {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    animation: auth-fish-swim ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(75, 145, 169, 0.4));
}

@keyframes auth-fish-swim {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-16px) rotate(3deg); }
}

/* 卡片 */
.auth-page .container {
    position: relative;
    z-index: 1;
    width: min(430px, 100%);
    margin: 0;
    padding-top: 0 !important;
}

/* 注册页卡片稍高，给底部多留点呼吸空间 */
.auth-page .container > .row > div {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--theme-radius);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 18px 50px rgba(85, 119, 145, 0.16);
    animation: auth-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    padding-bottom: 44px;
}

@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(22px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 品牌 logo 融进标题区 */
.auth-page .login-header {
    margin-bottom: 26px;
}

.auth-page .login-header::before {
    content: "";
    display: block;
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    border-radius: 24px;
    background: url(/static/imgs/小鱼图标.png) center/cover no-repeat;
    box-shadow: 0 8px 22px rgba(126, 200, 227, 0.45);
    animation: auth-fish-swim 4.5s ease-in-out infinite;
}

.auth-page .login-title {
    color: var(--theme-text);
    letter-spacing: 0;
    background: linear-gradient(90deg, #e96ecf, #8f7ae8, #4b91a9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 标题下的小波浪 */
.auth-page .login-title::after {
    content: "～ ～ ～";
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 10px;
    color: #3d9bc4;
    -webkit-text-fill-color: #3d9bc4;
}

.auth-page .login-subtitle,
.auth-page form label {
    color: var(--theme-muted);
}

.auth-page form input[type="text"],
.auth-page form input[type="password"],
.auth-page #captcha-img {
    border-color: #ddeaf2;
    border-radius: 14px;
}

.auth-page form input[type="text"]:focus,
.auth-page form input[type="password"]:focus {
    border-color: var(--theme-pink);
    box-shadow: 0 0 0 4px rgba(233, 110, 207, 0.12);
}

/* 主按钮：首页同款 粉→紫→蓝 流光渐变 */
.auth-page .login_btn,
.auth-page .send-code-btn {
    border-radius: 999px;
    background: linear-gradient(135deg, #e96ecf 0%, #b77ae8 55%, #7ec8e3 100%);
    background-size: 170% 170%;
    box-shadow: 0 8px 22px rgba(233, 110, 207, 0.28);
    transition: background-position 0.35s, transform 0.2s, box-shadow 0.25s;
}

.auth-page .login_btn:hover,
.auth-page .send-code-btn:hover {
    background-position: 100% 100%;
    box-shadow: 0 12px 28px rgba(126, 200, 227, 0.42);
}

.auth-page .send-code-btn:disabled {
    background: #c3cfda;
    box-shadow: none;
}

/* 次按钮：粉色描边 */
.auth-page .registr-btn,
.auth-page .back-link,
.auth-page form .row a {
    color: var(--theme-pink);
}

.auth-page .registr-btn {
    border-color: rgba(233, 110, 207, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
}

.auth-page .registr-btn:hover {
    background: linear-gradient(135deg, #e96ecf, #b77ae8);
    border-color: transparent;
    color: #fff;
}

/* 验证码图：圆角柔和化 */
.auth-page #captcha-img {
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(85, 119, 145, 0.1);
}

/* 页脚小字：登录页卡片不高，用 fixed 贴底；注册页卡片超出视口，改为跟随滚动 */
.auth-footer {
    text-align: center;
    font-size: 12px;
    color: #4b91a9;
    letter-spacing: 2px;
    z-index: 1;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
}

.login-page .auth-footer {
    position: fixed;
    bottom: 16px;
    left: 0;
    right: 0;
}

.register-page {
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 40px;
}

/* 注册页：卡片高，页脚跟随卡片下方 */
.register-page .auth-footer {
    position: relative;
    margin: 28px auto 0;
    width: max-content;
}

/* 矮页面：内容垂直居中，footer 贴底 */
.simple-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.simple-page .page-main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 40px 0;
}

/* 网址页 —— 精致卡片式导航 */
.website-page .content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: min(900px, calc(100% - 48px)) !important;
    margin: 30px auto 54px !important;
    padding: 0 !important;
}

/* 标题区：去掉旧的 aquamarine 条 */
.website-page .daohangtiao {
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    text-align: center;
    padding: 10px 0 4px;
}

.website-page .daohangtiao h1 {
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif !important;
    font-size: 26px;
    font-weight: 800;
    color: var(--theme-text);
    letter-spacing: 1px;
    margin: 0;
}

.website-page .daohangtiao p {
    margin: 10px auto 0;
    font-size: 14px;
    color: var(--theme-muted);
    letter-spacing: 0.5px;
}

/* 搜索框：居中胶囊，柔和 */
.website-page .search {
    width: min(420px, 100%) !important;
    height: auto !important;
    margin: 0 auto !important;
}

.website-page .search input {
    width: 100% !important;
    height: 46px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: var(--theme-text) !important;
    border: 1.5px solid #ddeaf2 !important;
    border-radius: 999px !important;
    padding: 0 20px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 2px 10px rgba(85, 119, 145, 0.06);
    outline: none !important;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.website-page .search input:focus {
    border-color: var(--theme-pink) !important;
    box-shadow: 0 0 0 4px rgba(233, 110, 207, 0.12);
}

/* 分组 */
.website-page .site-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.website-page .group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: #b8669f;
    letter-spacing: 1px;
    padding-left: 4px;
}

.website-page .group-ico {
    font-size: 18px;
    filter: drop-shadow(0 2px 4px rgba(233, 110, 207, 0.2));
}

/* 链接网格：卡片式 */
.website-page .wangye {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 12px !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    padding: 16px !important;
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid rgba(126, 200, 227, 0.28) !important;
    border-radius: 20px !important;
    box-shadow: 0 6px 20px rgba(85, 119, 145, 0.06);
}

/* 单个链接卡片：图标 + 文字 横排紧凑 */
.website-page .wangye a {
    float: none !important;
    width: auto !important;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 62px;
    padding: 8px 12px;
    border: 1px solid rgba(126, 200, 227, 0.28) !important;
    border-radius: 14px !important;
    background: #fff !important;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif !important;
    color: #4b91a9 !important;
    box-shadow: 0 2px 8px rgba(85, 119, 145, 0.07);
    transition: transform 0.2s, box-shadow 0.25s, border-color 0.2s;
    cursor: pointer;
}

.website-page .wangye a:hover {
    transform: translateY(-3px);
    border-color: rgba(233, 110, 207, 0.5) !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(85, 119, 145, 0.16);
    text-decoration: none;
}

.website-page .site-ico {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.website-page .site-name {
    font-size: 13px;
    font-weight: 600;
    color: #3f7f9a;
    line-height: 1;
    white-space: nowrap;
}

/* 空提示 */
.website-page .search-tip {
    text-align: center;
    color: var(--theme-muted);
    font-size: 14px;
    padding: 16px 0 4px;
}

/* 移动端 */
@media (max-width: 520px) {
    .website-page .content {
        width: calc(100% - 28px) !important;
    }
    .website-page .wangye {
        grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important;
        gap: 10px !important;
        padding: 12px !important;
    }
    .website-page .wangye a {
        flex-direction: column;
        gap: 6px;
        min-height: 84px;
        padding: 10px 6px;
        justify-content: center;
    }
    .website-page .site-ico {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }
    .website-page .site-name {
        font-size: 12px;
    }
}
.theme-page .content,
.book-container,
.tool-container,
.edit-main {
    width: min(980px, calc(100% - 48px));
    max-width: 980px;
    margin: 34px auto 54px !important;
    padding: 0 !important;
}

.book-card,
.tool-card,
.ncst-card,
.edit-card {
    background: var(--theme-card) !important;
    border: 1px solid var(--theme-line) !important;
    border-radius: var(--theme-radius) !important;
    box-shadow: 0 14px 34px rgba(85, 119, 145, 0.09) !important;
}

.book-card h1,
.book-title,
.tool-title,
.ncst-header h2,
.edit-title {
    color: var(--theme-text) !important;
    letter-spacing: 0;
}

.website-page .search input,
.ncst-cookie-box textarea,
.ncst-filter select,
.edit-card input[type="text"],
.edit-card input[type="file"] {
    width: 100%;
    border: 1px solid #ddeaf2 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--theme-text);
}

.book-card,
.tool-card {
    padding: 44px 32px !important;
    border-style: solid !important;
}

.book-emoji,
.tool-emoji {
    filter: drop-shadow(0 10px 18px rgba(233, 110, 207, 0.18));
}

.book-desc,
.tool-desc,
.ncst-header p,
.ncst-status,
.ncst-steps,
.search-tip {
    color: var(--theme-muted) !important;
}

.ncst-card {
    padding: 30px !important;
}

.ncst-header {
    border-bottom: 1px solid var(--theme-line);
    margin-bottom: 20px;
    padding-bottom: 16px;
}

.ncst-steps,
.ncst-result,
.ncst-term,
.ncst-stats,
.ncst-cookie-box {
    background: #fbfdff !important;
    border-color: var(--theme-line) !important;
    border-radius: 16px !important;
}

.btn-ncst,
.btn-ncst-ghost,
.avatar-upload-btn {
    border-radius: 999px !important;
    color: #fff !important;
    background: var(--theme-pink) !important;
    border-color: var(--theme-pink) !important;
    box-shadow: 0 10px 22px rgba(233, 110, 207, 0.18);
}

.btn-ncst-ghost {
    color: var(--theme-pink) !important;
    background: rgba(233, 110, 207, 0.08) !important;
    border: 1px solid rgba(233, 110, 207, 0.22) !important;
    box-shadow: none;
}

.edit-card {
    padding: 34px !important;
}

.edit-errors {
    border-radius: 14px !important;
}

.not-found-page .brand span,
.not-found-page .desc em {
    color: var(--theme-pink) !important;
}

.not-found-page .code-4 {
    background: linear-gradient(135deg, var(--theme-pink), var(--theme-blue));
    -webkit-background-clip: text;
    background-clip: text;
}

.not-found-page .btn-primary {
    background: var(--theme-pink) !important;
}

.not-found-page .btn-ghost {
    color: #4b91a9 !important;
    border-color: rgba(126, 200, 227, 0.3) !important;
    background: var(--theme-bg-soft) !important;
}

@media (max-width: 940px) {
    .nav-container {
        width: calc(100% - 32px);
        flex-wrap: wrap;
        padding: 14px 0;
        gap: 12px;
    }

    .nav-menu {
        order: 3;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        min-width: 0;
        gap: 6px;
        overflow-x: visible;
        justify-content: space-between;
        scrollbar-width: none;
    }

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

    .nav-menu a {
        padding: 8px 10px;
        font-size: 13px;
    }

    .home-hero,
    .container,
    .detail-main,
    .profile-main,
    .publish-main {
        width: calc(100% - 32px) !important;
    }

    .home-hero {
        grid-template-columns: 1fr;
        margin-top: 22px;
    }

    .home-intro h1 {
        font-size: 28px;
        line-height: 1.24;
        overflow-wrap: anywhere;
    }

    .home-note {
        min-height: 190px;
    }

    .container {
        flex-direction: column;
    }

    .side,
    .middle {
        width: 100% !important;
        padding: 0 !important;
    }

    .left,
    .right {
        display: flex !important;
    }

    .detail-card,
    .comment-section,
    .publish-card,
    .card {
        padding: 22px !important;
    }

    .detail-title {
        font-size: 26px;
        overflow-wrap: anywhere;
    }

    .comment-editor {
        align-items: flex-start;
    }

    .profile-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .profile-actions .btn {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        padding: 9px 12px;
        white-space: nowrap;
    }

    .profile-actions .btn:first-child {
        grid-column: 1 / -1;
    }

    .theme-page .content,
    .book-container,
    .tool-container,
    .edit-main {
        width: calc(100% - 32px) !important;
    }

    .website-page .wangye {
        grid-template-columns: 1fr 1fr;
    }

    .ncst-card,
    .edit-card {
        padding: 22px !important;
    }
}

@media (max-width: 520px) {
    .auth-page {
        padding: 16px;
    }
}

/* ============================================================
   视觉层次增强（2026-08-06 追加：解决页面过于单调）
   在保留原有「清透日记风」结构的基础上，增强色彩层次、
   卡片质感与交互反馈。
   ============================================================ */

/* 1. 背景：柔和的多层海洋光晕，替代单一浅色 */
body {
    background:
        radial-gradient(1100px 460px at 88% -8%, rgba(126, 200, 227, 0.22), transparent 60%),
        radial-gradient(900px 420px at -8% 28%, rgba(233, 110, 207, 0.12), transparent 55%),
        radial-gradient(700px 380px at 55% 110%, rgba(126, 200, 227, 0.14), transparent 60%),
        linear-gradient(180deg, #eef7fd 0%, #fbfdff 45%, #f5f9fc 100%) !important;
}

/* 2. hero 区：渐变底 + 装饰光斑，告别素白 */
.home-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(126, 200, 227, 0.18), rgba(233, 110, 207, 0.10)),
        rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(126, 200, 227, 0.30) !important;
    box-shadow: 0 10px 40px rgba(85, 119, 145, 0.10);
}
.home-hero::before {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 110, 207, 0.16), transparent 70%);
    pointer-events: none;
}
.home-hero::after {
    content: "";
    position: absolute;
    left: -50px;
    bottom: -80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(126, 200, 227, 0.22), transparent 70%);
    pointer-events: none;
}
.home-intro,
.home-note {
    position: relative;
    z-index: 1;
}
.home-kicker {
    background: linear-gradient(90deg, #e96ecf, #7ec8e3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: 800;
    letter-spacing: 0.14em;
}

/* 3. 文章卡片：白卡片 + 左侧渐变强调条 + 悬浮上浮 */
.article_item {
    background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
    border: 1px solid var(--theme-line) !important;
    border-radius: 16px !important;
    padding: 20px 22px 18px !important;
    box-shadow: 0 4px 14px rgba(85, 119, 145, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    overflow: hidden;
}
.article_item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #e96ecf, #7ec8e3);
    opacity: 0.9;
}
.article_item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(85, 119, 145, 0.18);
    border-color: rgba(126, 200, 227, 0.55) !important;
}
.article_item h5 a {
    font-size: 17px;
    transition: color 0.2s;
}
.article_item h5 a:hover {
    color: var(--theme-pink) !important;
}

/* 4. 文章元信息：彩色小徽章，增加点缀 */
.article_item .small {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 6px;
}
.article_item .small .icon-wrap {
    background: rgba(126, 200, 227, 0.14);
    color: #3f7f9a;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 5. 侧边栏：标题左侧渐变条 + 列表微动效 */
.side-title {
    position: relative;
    padding-left: 14px;
}
.side-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #e96ecf, #7ec8e3);
}
.side-list a {
    transition: transform 0.2s, background 0.2s, color 0.2s;
}
.side-list a:hover {
    transform: translateX(3px);
}
.cloud-tag {
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.cloud-tag:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(126, 200, 227, 0.35);
}

/* 6. 按钮：渐变流光 + 光晕 */
.side-btn,
.btn-primary,
.btn-comment,
.tag-edit-actions #tag_save_btn,
.btn-up.up-active {
    background: linear-gradient(135deg, #e96ecf 0%, #b77ae8 55%, #7ec8e3 100%) !important;
    background-size: 170% 170% !important;
    box-shadow: 0 6px 18px rgba(233, 110, 207, 0.28) !important;
    transition: background-position 0.35s, transform 0.2s, box-shadow 0.25s !important;
}
.side-btn:hover,
.btn-primary:hover,
.btn-comment:hover {
    background-position: 100% 100% !important;
    box-shadow: 0 10px 26px rgba(126, 200, 227, 0.4) !important;
}

/* 7. 分页：渐变胶囊，当前页高亮 */
.pagination a {
    background: linear-gradient(135deg, #e96ecf, #7ec8e3) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(233, 110, 207, 0.25);
}
.pagination a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(126, 200, 227, 0.4);
}

/* 8. 页脚：深海渐变 + 顶部彩条（正式感收尾） */
footer {
    margin-top: 44px;
    background: linear-gradient(90deg, #16324f 0%, #245a78 50%, #16324f 100%) !important;
    color: #dbeaf5 !important;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #e96ecf, #7ec8e3, #e96ecf) 1;
    letter-spacing: 2px;
    font-size: 13px;
}

/* 9. 筛选条：轻微彩色化 */
.filter-bar {
    border: 1px solid rgba(126, 200, 227, 0.25) !important;
    background: rgba(255, 255, 255, 0.88) !important;
}
.filter-label,
.filter-bar b {
    color: #3f7f9a !important;
}

/* 10. 空状态：可爱但不简陋 */
.article-empty {
    background: linear-gradient(135deg, rgba(126, 200, 227, 0.10), rgba(233, 110, 207, 0.08)) !important;
    border: 2px dashed rgba(126, 200, 227, 0.4) !important;
    color: #5a7a8a !important;
}

/* 11. 文章卡片：分类徽章 + 日期行（解决卡片雷同、增加视觉锚点） */
.article-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.cat-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(233, 110, 207, 0.14), rgba(126, 200, 227, 0.18));
    color: #b0489e;
    border: 1px solid rgba(233, 110, 207, 0.25);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    letter-spacing: 0.05em;
}
.post-date {
    font-size: 12px;
    color: #8aa0b2;
    letter-spacing: 0.04em;
}

/* 12. 对比度提升：次级文字加深一档，正文更清晰 */
:root {
    --theme-muted: #64748b;
}

/* 13. 文章描述区：加一点视觉重量 */
.article_desc {
    font-size: 13.5px;
    line-height: 1.8;
    color: #52606d;
}

/* 14. 分页页码：当前页描边高亮 */
.page-info {
    padding: 5px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(126, 200, 227, 0.35) !important;
}