@charset "utf-8";
/*!
 * 模板资讯主题 — app.css
 * 色系取自同目录 demo.html：暗紫底 + 藕粉 + 香槟金
 * 本文件为该主题唯一的样式来源，模板中不得出现内联 style。
 */

/* ---------------------------------------------------------------
 * 1. 设计变量
 * ------------------------------------------------------------- */
:root {
    --bg: #0b0a10;
    --panel: #14121c;
    --panel2: #1b1724;
    --panel3: #15131b;
    --text: #f6edf4;
    --muted: #a79aaa;
    --pink: #e8a1c8;
    --pink-soft: #d9abc7;
    --gold: #d9b477;
    --line: #2c2634;
    --line-strong: #60445b;
    --grad: linear-gradient(90deg, #b96898, #d3a17a);
    --radius: 14px;
    --radius-sm: 10px;
    --wrap: 1240px;
    --shadow: 0 12px 32px rgba(0, 0, 0, .38);
    --header-h: 72px;
}

/* ---------------------------------------------------------------
 * 2. 基础
 * ------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    background-color: var(--bg);
    background-image: radial-gradient(circle at 80% 0, #25182a 0, #0b0a10 38%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text);
    font: 14px/1.6 Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

a:hover {
    color: var(--pink);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text);
    font-weight: 700;
}

img {
    max-width: 100%;
    height: auto;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 18px 0;
}

::selection {
    background: var(--pink);
    color: #1a1016;
}

/* 滚动条（Webkit） */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #33293c;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--line-strong);
}

/* ---------------------------------------------------------------
 * 3. 布局
 * ------------------------------------------------------------- */
.tm-wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 22px;
}

#body {
    display: block;
    min-height: 40vh;
    padding-bottom: 10px;
}

.tm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
    padding-top: 26px;
}

.tm-layout--single {
    grid-template-columns: minmax(0, 1fr);
}

.tm-main {
    min-width: 0;
}

.tm-aside {
    min-width: 0;
}

/* ---------------------------------------------------------------
 * 4. 页头 / 导航
 * ------------------------------------------------------------- */
.tm-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(11, 10, 16, .88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.tm-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    height: var(--header-h);
}

.tm-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

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

.tm-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 18px;
    line-height: 1;
}

.tm-brand-text {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-navlinks {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.tm-navlink {
    position: relative;
    color: var(--muted);
    white-space: nowrap;
    padding: 4px 0;
}

.tm-navlink:hover,
.tm-navlink.active {
    color: var(--pink);
}

.tm-navlink.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad);
}

.tm-nav-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.tm-search {
    display: flex;
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
}

.tm-search input[name="keyword"] {
    width: 130px;
    padding: 7px 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 13px;
}

.tm-search input[name="keyword"]::placeholder {
    color: #7d7280;
}

.tm-search button {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 7px 12px;
    cursor: pointer;
}

.tm-search button:hover {
    color: var(--pink);
}

.tm-menu-toggle {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel);
    color: var(--text);
    font-size: 16px;
    cursor: pointer;
}

/* 移动端展开的导航 */
.tm-nav-mobile {
    display: none;
    border-top: 1px solid var(--line);
    background: var(--panel);
    padding: 8px 22px 16px;
}

.tm-nav-mobile.open {
    display: block;
}

.tm-nav-mobile a {
    display: block;
    padding: 9px 0;
    color: var(--muted);
    border-bottom: 1px dashed var(--line);
}

.tm-nav-mobile a:last-child {
    border-bottom: 0;
}

/* ---------------------------------------------------------------
 * 5. 按钮
 * ------------------------------------------------------------- */
.tm-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: .2s;
}

.tm-btn:hover,
.btn:hover {
    border-color: var(--line-strong);
    color: var(--pink);
}

.tm-btn--primary,
.btn-primary {
    background: var(--grad);
    border: 0;
    color: #fff;
}

.tm-btn--primary:hover,
.btn-primary:hover {
    color: #fff;
    filter: brightness(1.08);
}

.btn-secondary {
    background: var(--panel2);
    border-color: var(--line);
    color: var(--text);
}

.btn-secondary:hover {
    background: #241d2c;
    color: var(--pink);
}

.btn:disabled,
.btn.disabled,
.tm-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tm-btn--ghost {
    background: transparent;
}

.tm-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* ---------------------------------------------------------------
 * 6. Hero / 区块
 * ------------------------------------------------------------- */
.tm-hero {
    padding: 52px 0 30px;
}

.tm-hero h1 {
    font-size: 40px;
    line-height: 1.15;
    margin: 0 0 12px;
}

.tm-hero h1 em {
    font-style: normal;
    color: var(--pink);
}

.tm-hero p {
    color: var(--muted);
    max-width: 720px;
    margin: 0;
}

.tm-section {
    padding: 18px 0 34px;
}

.tm-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}

.tm-section-head h2 {
    margin: 0;
    font-size: 22px;
}

.tm-section-head small {
    color: var(--muted);
}

.tm-panel {
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
}

.tm-panel+.tm-panel {
    margin-top: 16px;
}

.tm-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.tm-panel-head h3 {
    margin: 0;
    font-size: 16px;
}

.tm-panel-head small {
    color: var(--muted);
}

.tm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.tm-card {
    display: block;
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    transition: .2s;
}

.tm-card:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
}

.tm-thumb {
    height: 125px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #241827, #3a2034 55%, #17131f);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dca8c9;
    font-size: 32px;
    margin-bottom: 13px;
    overflow: hidden;
}

.tm-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-card h3 {
    margin: 0 0 5px;
    font-size: 16px;
}

.tm-meta {
    color: var(--muted);
    font-size: 12px;
}

.tm-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 20px;
    background: #2a202d;
    color: var(--pink-soft);
    margin: 8px 5px 0 0;
    font-size: 11px;
}

/* 标签总览 */
.tm-taglist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-taglist-item {
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: .2s;
}

.tm-taglist-item:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
}

.tm-taglist-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    color: var(--text);
}

.tm-taglist-count {
    color: var(--muted);
    font-size: 12px;
}

.tm-notice {
    padding: 12px 14px;
    background: var(--panel3);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--muted);
    margin-top: 20px;
}

.tm-empty {
    padding: 34px 10px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------
 * 6.1 会员中心（我的首页 / 我的设置 / 站长中心 / 用户主页）
 * ------------------------------------------------------------- */
.tm-member {
    padding: 24px 0 4px;
}

.tm-member-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    background: linear-gradient(135deg, #241827, #1b1724 55%, #14121c);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.tm-member-avatar {
    flex: 0 0 auto;
    line-height: 0;
}

.tm-member-avatar img {
    border: 2px solid var(--line-strong);
    border-radius: 50%;
}

.tm-member-info {
    min-width: 0;
    flex: 1 1 auto;
}

.tm-member-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 20px;
}

.tm-member-brief {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 13px;
}

.tm-member-count {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--muted);
    font-size: 12px;
}

.tm-member-count b {
    color: var(--pink);
    font-size: 15px;
    margin-right: 2px;
}

.tm-member-link {
    color: var(--pink);
}

/* 二级菜单 tabs */
.tm-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    margin-bottom: 16px;
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.tm-tab {
    padding: 6px 14px;
    border-radius: 20px;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.tm-tab:hover {
    color: var(--pink);
    background: #241d2c;
}

.tm-tab.active {
    color: #fff;
    background: var(--grad);
}

/* 会员中心两栏：左侧菜单 + 右侧内容 */
.tm-member-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding-top: 20px;
}

.tm-member-side {
    min-width: 0;
}

.tm-member-side .tm-panel + .tm-panel {
    margin-top: 16px;
}

/* 左侧会员菜单 */
.tm-member-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-member-nav li {
    border-bottom: 1px dashed var(--line);
}

.tm-member-nav li:last-child {
    border-bottom: 0;
}

.tm-member-nav a {
    display: block;
    padding: 10px 12px;
    color: var(--muted);
    border-radius: 8px;
}

.tm-member-nav a:hover {
    color: var(--pink);
    background: #241d2c;
}

.tm-member-nav a.active {
    color: var(--pink);
    background: #241d2c;
    box-shadow: inset 3px 0 0 var(--pink);
}

/* 二级菜单（资料设置 / 我的文章 …）缩进一级，与一级菜单区分 */
.tm-member-nav--sub a {
    padding-left: 24px;
    font-size: 13px;
}

.tm-member-nav--sub a.active {
    color: var(--gold);
    box-shadow: inset 3px 0 0 var(--gold);
}

/* 资料行 */
.tm-infolist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-infolist li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--line);
}

.tm-infolist li:last-child {
    border-bottom: 0;
}

.tm-infolist span {
    color: var(--muted);
    font-size: 13px;
}

.tm-infolist b {
    font-weight: 600;
    word-break: break-all;
    text-align: right;
}

.tm-infolist-email {
    color: var(--gold);
}

/* 绑定列表 */
.tm-bindlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-bindlist li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
}

.tm-bindlist li:last-child {
    border-bottom: 0;
}

.tm-bindlist-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #241d2c;
    border: 1px solid var(--line);
}

.tm-bindlist-icon img {
    max-width: 24px;
    max-height: 24px;
}

.tm-bindlist-body {
    flex: 1 1 auto;
    min-width: 0;
}

.tm-bindlist-action {
    flex: 0 0 auto;
}

/* 头像上传 */
.tm-avatar-box {
    text-align: center;
    padding: 12px 0 4px;
}

.tm-avatar-upload {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 0;
    line-height: 0;
}

.tm-avatar-upload img {
    border: 2px solid var(--line-strong);
    border-radius: 50%;
}

.tm-avatar-plus {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 26px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border: 2px solid var(--panel);
}

.tm-progress {
    max-width: 320px;
    margin: 12px auto 0;
}

/* 批量操作条 */
.tm-batchbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 16px 0;
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.tm-btn--danger {
    border-color: #57333c;
    color: #e79aa9;
}

.tm-btn--danger:hover {
    border-color: #7d4551;
    color: #ffbccb;
}

/* 我的评论 / 用户评论 */
.tm-post-date {
    font-size: 12px;
}

/* 统计 */
.tm-stats {
    display: flex;
    width: 100%;
    text-align: center;
}

.tm-stats>div {
    flex: 1 1 0;
    padding: 8px 4px;
    border-right: 1px solid var(--line);
}

.tm-stats>div:last-child {
    border-right: 0;
}

.tm-stats span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.tm-stats b {
    color: var(--text);
    font-size: 15px;
}

.tm-catlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-catlist li {
    border-bottom: 1px dashed var(--line);
}

.tm-catlist li:last-child {
    border-bottom: 0;
}

.tm-catlist a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    color: var(--muted);
}

.tm-catlist a:hover {
    color: var(--pink);
}

/* ----------------------------------------------------------------
 * 6.2 会员中心美化（资料卡 / 侧栏 / 列表 / 空状态 / 表单）
 *     说明：本节靠「同类选择器靠后覆盖」增强 §6.1，不删改 §6.1 既有规则；
 *     并在不改插件文件的前提下，把插件注入的官方 Bootstrap 片段
 *     （publish 的投稿按钮、follow 的关注 / 粉丝）收进主题视觉。
 * ------------------------------------------------------------- */

/* ---- 资料卡：让插件注入的投稿 CTA 排在卡后 ---- */
.tm-member {
    display: flex;
    flex-direction: column;
    padding: 22px 0 4px;
}

.tm-member-card {
    order: 1;
    position: relative;
    overflow: hidden;
    gap: 20px;
    padding: 22px 24px;
    background:
        radial-gradient(120% 170% at 0% 0%, rgba(232, 161, 200, .16), transparent 58%),
        linear-gradient(135deg, #241827, #1b1724 55%, #14121c);
    box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .9);
}

/* publish 插件的「写文章」CTA：整条渐变条，排在资料卡之后 */
.tm-member > .btn-block {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 12px 18px;
    font-size: 14px;
    letter-spacing: .04em;
    color: #fff;
    background: var(--grad);
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: 0 14px 30px -20px rgba(232, 161, 200, .9);
    transition: transform .18s ease, filter .18s ease;
}

.tm-member > .btn-block::before {
    font-family: FontAwesome;
    content: "\f067";
    font-size: 12px;
    line-height: 1;
}

.tm-member > .btn-block:hover,
.tm-member > .btn-block:focus {
    color: #fff;
    filter: brightness(1.07);
    transform: translateY(-1px);
}

/* ---- 头像：渐变描边环 ---- */
.tm-member-avatar {
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), var(--gold));
    box-shadow: 0 10px 26px -18px rgba(232, 161, 200, .9);
    transition: transform .18s ease;
}

.tm-member-avatar:hover {
    transform: scale(1.03);
}

.tm-member-avatar img {
    display: block;
    width: 72px;
    height: 72px;
    border: 3px solid #14121c;
    border-radius: 50%;
    background: #14121c;
    object-fit: cover;
}

/* ---- 姓名 / 徽章 / 元信息 ---- */
.tm-member-name {
    gap: 10px;
    margin-bottom: 8px;
    font-size: 21px;
    letter-spacing: .01em;
}

.tm-member-name .tm-badge {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--pink-soft);
    background: rgba(232, 161, 200, .1);
    border: 1px solid rgba(232, 161, 200, .3);
    border-radius: 999px;
}

.tm-member-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
}

.tm-member-meta i {
    margin-right: 5px;
    color: var(--gold);
    opacity: .85;
}

.tm-member-brief {
    margin-bottom: 12px;
    line-height: 1.7;
}

/* follow 插件在 common_brief 注入的关注 / 粉丝 → 胶囊 */
.tm-member-brief .wrap-511-9 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.tm-member-brief .wrap-511-9 .btn {
    padding: 3px 11px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--pink-soft);
    background: rgba(232, 161, 200, .08);
    border: 1px solid rgba(232, 161, 200, .26);
    border-radius: 999px;
    transition: background .18s ease, color .18s ease;
}

.tm-member-brief .wrap-511-9 .btn:hover {
    color: #fff;
    background: rgba(232, 161, 200, .2);
}

.tm-member-brief .wrap-511-9 .small {
    font-size: 12px;
    color: var(--text);
}

/* follow 插件注入的关注按钮：会员卡内（brief 行 / 用户名旁）与文章页、评论列表
   用的都是官方 outline 按钮，这里统一收成主题胶囊（.wrap-511-9.follow.btn 是按钮自身带类） */
.wrap-511-9.follow.btn,
.tm-member-card .wrap-511-9 .btn {
    padding: 3px 11px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--pink-soft);
    background: rgba(232, 161, 200, .08);
    border: 1px solid rgba(232, 161, 200, .26);
    border-radius: 999px;
}

.wrap-511-9.follow.btn:hover,
.tm-member-card .wrap-511-9 .btn:hover {
    color: #fff;
    background: rgba(232, 161, 200, .2);
}

/* ---- 统计胶囊 ---- */
.tm-member-count {
    gap: 10px;
    font-size: 12px;
}

.tm-member-count > span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.tm-member-count b {
    margin: 0;
    font-size: 15px;
}

.tm-member-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    color: var(--pink);
    border: 1px solid rgba(232, 161, 200, .28);
    border-radius: 999px;
    transition: background .18s ease, color .18s ease;
}

.tm-member-link::after {
    font-family: FontAwesome;
    content: "\f105";
    font-size: 11px;
}

.tm-member-link:hover {
    color: #fff;
    background: rgba(232, 161, 200, .16);
}

/* ---- 侧栏：吸顶 + 图标 + 渐变高亮 ---- */
@media (min-width: 993px) {
    .tm-member-side {
        position: sticky;
        top: 82px;
    }
}

.tm-member-side .tm-panel-head {
    padding-bottom: 8px;
}

.tm-member-side .tm-panel-head h3 {
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--muted);
}

.tm-member-nav a {
    display: flex;
    align-items: center;
    gap: 9px;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.tm-member-nav a::before {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    font-family: FontAwesome;
    font-size: 13px;
    opacity: .7;
    content: "\f105";
}

.tm-member-nav a:hover::before,
.tm-member-nav a.active::before {
    opacity: 1;
}

.tm-member-nav a.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(232, 161, 200, .22), rgba(232, 161, 200, .02));
    box-shadow: inset 3px 0 0 var(--pink);
}

.tm-member-nav--sub a::before {
    font-size: 12px;
}

.tm-member-nav--sub a.active {
    color: var(--gold);
    background: linear-gradient(90deg, rgba(217, 180, 119, .18), rgba(217, 180, 119, .02));
    box-shadow: inset 3px 0 0 var(--gold);
}

/* 菜单图标按 data-active 映射（未映射的用默认角度箭头） */
.tm-member-nav a[data-active="menu-home"]::before,
.tm-member-nav a[data-active="user-home"]::before { content: "\f015"; }


.tm-member-nav a[data-active="menu-member"]::before,
.tm-member-nav a[data-active="member-home"]::before { content: "\f0e4"; }

.tm-member-nav a[data-active="member-create"]::before { content: "\f040"; }

.tm-member-nav a[data-active="menu-verify"]::before { content: "\f00c"; }

.tm-member-nav a[data-active="my-profile"]::before { content: "\f007"; }

.tm-member-nav a[data-active="my-bind"]::before { content: "\f0c1"; }

.tm-member-nav a[data-active="my-password"]::before,
.tm-member-nav a[data-active="member-password"]::before { content: "\f023"; }

.tm-member-nav a[data-active="my-avatar"]::before { content: "\f03e"; }

.tm-member-nav a[data-active="my-invitation-code"]::before { content: "\f06b"; }

.tm-member-nav a[data-active="my-article"]::before { content: "\f0f6"; }

.tm-member-nav a[data-active="my-comment"]::before,
.tm-member-nav a[data-active="user-comment"]::before { content: "\f086"; }

.tm-member-nav a[data-active="my-follow"]::before,
.tm-member-nav a[data-active="user-follow"]::before { content: "\f0c0"; }

.tm-member-nav a[data-active="my-message"]::before { content: "\f0e0"; }

.tm-member-nav a[data-active="member-withdrawals"]::before { content: "\f0d6"; }

.tm-member-nav a[data-active="member-siteadd"]::before { content: "\f067"; }

.tm-member-nav a[data-active="member-pay"]::before { content: "\f09d"; }

.tm-member-nav a[data-active="member-help"]::before { content: "\f059"; }

/* ---- 资料行：图标槽 + 悬停 ---- */
.tm-infolist li {
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    border-radius: 8px;
    transition: background .18s ease;
}

.tm-infolist li:hover {
    background: rgba(255, 255, 255, .03);
}

.tm-infolist li > i {
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
    color: var(--muted);
    opacity: .8;
}

.tm-infolist li > b {
    margin-left: auto;
}

.tm-infolist-email {
    color: var(--gold);
}

/* ---- 绑定列表：状态徽章 + 悬停 ---- */
.tm-bindlist li {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    border-radius: 10px;
    transition: background .18s ease;
}

.tm-bindlist li:hover {
    background: rgba(255, 255, 255, .03);
}

.tm-bindlist-body strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.tm-bind-state {
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 400;
    border-radius: 999px;
}

.tm-bind-state--on {
    color: #9fe0b4;
    background: rgba(120, 210, 150, .12);
    border: 1px solid rgba(120, 210, 150, .32);
}

.tm-bind-state--off {
    color: var(--muted);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
}

/* ---- 空状态 ---- */
.tm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 46px 20px;
    text-align: center;
    color: var(--muted);
    background: rgba(255, 255, 255, .015);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

.tm-empty::before {
    font-family: FontAwesome;
    content: "\f01c";
    font-size: 34px;
    line-height: 1;
    color: var(--line-strong);
}

.tm-empty h4 {
    margin: 0;
    font-size: 15px;
    color: var(--text);
}

.tm-empty p {
    margin: 0;
    font-size: 13px;
}

.tm-empty .tm-btn {
    margin-top: 4px;
}

/* ---- 头像上传：虚线拖放区 ---- */
.tm-avatar-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 26px 20px;
    background: rgba(255, 255, 255, .02);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.tm-avatar-drop:hover,
.tm-avatar-drop.is-drag {
    border-color: var(--pink);
    background: rgba(232, 161, 200, .07);
}

.tm-avatar-drop .tm-avatar-upload img {
    width: 88px;
    height: 88px;
    object-fit: cover;
}

.tm-avatar-plus {
    width: 28px;
    height: 28px;
    line-height: 26px;
    font-size: 19px;
}

/* ---- 密码强度条 + 显示 / 隐藏 ---- */
.tm-pw-meter {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.tm-pw-meter i {
    flex: 1 1 0;
    height: 4px;
    background: var(--line);
    border-radius: 2px;
    transition: background .18s ease;
}

.tm-pw-meter[data-level="1"] i:nth-child(1) { background: #c9607a; }

.tm-pw-meter[data-level="2"] i:nth-child(-n+2) { background: #d9a25f; }

.tm-pw-meter[data-level="3"] i:nth-child(-n+3) { background: #8fbf7a; }

.tm-pw-meter[data-level="4"] i { background: #6fc39a; }

.tm-pw-tip {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}

.tm-input-icon .tm-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.tm-input-icon .tm-eye:hover,
.tm-input-icon .tm-eye.is-on {
    color: var(--pink);
    background: rgba(255, 255, 255, .05);
}

.tm-input-icon--eye .tm-input {
    padding-right: 40px;
}

/* ---- 批量操作条 ---- */
.tm-batchbar {
    justify-content: space-between;
    padding: 12px 14px;
}

.tm-batch-count {
    font-size: 12px;
    color: var(--muted);
}

.tm-batch-count b {
    color: var(--pink);
}

/* ---- 插件会员页（follow / publish）里的官方片段 ---- */
.tm-member-layout .media {
    align-items: flex-start;
}

.tm-member-layout .media-body {
    min-width: 0;
}

.tm-member-layout .wrap-511-9.threadlist > li {
    padding: 12px;
    border-bottom: 1px solid var(--line);
}

.tm-member-layout .wrap-511-9.threadlist > li:last-child {
    border-bottom: 0;
}

/* ---- 用户主页：二级菜单（原顶部 tabs）收进左侧栏，纵向排列 ---- */
.tm-member-side .tm-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tm-member-side .tm-tab {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
}

.tm-member-side .tm-tab::before {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    font-family: FontAwesome;
    font-size: 13px;
    opacity: .7;
    content: "\f105";
}

.tm-member-side .tm-tab:hover::before,
.tm-member-side .tm-tab.active::before {
    opacity: 1;
}

.tm-member-side .tm-tab.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(232, 161, 200, .22), rgba(232, 161, 200, .02));
    box-shadow: inset 3px 0 0 var(--pink);
}

.tm-member-side .tm-tab[data-active="user-home"]::before { content: "\f015"; }

.tm-member-side .tm-tab[data-active="user-comment"]::before { content: "\f086"; }

.tm-member-side .tm-tab[data-active="user-favorites"]::before { content: "\f006"; }

.tm-member-side .tm-tab[data-active="user-like"]::before { content: "\f087"; }

.tm-member-side .tm-notice {
    margin-top: 12px;
    padding: 12px 2px 0;
    font-size: 12px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
}

.tm-avatar-drop .tm-form-tip {
    margin: 0;
}

@media (max-width: 992px) {
    .tm-member-side .tm-tabs {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tm-member-side .tm-tab::before {
        display: none;
    }
}/* ----------------------------------------------------------------
 * 6.3 会员中心：插件页的官方标记 → 主题视觉桥接
 *     publish / follow / favorites / like / invitation / cp_ams 的模板沿用了官方
 *     Bootstrap 标记（media 列表、text-center 批量条、btn-success/table 等），
 *     这里把它们在会员区域内的呈现拉齐到 §6.1 / §6.2 的规则上。
 * ------------------------------------------------------------- */

/* 列表包裹层：与 .tm-threadlist / .tm-postlist 对齐 */
.tm-member-layout .tm-main > ul.tm-threadlist,
.tm-member-layout .tm-main > ul.tm-postlist,
.tm-member-layout .tm-main > ul.tm-usergrid {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* follow 插件的人员卡片栅格 */
.tm-member-layout .tm-main > ul.tm-usergrid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tm-member-layout .tm-main > ul.tm-usergrid > li {
    flex: 1 1 260px;
    min-width: 0;
    padding: 12px 14px;
    margin: 0;
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

/* 官方 media 列表项 → 与 .tm-thread 一致的卡片行 */
.tm-member-layout li.media {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 10px;
    padding: 14px;
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .18s ease;
}

.tm-member-layout li.media:hover {
    border-color: var(--line-strong);
}

.tm-member-layout li.media:last-child {
    margin-bottom: 0;
}

.tm-member-layout .media-body {
    flex: 1 1 auto;
    min-width: 0;
}

.tm-member-layout .media a {
    color: var(--text);
}

.tm-member-layout .media a:hover {
    color: var(--pink);
}

.tm-member-layout .media .username {
    color: var(--pink);
}

/* 官方批量条里的按钮组 */
.tm-member-layout .mod-button {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tm-member-layout .tm-batchbar label {
    margin: 0;
}

/* 提示条：官方 .alert-primary / .nav-link.alert-primary → 主题提示 */
.tm-member-layout .alert-primary,
.tm-member-layout .nav-link.alert-primary {
    color: var(--gold);
    background: rgba(217, 180, 119, .1);
    border: 1px solid rgba(217, 180, 119, .28);
    border-radius: var(--radius-sm);
}

/* 文字色跟随主题 */
.tm-member-layout .text-muted,
.tm-member-layout .text-secondary {
    color: var(--muted) !important;
}

.tm-member-layout .text-dark {
    color: var(--text) !important;
}

.tm-member-layout .text-danger {
    color: #e79aa9 !important;
}

/* 表格（邀请码等页面） */
.tm-member-layout .table thead th {
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

.tm-member-layout .table-hover tbody tr:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .04);
}

/* 胶囊式按钮的选中态（发布编辑页的 flag 选项动态生成 .active） */
.tm-btn.active {
    color: #fff;
    background: var(--grad);
    border-color: transparent;
}

/* 小号按钮 */
.tm-btn--sm {
    padding: 5px 12px;
    font-size: 13px;
    border-radius: 8px;
}

/* 插件分页用的是 .pagination.justify-content-center flex-wrap */
.tm-member-layout .pagination {
    justify-content: center;
}

/* 插件页里的图片缩略图 */
.tm-member-layout .media .rounded,
.tm-member-layout .media img.d-block {
    border-radius: var(--radius-sm);
}
/* ---------------------------------------------------------------
 * 7. 主题（文章）列表
 * ------------------------------------------------------------- */
.tm-threadlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-thread {
    display: flex;
    gap: 14px;
    padding: 16px;
    margin-bottom: 12px;
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: .2s;
}

.tm-thread:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
}

.tm-thread-check {
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
}

.tm-thread-thumb {
    flex: 0 0 132px;
    width: 132px;
    height: 88px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, #241827, #3a2034 55%, #17131f);
}

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

.tm-thread-main {
    flex: 1 1 auto;
    min-width: 0;
}

.tm-thread-title {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.45;
}

.tm-thread-title a {
    color: var(--text);
}

.tm-thread-title a:hover {
    color: var(--pink);
}

.tm-thread-brief {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 13px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.tm-thread-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--muted);
    font-size: 12px;
}

.tm-thread-meta a {
    color: var(--muted);
}

.tm-thread-meta a:hover {
    color: var(--pink);
}

.tm-thread-meta i {
    margin-right: 4px;
}

.tm-thread-last {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.tm-thread-tags {
    margin: 6px 0 2px;
}

.tm-thread-tags .tm-tag {
    margin-top: 0;
}

.tm-thread-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tm-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
    margin-right: 6px;
    background: #2a202d;
    color: var(--pink-soft);
}

.tm-badge--top {
    background: var(--grad);
    color: #fff;
}

.tm-badge--lock {
    background: #37202a;
    color: #f0a0a0;
}

.tm-badge--new {
    background: #23301f;
    color: #a9d68a;
}

/* ---------------------------------------------------------------
 * 8. 内容页
 * ------------------------------------------------------------- */
.tm-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 14px;
}

.tm-breadcrumb a {
    color: var(--muted);
}

.tm-breadcrumb a:hover {
    color: var(--pink);
}

.tm-breadcrumb i {
    font-style: normal;
    color: #514759;
}

.tm-breadcrumb .current {
    color: var(--text);
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-article {
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
}

.tm-article-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tm-article-head img.avatar-3 {
    flex: 0 0 auto;
}

.tm-article-title {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.35;
    word-break: break-word;
}

.tm-article-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
}

.tm-article-sub a {
    color: var(--muted);
}

.tm-article-sub a:hover {
    color: var(--pink);
}

.tm-article-sub .tm-article-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tm-message {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    word-break: break-word;
    overflow-wrap: break-word;
}

.tm-message img,
.tm-message iframe,
.tm-message video,
.tm-message embed {
    max-width: 100%;
}

.tm-message p {
    margin: 0 0 1em;
}

.tm-message blockquote {
    margin: 0 0 1em;
    padding: 10px 14px;
    border-left: 3px solid var(--line-strong);
    background: rgba(255, 255, 255, .03);
    color: var(--muted);
    border-radius: 0 8px 8px 0;
}

.tm-message table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

.tm-message th,
.tm-message td {
    border: 1px solid var(--line);
    padding: 8px 10px;
}

.tm-message pre {
    background: #0e0c13;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    overflow: auto;
}

.tm-message code {
    color: var(--gold);
}

.tm-source {
    margin-top: 18px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.tm-tagrow {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

/* 侧栏小列表 */
.tm-minilist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-minilist li {
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
}

.tm-minilist li:last-child {
    border-bottom: 0;
}

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

.tm-minilist a:hover {
    color: var(--pink);
}

/* ---------------------------------------------------------------
 * 9. 评论
 * ------------------------------------------------------------- */
.tm-comments {
    margin-top: 20px;
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
}

.tm-comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.tm-comments-head h3 {
    margin: 0;
    font-size: 16px;
}

.tm-comments-head .tm-count {
    color: var(--pink);
}

.tm-postlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-post {
    padding: 16px 0;
    border-bottom: 1px dashed var(--line);
}

.tm-post:last-child {
    border-bottom: 0;
}

.tm-post.quote {
    background: rgba(232, 161, 200, .06);
    border-radius: var(--radius-sm);
    padding-left: 12px;
    padding-right: 12px;
}

.tm-post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 12px;
}

.tm-post-head .tm-post-user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tm-post-head .tm-post-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.tm-post-head a {
    color: var(--muted);
}

.tm-post-head a:hover {
    color: var(--pink);
}

.tm-post-subject {
    margin: 10px 0 0;
    font-size: 14px;
}

.tm-post-body {
    margin-top: 8px;
    word-break: break-word;
}

.tm-floor {
    color: var(--gold);
}

.tm-post-new {
    margin-top: 6px;
}

.tm-replyform {
    margin-top: 4px;
}

.tm-replybar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.tm-plugin {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.progress {
    width: 100%;
    height: 6px;
    margin-top: 10px;
    background: #241d2c;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0;
    background: var(--grad);
    transition: width .2s;
}

.invisible {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.addattach {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0;
}

.list-unstyled {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-form-tip {
    color: var(--muted);
    font-size: 12px;
    margin-top: 8px;
}

/* ---------------------------------------------------------------
 * 10. 表单
 * ------------------------------------------------------------- */
.tm-field {
    display: block;
    margin-bottom: 16px;
}

.tm-field>label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 13px;
}

.tm-input,
.form-control,
textarea.form-control {
    display: block;
    width: 100%;
    padding: 11px 13px;
    color: var(--text);
    background: #100e16;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.5;
    outline: 0;
    transition: border-color .2s, box-shadow .2s;
}

.tm-input::placeholder,
.form-control::placeholder {
    color: #6f6473;
}

.tm-input:focus,
.form-control:focus {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(232, 161, 200, .12);
    background: #100e16;
    color: var(--text);
}

textarea.tm-input {
    min-height: 140px;
    resize: vertical;
}

.tm-input-group {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.tm-input-group .tm-input {
    flex: 1 1 auto;
}

.tm-input-icon {
    position: relative;
}

.tm-input-icon > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    color: #6f6473;
    pointer-events: none;
}

.tm-input-icon .tm-input {
    padding-left: 34px;
}

.tm-checkline {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

/* 登录 / 注册 */
.tm-auth {
    max-width: 460px;
    margin: 26px auto 40px;
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 28px;
    box-shadow: var(--shadow);
}

.tm-auth-head {
    text-align: center;
    margin-bottom: 22px;
}

.tm-auth-head .tm-mark {
    margin: 0 auto 12px;
}

.tm-auth-head h1 {
    margin: 0 0 6px;
    font-size: 22px;
}

.tm-auth-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.tm-auth-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 13px;
}

.tm-auth-foot a {
    color: var(--pink);
}

.tm-auth .btn-block {
    margin-top: 22px;
}

/* 提示页 */
.tm-message-page {
    max-width: 620px;
    margin: 46px auto;
    text-align: center;
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px 26px;
}

.tm-message-page .tm-message-icon {
    font-size: 34px;
    color: var(--gold);
    margin-bottom: 12px;
}

.tm-message-page .tm-message-icon.is-error {
    color: #e0788a;
}

.tm-message-page h1 {
    font-size: 18px;
    margin: 0 0 10px;
}

.tm-message-page .tm-message-text {
    color: var(--muted);
    word-break: break-word;
    margin-bottom: 18px;
}

/* ---------------------------------------------------------------
 * 11. 翻页
 * ------------------------------------------------------------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 22px 0;
    padding: 0;
}

.pagination .page-link {
    display: block;
    padding: 7px 13px;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.pagination .page-link:hover {
    color: var(--pink);
    border-color: var(--line-strong);
    background: var(--panel2);
}

.pagination .page-item.active .page-link {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
}

/* ---------------------------------------------------------------
 * 12. 附件 / 头像 / 工具类（替代 style.css 中被本主题引用的部分）
 * ------------------------------------------------------------- */
.nowrap {
    white-space: nowrap;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-break {
    word-break: break-word;
    word-wrap: break-word;
}

.text-muted,
.text-grey,
.text-gray {
    color: var(--muted) !important;
}

.text-primary {
    color: var(--pink) !important;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.small {
    font-size: 12px;
}

.line-height-3 {
    line-height: 2;
}

.avatar-1 {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
}

.avatar-2 {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
}

.avatar-3 {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
}

.avatar-4 {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
}

.fieldset {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel3);
}

.fieldset legend {
    width: auto;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 0;
}

/* ---------------------------------------------------------------
 * 投稿表单（publish 插件 ?home-content.html&op=create / update）
 * 原先把「缩略图 / 内容 / 附件 / 自定义」塞进右栏手风琴，窄栏里互相压叠、
 * 缩略图还会溢出到编辑器上。现改为正文内顺序分区（fieldset）：
 * 每块独占一行、块间留白，块内小字段宽屏两列、窄屏一列。
 * 只加样式，不改任何被 app.js / 插件内联 JS 绑定的 id 与 class。
 * ------------------------------------------------------------- */
.tm-postform-main .tm-field {
    margin-bottom: 14px;
}

.tm-postform-main .tm-field > label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 13px;
}

.tm-postform .tm-postbox {
    margin: 0 0 16px;
    padding: 14px 16px 16px;
}

.tm-postform .tm-postbox legend {
    padding: 0 8px;
    font-size: 13px;
    letter-spacing: .04em;
}

/* 标签：名称放在输入框前面（原来只有 placeholder「回车|逗号」，看不出这行是干嘛的） */
.tm-tagfield {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
}

.tm-tagfield-label {
    flex: 0 0 auto;
    margin: 0;
    padding-top: 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.tm-tagfield .tags {
    flex: 1 1 auto;
    margin-bottom: 0;
}

/* 标签输入框宽度（原来写在内联 style 上，挪进 CSS，方便统一改） */
.tm-postform .tag-input {
    width: 130px;
}

/* 摘要 / 关键词 / 描述：宽屏多列、窄屏一列，各带标签 + 一行说明 */
.tm-postgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.tm-postgrid .tm-field {
    margin-bottom: 0;
}

.tm-postgrid textarea {
    height: 2.5rem;
}

.tm-postgrid .tm-field > label {
    font-weight: 600;
}

.tm-postgrid .tm-form-tip {
    margin-top: 6px;
}

/* 分区内最后一个 form-group 不再留 bootstrap 的下边距，免得框底一大块空白 */
.tm-postform .tm-postbox .form-group:last-child {
    margin-bottom: 0;
}

.tm-checkrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-bottom: 14px;
}

/* 缩略图预览：限宽 + 圆角，避免撑破分区 */
.tm-postform .addicon .img_1 {
    cursor: pointer;
    margin: 0;
}

.tm-postform .addicon img#img_1 {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #100e16;
}

.tm-postbox-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* 附件：按钮、进度条、附件列表各留一口气 */
.tm-postform .attachlist_parent .fieldset {
    margin: 12px 0 0;
}

.tm-postform .attachlist_parent .progress {
    margin: 10px 0 0;
}

.tm-postform-submit {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.attachlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.attachlist li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.attachlist a {
    color: var(--muted);
}

.attachlist a:hover {
    color: var(--pink);
}

.attachlist .delete {
    cursor: pointer;
    color: #b06a78;
}

/* 附件图标（复用 view/img/filetype.png 雪碧图，不复制静态资源） */
.icon.filetype {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: 16px;
    background-image: url("../../../img/filetype.png");
}

.icon.filetype.video {
    background-position: 0 0;
}

.icon.filetype.music {
    background-position: 0 -16px;
}

.icon.filetype.exe {
    background-position: 0 -32px;
}

.icon.filetype.flash {
    background-position: 0 -48px;
}

.icon.filetype.image {
    background-position: 0 -64px;
}

.icon.filetype.office {
    background-position: 0 -80px;
}

.icon.filetype.pdf {
    background-position: 0 -96px;
}

.icon.filetype.text {
    background-position: 0 -112px;
}

.icon.filetype.unknown {
    background-position: 0 -128px;
}

.icon.filetype.zip {
    background-position: 0 -144px;
}

.icon.filetype.other {
    background-position: 0 -160px;
}

.icon.filetype.book {
    background-position: 0 -176px;
}

.icon.filetype.torrent {
    background-position: 0 -192px;
}

.icon.filetype.font {
    background-position: 0 -208px;
}

/* ---------------------------------------------------------------
 * 13. Bootstrap 组件的暗色覆盖（弹窗 / 下拉 / 分页等由 JS 生成）
 * ------------------------------------------------------------- */
.modal-content {
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
}

.modal-header,
.modal-footer {
    border-color: var(--line);
}

.modal-header .close {
    color: var(--text);
    text-shadow: none;
    opacity: .7;
}

.modal-backdrop.show {
    opacity: .7;
}

.dropdown-menu {
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.dropdown-item {
    color: var(--text);
    padding: 8px 16px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: #241d2c;
    color: var(--pink);
}

.dropdown-toggle {
    color: var(--muted);
    cursor: pointer;
}

.dropdown-toggle:hover {
    color: var(--pink);
}

.custom-control-label {
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--pink);
}

/* 主题头部的备案 / 页脚 */
.tm-footer {
    border-top: 1px solid var(--line);
    margin-top: 34px;
    padding: 26px 0 44px;
    color: var(--muted);
    font-size: 12px;
}

.tm-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.tm-footer a {
    color: var(--muted);
}

.tm-footer a:hover {
    color: var(--pink);
}

.tm-scroll-top {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 40;
    display: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background: var(--panel2);
    border: 1px solid var(--line);
    color: var(--muted);
}

.tm-scroll-top:hover {
    color: var(--pink);
    border-color: var(--line-strong);
}

/* ---------------------------------------------------------------
 * 14. 响应式
 * ------------------------------------------------------------- */
@media (max-width: 992px) {
    .tm-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 会员中心：窄屏下左侧菜单改为横向胶囊，避免把内容挤到很下面 */
    .tm-member-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .tm-member-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .tm-member-nav li {
        border-bottom: 0;
    }

    .tm-member-nav a {
        padding: 7px 14px;
        border-radius: 20px;
    }

    .tm-member-nav a.active {
        color: #fff;
        background: var(--grad);
        box-shadow: none;
    }

    .tm-member-nav--sub a {
        padding-left: 14px;
    }

    .tm-member-nav--sub a.active {
        color: var(--gold);
        background: #241d2c;
        box-shadow: inset 0 0 0 1px var(--line-strong);
    }

    /* 会员中心美化：资料卡纵向、统计胶囊居中、侧栏取消吸顶、菜单图标收起 */
    .tm-member-card {
        flex-direction: column;
        gap: 14px;
        padding: 20px 16px;
        text-align: center;
    }

    .tm-member-count,
    .tm-member-meta,
    .tm-member-brief .wrap-511-9 {
        justify-content: center;
    }

    .tm-member-side {
        position: static;
    }

    .tm-member-nav a::before {
        display: none;
    }

    .tm-member-count > span {
        padding: 4px 10px;
    }

    .tm-navlinks {
        display: none;
    }

    .tm-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tm-hero h1 {
        font-size: 32px;
    }

    .tm-hero {
        padding-top: 38px;
    }

    .tm-aside {
        order: 2;
    }
}

@media (max-width: 640px) {
    .tm-wrap {
        padding: 0 16px;
    }

    .tm-brand-text {
        max-width: 120px;
        font-size: 17px;
    }

    .tm-search {
        display: none;
    }

    .tm-member {
        padding-top: 16px;
    }

    .tm-member-card {
        flex-direction: column;
        text-align: center;
        padding: 18px 16px;
    }

    .tm-member-name,
    .tm-member-count {
        justify-content: center;
    }

    .tm-infolist li {
        display: block;
        text-align: left;
    }

    .tm-infolist b {
        display: block;
        text-align: left;
        margin-top: 2px;
    }

    .tm-bindlist li {
        flex-wrap: wrap;
    }

    .tm-thread {
        padding: 14px;
    }

    .tm-thread-thumb {
        flex: 0 0 96px;
        width: 96px;
        height: 70px;
    }

    .tm-article {
        padding: 18px 16px;
    }

    .tm-article-title {
        font-size: 19px;
    }

    .tm-auth {
        margin: 12px auto 26px;
        padding: 24px 18px;
    }

    .tm-comments {
        padding: 16px;
    }

    .tm-footer-inner {
        display: block;
        text-align: center;
    }
}

/* ---------------------------------------------------------------
 * 15. 内置默认模板补充：少量工具类 + 官方遗留模板的 Bootstrap 暗色兜底
 *     说明：模板已提升为 view/htm 的内置默认模板，但 portal*.htm 与
 *     thread_list_mod.inc.htm 仍沿用官方 Bootstrap 标记，这里统一压成暗色，
 *     避免出现白卡片、白表格。
 * ------------------------------------------------------------- */
.tm-actions--center {
    justify-content: center;
}

.tm-checkline--center {
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.tm-checkline--center label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
}

.tm-count-strong {
    color: var(--pink);
    font-weight: 700;
    margin: 0 4px;
}

/* 表单控件与卡片 */
.card,
.card-site-info {
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
}

.card-header,
.card-footer {
    background: var(--panel3);
    border-color: var(--line);
    color: var(--text);
}

.card-body {
    color: var(--text);
}

.bg-white,
.bg-light {
    background: var(--panel) !important;
    color: var(--text);
}

.shadow,
.shadow-sm,
.shadow-lg {
    box-shadow: none !important;
}

.list-group-item {
    background: var(--panel);
    border-color: var(--line);
    color: var(--text);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background: #241d2c;
    color: var(--pink);
}

.breadcrumb {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--muted);
}

.nav-tabs {
    border-bottom-color: var(--line);
}

.nav-tabs .nav-link {
    color: var(--muted);
    border-color: transparent;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--line) var(--line) transparent;
    color: var(--pink);
}

.nav-tabs .nav-link.active {
    background: var(--panel2);
    border-color: var(--line) var(--line) var(--panel2);
    color: var(--pink);
}

.nav-pills .nav-link {
    color: var(--muted);
}

.nav-pills .nav-link.active {
    background: var(--grad);
    color: #fff;
}

.nav-scroller {
    overflow-x: auto;
}

.bg-secondary {
    background: #241d2c !important;
}

.bg-dark {
    background: #100e16 !important;
}

.custom-select,
select.tm-input {
    background-color: #100e16;
    border: 1px solid var(--line);
    color: var(--text);
}

.custom-select:focus {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(232, 161, 200, .12);
}

.input-group-text {
    background: #100e16;
    border: 1px solid var(--line);
    color: var(--muted);
}

.table {
    color: var(--text);
}

.table th,
.table td {
    border-color: var(--line);
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, .02);
}

.custom-control-label::before {
    background: #100e16;
    border-color: var(--line);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background: var(--grad);
    border-color: transparent;
}

.badge {
    background: #2a202d;
    color: var(--pink-soft);
}

.badge-primary,
.badge-secondary {
    background: var(--grad);
    color: #fff;
}

.close {
    color: var(--text);
    opacity: .6;
}

.close:hover {
    color: var(--pink);
    opacity: 1;
}


/* ---------------------------------------------------------------
 * 16. 弹窗登录
 *     $.ajax_modal 会取回登录页并只注入 #body 的内容（页头/页脚在 #body 之外），
 *     所以弹窗里就是 .tm-auth 这张卡片；弹窗自带标题栏，这里把整页卡片压平。
 * ------------------------------------------------------------- */
.modal-body .tm-auth {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.modal-body .tm-auth-head .tm-mark {
    display: none;
}

.modal-body .tm-auth-head {
    margin-bottom: 16px;
}

.modal-body .tm-auth-foot {
    margin-top: 14px;
}

/* ---- 游客评论区入口（点击弹窗登录） ---- */
.tm-guest-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 22px 16px;
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
}

.tm-guest-login p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

/* ---- 列表页的「新帖 / 最新回复」标签行（publish 插件通过 *_nav_item_after 注入） ---- */
.tm-listnav {
    list-style: none;
    margin: -4px 0 14px;
    padding: 0 0 2px;
    border-bottom: 1px solid var(--line);
}

.tm-listnav .nav-item {
    margin-bottom: -1px;
}

/* ---------------------------------------------------------------
 * 17. 图标对齐
 *     FontAwesome 图标类是 icon-xxx（不是裸 .icon），选择器别写错；
 *     中文与图标混排时 FA 默认 vertical-align:baseline 会偏低，这里统一 middle。
 *     （flex 容器如 .tm-btn 本来就居中，vertical-align 会被忽略，无副作用）
 * ------------------------------------------------------------- */
.tm-wrap i[class^="icon-"],
.tm-wrap i[class*=" icon-"] {
    vertical-align: middle;
}

.tm-input-icon > i {
    width: 14px;
    text-align: center;
}

/* ---------------------------------------------------------------
 * 18. 「写文章」入口（publish 插件 header_nav_create.htm）
 *     插件标记是 Bootstrap 的 `navbar-brand d-block d-lg-none`：
 *     ① 1.25rem 的 brand 字号 —— 太大，这里压回按钮尺寸；
 *     ② d-lg-none 会让它在桌面端消失 —— 用更高优先级的同 !important 规则解锁，
 *        这样页头右侧在桌面端和移动端都能看到投稿入口。
 * ------------------------------------------------------------- */
.tm-nav-user .navbar-brand.d-lg-none {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 0 0 4px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    background: var(--pink);
    border: 1px solid var(--pink);
    border-radius: 9px;
    white-space: normal;
    transition: .2s;
}

.tm-nav-user .navbar-brand.d-lg-none:hover {
    color: #fff;
    opacity: .86;
}

.tm-nav-user .navbar-brand.d-lg-none i {
    margin: 0;
    color: inherit;
}

/* ---------------------------------------------------------------
 * 19. 左栏导航里的「写文章」入口
 *     publish 插件（common_header_start.htm）输出的是 Bootstrap 大按钮
 *     `btn btn-danger btn-block mb-3`；挂进左栏后要压成与其它导航项一致的行，
 *     并补一个笔形图标（\f040），否则一颗大红块塞在导航里很突兀。
 * ------------------------------------------------------------- */
.tm-member-nav .btn-block {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--muted);
    background: none;
    border: 0;
    border-radius: 8px;
    text-align: left;
    transition: .2s;
}

.tm-member-nav .btn-block::before {
    content: "\f040";
    font-family: FontAwesome;
    width: 1.1em;
    font-size: 13px;
    text-align: center;
}

.tm-member-nav .btn-block:hover,
.tm-member-nav .btn-block:focus {
    color: var(--pink);
    background: rgba(255, 255, 255, .04);
}

/* 没有插件注入时不留空行 */
.tm-member-nav li:empty {
    display: none;
}

/* 会员中心里较宽的数据表（原插件的内联 style 挪到这里） */
.tm-table-wide {
    min-width: 600px;
}