/* 首页样式：从 qiantai/首页参考.php 中的 <style> 抽取整理而来 */

/* 重置和基础样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* 主容器布局 */
#app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f7fa;
}

/* 左侧导航栏 */
#sidebar {
    width: 220px;
    background: #ffffff;
    color: #4f4a4b;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: hidden;
    border-right: 1px solid #f0f0f0;
    box-shadow: none;
    position: relative;
}

/* 收起状态 */
#sidebar.collapsed {
    width: 64px;
}

/* 侧边栏品牌区域 */
.sidebar-brand {
    padding: 16px 20px;
    height: 64px;
    background: transparent;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    box-shadow: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* 品牌区域整体作为可点击链接 */
.sidebar-brand .sidebar-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.sidebar-brand .sidebar-brand-link:hover {
    text-decoration: none;
}

.sidebar-brand:hover {
    background: transparent;
}

.sidebar-brand h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.5px;
}

.sidebar-brand .logo-icon {
    color: #2563eb;
    font-size: 22px;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.sidebar-brand:hover .logo-icon {
    transform: scale(1.1);
    color: #7c3aed;
}

/* 收起状态下隐藏品牌名称 */
#sidebar.collapsed .sidebar-brand h2 {
    display: none;
}

/* 收起状态下调整品牌区域 */
#sidebar.collapsed .sidebar-brand {
    justify-content: center;
    padding: 16px 8px;
    height: 64px;
}

/* 收起时品牌链接内的内容水平居中，仅显示图标 */
#sidebar.collapsed .sidebar-brand .sidebar-brand-link {
    justify-content: center;
}

#sidebar.collapsed .sidebar-brand .logo-icon {
    margin-right: 0;
    font-size: 24px;
}

#sidebar.collapsed .sidebar-brand:hover .logo-icon {
    transform: scale(1.15);
}

/* 侧边栏导航菜单 */
.sidebar-nav {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
}

/* 自定义滚动条 */
.sidebar-nav::-webkit-scrollbar {
    width: 3px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: #e5e5e5;
    border-radius: 3px;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav > ul > li {
    margin-bottom: 2px;
    position: relative;
}

/* 一级菜单项样式 */
.sidebar-nav > ul > li > a {
    display: flex;
    align-items: center;
    padding: 11px 20px;
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
    position: relative;
}

/* 活动状态 - 左边框线条 + 浅蓝背景 */
.sidebar-nav > ul > li.active > a {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.08) 0%, transparent 100%);
    color: #2563eb;
    border-left-color: #2563eb;
}

.sidebar-nav > ul > li.active > a i {
    color: #2563eb;
}

/* 下拉菜单展开状态 - 同样使用轻量样式 */
.sidebar-nav > ul > li.has-dropdown > a {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.08) 0%, transparent 100%);
    color: #2563eb;
    border-left-color: #2563eb;
}

.sidebar-nav > ul > li.has-dropdown > a i {
    color: #2563eb;
}

/* 普通菜单项悬停 */
.sidebar-nav > ul > li > a:hover {
    background: #f8f9fa;
    color: #333;
}

.sidebar-nav > ul > li > a:hover i {
    color: #2563eb;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    padding: 11px 20px;
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
}

.sidebar-nav a:hover {
    color: #2563eb;
    background: #f8f9fa;
}

/* 收起状态下的导航链接 */
#sidebar.collapsed .sidebar-nav {
    padding: 12px 0;
}

#sidebar.collapsed .sidebar-nav > ul > li > a {
    justify-content: center;
    padding: 12px 8px;
    border-left: none;
}

#sidebar.collapsed .sidebar-nav a span {
    display: none;
}

/* 导航图标 */
.sidebar-nav a i {
    font-size: 18px;
    margin-right: 12px;
    width: 20px;
    text-align: center;
    color: #999;
    transition: all 0.2s ease;
}

.sidebar-nav a:hover i {
    color: #2563eb;
}

#sidebar.collapsed .sidebar-nav a i {
    margin-right: 0;
    font-size: 20px;
}

/* 下拉箭头 */
.sidebar-nav .has-dropdown > a::after {
    content: '\F358';
    font-family: 'Material Design Icons';
    font-size: 12px;
    margin-left: auto;
    transition: transform 0.2s ease;
    color: #999;
}

#sidebar.collapsed .sidebar-nav .has-dropdown > a::after {
    display: none;
}

/* 下拉菜单样式 */
.sidebar-nav .sub-menu {
    display: none;
    background: #fafbfc;
    padding: 4px 0;
    margin: 0;
}

.sidebar-nav .sub-menu li {
    border-bottom: none;
}

.sidebar-nav .sub-menu a {
    padding: 10px 20px 10px 52px;
    font-size: 13px;
    background: transparent;
    color: #666;
    border-left: none;
}

.sidebar-nav .sub-menu a:hover {
    background: #f0f0f0;
    color: #2563eb;
}

.sidebar-nav .sub-menu a i {
    font-size: 14px;
    margin-right: 8px;
    width: 16px;
    color: #999;
}

.sidebar-nav .sub-menu a:hover i {
    color: #2563eb;
}

/* 收起状态下隐藏子菜单 */
#sidebar.collapsed .sidebar-nav .sub-menu {
    display: none !important;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 160px;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    border-radius: 8px;
    padding: 6px 0;
}

#sidebar.collapsed .sidebar-nav .sub-menu a {
    padding: 10px 16px;
}

/* 收起状态下悬停显示子菜单 */
#sidebar.collapsed .sidebar-nav li:hover > .sub-menu {
    display: block !important;
}

/* 侧边栏折叠按钮 */
.sidebar-toggle {
    position: absolute;
    left: 220px;
    top: 18px;
    background: #fff;
    color: #999;
    border: 1px solid #eee;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sidebar-toggle:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.sidebar-toggle:active {
    transform: scale(0.95);
}

#sidebar.collapsed + .sidebar-toggle {
    left: 64px;
}

#sidebar.collapsed + .sidebar-toggle:hover {
    background: #2563eb;
    color: #fff;
}

.sidebar-toggle i {
    font-size: 14px;
    transition: all 0.2s ease;
}

.sidebar-toggle:hover i {
    transform: rotate(180deg);
}

/* 主内容区域 */
#main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 顶部导航栏 - 简洁大气设计 */
#top-header {
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}

.header-left h1 {
    display: none;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 顶部 Logo */
.header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 28px;
}

.header-logo i {
    font-size: 22px;
    color: #6366f1;
}

.header-logo span {
    background: linear-gradient(135deg, #6366f1, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-logo:hover i {
    color: #4f46e5;
}

/* 顶部主导航 */
.header-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.header-nav-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.header-nav-item i {
    font-size: 17px;
    color: #999;
    transition: color 0.2s ease;
}

.header-nav-item:hover {
    color: #6366f1;
}

.header-nav-item:hover i {
    color: #6366f1;
}

.header-nav-item.active {
    color: #6366f1;
    font-weight: 600;
}

.header-nav-item.active i {
    color: #6366f1;
}

/* 顶部中间搜索区 */
.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 380px;
    margin: 0 24px;
}

/* 顶部Logo */
.top-logo {
    display: flex;
    align-items: center;
	    color: #4f4a4b;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 0;
    border-radius: 0;
    transition: all 0.3s ease;
}

.top-logo:hover {
    transform: none;
}

.top-logo i {
    margin-right: 10px;
    font-size: 20px;
    color: #4054b2;
    transition: all 0.3s ease;
}

.top-logo:hover i {
    transform: none;
}

/* 搜索框容器样式 */
.search-box-container {
    position: relative;
}

.search-box {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease;
    overflow: visible;
    width: 100%;
}

/* 搜索框内类型切换按钮 */
.search-type-toggle {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 10px 0 12px;
    cursor: pointer;
    user-select: none;
    border-right: 1px solid #e5e5e5;
    height: 20px;
    flex-shrink: 0;
}

.search-type-label {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}

.search-type-arrow {
    font-size: 14px;
    color: #999;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.search-type-toggle.open .search-type-arrow {
    transform: rotate(180deg);
}

.search-type-toggle:hover .search-type-label {
    color: #6366f1;
}

.search-type-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: -4px;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    min-width: 120px;
    z-index: 1001;
    display: none;
}

.search-type-toggle.open .search-type-dropdown {
    display: block;
}

.search-type-dropdown li {
    padding: 8px 14px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.search-type-dropdown li:hover {
    background-color: #f5f5f5;
    color: #111;
}

.search-type-dropdown li.active {
    color: #6366f1;
    font-weight: 500;
    background-color: #fafaff;
}

/* 顶部搜索类型下拉整体样式（提示词作品 / 提示词模板） */
.search-type-wrapper {
	    position: relative;
	    height: 36px;
	    display: flex;
	    align-items: stretch;
	    border-right: 1px solid #e0e0e0;
}

/* 主显示区域 */
.search-type-display {
	    display: flex;
	    align-items: center;
	    padding: 0 16px;
	    font-size: 13px;
		    /* 顶部搜索框前面的文字颜色 */
		    color: #606264;
	    cursor: pointer;
	    font-weight: 500;
		    /* 背景改为纯白色，和整体搜索框保持一致 */
		    background: #ffffff;
	    border-radius: 18px 0 0 18px;
}

.search-type-arrow {
	    font-size: 16px;
	    margin-left: 6px;
	    color: #666666;
}

/* hover / 打开状态的高亮 */
.search-type-wrapper:hover .search-type-display,
.search-type-wrapper.open .search-type-display {
	    background: linear-gradient(135deg, #edf0ff, #e5e8ff);
	    color: #222222;
}

/* 下拉菜单 */
.search-type-menu {
	    position: absolute;
	    top: 110%;
	    left: 0;
	    z-index: 1000;
	    list-style: none;
	    padding: 4px 0;
	    margin: 0;
		    min-width: 100%;
	    background-color: #ffffff;
	    border-radius: 12px;
	    box-shadow: 0 10px 30px rgba(15, 35, 95, 0.18);
	    border: 1px solid rgba(64, 84, 178, 0.08);
	    display: none;
}

.search-type-wrapper.open .search-type-menu {
	    display: block;
}

.search-type-menu li {
	    padding: 8px 16px;
	    font-size: 13px;
	    color: #555555;
	    cursor: pointer;
	    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
	    white-space: nowrap;
}

.search-type-menu li:hover {
	    background-color: #fff;
	    color: #222222;
	    padding-left: 20px;
}

.search-type-menu li.active {
		    background-color: #aeb1b5;
		    color: #ffffff;
}

/* 选中项和下拉整体圆角保持统一 */
.search-type-menu li:first-child.active {
			    border-radius: 12px 12px 0 0;
		}

.search-type-menu li:last-child.active {
			    border-radius: 0 0 12px 12px;
		}

/* 隐藏真实值 input */
.search-type-select {
	    display: none;
}

.search-box:focus-within {
    background-color: #fff;
    box-shadow: 0 0 0 1.5px rgba(99, 102, 241, 0.25);
}

.search-icon {
    padding: 8px 12px;
    color: #999999;
    font-size: 16px;
    cursor: pointer;
}

.search-input {
    padding: 8px 14px;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 13px;
    color: #333;
    min-width: 240px;
}

.search-input::placeholder {
    color: #999;
}

.search-btn {
    padding: 8px 12px;
    border: none;
    outline: none;
    background-color: transparent;
    color: #999;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-btn:hover {
    color: #6366f1;
}

.search-btn i {
    font-size: 17px;
}

/* 热门搜索区域样式 */
.hot-search {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    z-index: 1000;
}

.hot-search h4 {
    margin: 0 0 10px 0;
    font-size: 12px;
    font-weight: 500;
    color: #999;
}

.hot-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hot-search-tag {
    padding: 4px 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hot-search-tag:hover {
    background-color: #eef2ff;
    color: #6366f1;
}

.header-features {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 登录按钮 */
.header-login-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 18px;
    border-radius: 6px;
    text-decoration: none;
    background: linear-gradient(135deg, #6366f1, #2563eb);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.header-login-btn i {
    font-size: 15px;
}

.header-login-btn:hover {
    background: linear-gradient(135deg, #4f46e5, #1d4ed8);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.header-right .search-box {
    display: flex;
    align-items: center;
}

.header-right .user-info {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: 8px;
    transition: background-color 0.15s ease;
}

.header-right .user-info:hover {
    background-color: #f5f5f5;
}

.header-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.header-user-avatar i {
    font-size: 16px;
}

.header-user-main {
    display: flex;
    align-items: center;
    gap: 2px;
}

.header-user-name {
    font-size: 13px;
    color: #555;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-user-arrow {
    font-size: 14px;
    color: #bbb;
}

.header-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    padding: 4px 0;
    display: none;
    z-index: 3000;
}

.header-user.open .header-user-dropdown {
    display: block;
}

.header-user-menu-item {
    display: flex;
    align-items: center;
    padding: 9px 16px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.header-user-menu-item:hover {
    background-color: #f9fafb;
    color: #111;
}

.header-user-menu-icon {
    font-size: 16px;
    margin-right: 10px;
    color: #999;
}

.header-user-menu-item:hover .header-user-menu-icon {
    color: #6366f1;
}

.header-user-menu-label {
    flex: 1;
}

.header-feature-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.header-feature-item:hover {
    color: #6366f1;
}

.header-feature-item i {
    font-size: 16px;
    color: #bbb;
}

.header-feature-item:hover i {
    color: #6366f1;
}

/* 顶部导航分隔线 */
.header-left .header-nav::before {
    content: '';
    width: 1px;
    height: 16px;
    background-color: #e5e5e5;
    margin-right: 6px;
}

/* 右侧功能区与用户区的分隔 */
.header-features .header-login-btn,
.header-features .header-user {
    margin-left: 6px;
}

/* 独立会员登录页：整体居中布局 */
.member-login-page {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.member-login-card {
    margin: 0 auto;
}

.member-login-footer-tip {
    margin-top: 10px;
    font-size: 12px;
    color: #6B7280;
    text-align: center;
}

/* 登录弹窗样式 */
.login-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.login-modal {
    width: 360px;
    max-width: 90%;
	    background: radial-gradient(circle at top, #EEF2FF 0, #ffffff 55%, #F9FAFB 100%);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35);
	    padding: 22px 24px 20px;
}

.login-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.login-modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.login-modal-close {
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: #9CA3AF;
}

.login-modal-body {
	    margin-top: 4px;
}

.login-tabs {
	    display: inline-flex;
	    padding: 2px;
	    background: #E5E7EB;
	    border-radius: 999px;
	    margin-bottom: 16px;
}

.login-tab {
	    border: none;
	    background: transparent;
	    padding: 6px 16px;
	    font-size: 13px;
	    color: #6B7280;
	    border-radius: 999px;
	    cursor: pointer;
}

.login-tab.active {
	    background: #ffffff;
	    color: #111827;
	    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
}

.login-modal .form-group {
    margin-bottom: 14px;
}

.login-modal label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #4B5563;
}

.login-modal input[type="text"],
.login-modal input[type="password"],
.login-modal input[type="email"] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #D1D5DB;
    font-size: 14px;
}

.login-error {
    min-height: 18px;
    font-size: 13px;
    color: #DC2626;
    margin-bottom: 8px;
}

/* 注册验证码行 */
.captcha-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.captcha-img {
    height: 38px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid rgba(148, 163, 184, 0.3);
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.captcha-img:hover {
    opacity: 0.75;
}

.captcha-group label {
    display: block;
    margin-bottom: 4px;
}

.login-submit-btn {
    width: 100%;
    padding: 9px 0;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #2563EB, #4F46E5);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.login-submit-btn:hover {
    background: linear-gradient(135deg, #1D4ED8, #4338CA);
}

.login-tip {
    margin-top: 10px;
    font-size: 12px;
    color: #6B7280;
}

/* 移动端菜单按钮 */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #4b5563;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.mobile-menu-toggle:hover {
    background-color: #f3f4f6;
}

/* 移动端导航菜单 */
.mobile-nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: #ffffff;
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(15, 23, 42, 0.15);
}

.mobile-nav-menu.open {
    transform: translateX(0);
}

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #111827;
    font-size: 18px;
    font-weight: 700;
}

.mobile-nav-logo i {
    font-size: 24px;
    color: #2563eb;
}

.mobile-nav-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}

.mobile-nav-close:hover {
    background-color: #f3f4f6;
    color: #4b5563;
}

.mobile-nav-list {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    text-decoration: none;
    color: #4b5563;
    font-size: 15px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-nav-item i {
    font-size: 20px;
    color: #9ca3af;
    width: 24px;
    text-align: center;
}

.mobile-nav-item:hover {
    background-color: #f9fafb;
    color: #111827;
}

.mobile-nav-item:hover i {
    color: #2563eb;
}

.mobile-nav-footer {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mobile-nav-footer a {
    font-size: 13px;
    color: #6b7280;
    text-decoration: none;
}

.mobile-nav-footer a:hover {
    color: #2563eb;
}

.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* 屏幕阅读器专用类 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 网站底部 */
.site-footer {
    background-color: #fafafa;
    border-top: 1px solid #f0f0f0;
    padding: 16px 24px;
    margin-top: auto;
}

.footer-content {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
}

.footer-disclaimer {
    max-width: 800px;
    margin: 0 auto 10px;
    font-size: 12px;
    color: #aaa;
    line-height: 1.7;
    text-align: center;
}

.footer-copyright {
    font-size: 12px;
    color: #999;
    margin: 0 0 4px;
}

.footer-links {
    font-size: 12px;
    color: #bbb;
    margin: 0;
}

.footer-links a {
    color: #999;
    text-decoration: none;
    margin: 0 6px;
}

.footer-links a:hover {
    color: #2563eb;
}

/* 侧边栏底部卡片样式 */
.sidebar-bottom-card {
    display: flex;
    gap: 24px;
    padding: 16px 20px;
    margin: 0;
    border: none;
    border-top: 1px solid #f0f0f0;
    border-radius: 0;
    background: transparent;
    justify-content: center;
}

.sidebar-bottom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-bottom-btn:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

#sidebar.collapsed .sidebar-bottom-card {
    padding: 12px 8px;
    flex-direction: column;
    gap: 8px;
}

#sidebar.collapsed .sidebar-bottom-btn {
    width: 36px;
    height: 36px;
}

/* 网站信息面板样式 */
.site-info-panel {
    position: absolute;
    bottom: 70px;
    left: 12px;
    width: calc(100% - 24px);
    max-width: 200px;
    background: #ffffff;
    border: 1px solid #eee;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#sidebar.collapsed .site-info-panel {
    left: 8px;
    width: 200px;
}

.site-info-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.site-info-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.site-info-close {
    background: transparent;
    border: none;
    font-size: 16px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.site-info-close:hover {
    background: #f0f0f0;
    color: #666;
}

.site-info-content {
    flex: 1;
    padding: 12px 14px;
    overflow-y: auto;
}

.site-info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.site-info-list li {
    margin-bottom: 0;
}

.site-info-item {
    display: block;
    padding: 8px 0;
    color: #666;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
    border-bottom: 1px solid #f5f5f5;
}

.site-info-item:hover {
    color: #2563eb;
}

.site-info-social {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: #f5f5f5;
    border-radius: 4px;
    color: #666;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.2s ease;
}

.social-link:hover {
    background: #2563eb;
    color: #fff;
}

.social-link i {
    margin-right: 4px;
    font-size: 12px;
}

.site-info-company {
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    font-size: 11px;
    color: #999;
    line-height: 1.6;
}

.site-info-company p {
    margin: 0 0 3px 0;
}

/* 内容区域 */
#content {
		flex: 1;
		padding: 16px 24px;
		background-color: #f5f7fa;
		max-width: 1440px;
		margin: 0 auto;
		width: 100%;
	}

/* 图片转AI提示词新设计模块 */
.new-design-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 0;
    background-color: #F5F7FA;
    width: 100%;
}

.new-design-header {
    text-align: center;
    margin-bottom: 24px;
}

.new-design-title {
    font-family: 'PingFang SC', '思源黑体', sans-serif;
		    font-size: 45px;
	    font-weight: bold;
			    color: #2A6EEC;
    line-height: 36px;
    margin: 0;
}

.new-design-subtitle {
		    margin: 30px 0;
		    font-size: 14px;
			    color: #787a7d;
		    line-height: 1.6;
		}

.new-design-main {
    background-color: #FFFFFF;
	    border-radius: 12px;
    border: 1px solid #E0E0E0;
    padding: 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 260px;
    width: 66.67%;
    box-sizing: border-box;
    margin: 0 auto;
    align-items: stretch;
}

.new-design-upload-section {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 0;
}

.new-design-left {
    flex: 0 0 auto;
}

.new-design-add-container {
    position: relative;
    width: 100px;
    height: 160px;
}

.new-design-add-btn {
    width: 100px;
    height: 160px;
    background-color: #FFFFFF;
    border: 1px dashed #E0E0E0;
	    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.new-design-add-btn:hover {
    background-color: #F0F2F5;
    border-color: #D0D0D0;
}

.new-design-add-btn i {
    font-size: 20px;
    color: #666666;
    line-height: 1.5px;
}

.new-design-add-btn span {
    font-family: 'PingFang SC', '思源黑体', sans-serif;
    font-size: 14px;
	    color: #4f4a4b;
    line-height: 1.4;
}

.image-preview-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    border: 1px dashed #E0E0E0;
    border-radius: 4px;
    overflow: hidden;
    z-index: 3;
}

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

.new-design-middle {
    flex: 1;
}

.new-design-input-container {
    height: 160px;
    border: 1px dashed #E0E0E0;
	    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background-color: #FFFFFF;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.new-design-input-container.drag-over {
    border-color: #2A6EED;
    background-color: #F0F7FF;
}

.new-design-input {
    width: 100%;
    height: 100%;
    border: none;
	    padding: 12px 16px;
    font-family: 'PingFang SC', '思源黑体', sans-serif;
    font-size: 14px;
    color: #666666;
    background-color: transparent;
    outline: none;
	    text-align: left;
	    line-height: 1.4;
	    box-sizing: border-box;
	    resize: none;
	    display: none; /* 默认隐藏，只在有结果时展示 */
}

.new-design-input::placeholder {
    color: #666666;
}

/* 系统提示文字：在未生成结果时，上下左右居中显示 */
.new-design-system-text {
	    padding: 0 24px;
    font-family: 'PingFang SC', '思源黑体', sans-serif;
    font-size: 14px;
    color: #666666;
    text-align: center;
    pointer-events: none;
    white-space: pre-wrap;
	    max-width: 80%;
}

/* 当有生成结果时，提示词从左上自然显示，系统文字隐藏 */
.new-design-input-container.has-result {
    align-items: flex-start;
    justify-content: flex-start;
}

.new-design-input-container.has-result .new-design-input {
	    display: block;
}

.new-design-input-container.has-result .new-design-system-text {
    display: none;
}

.new-design-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px !important;
    margin-bottom: 15px !important;
    padding: 0 24px;
    box-sizing: border-box;
}

.new-design-dropdown {
    flex: 0 0 auto;
}

.new-design-select {
    height: 36px;
    padding: 0 16px;
    border: 1px solid #E0E0E0;
	    border-radius: 10px;
    font-family: 'PingFang SC', '思源黑体', sans-serif;
    font-size: 14px;
	    color: #4f4a4b;
    background-color: #FFFFFF;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    transition: all 0.2s ease;
}

.new-design-select:focus {
    border-color: #2A6EED;
    box-shadow: 0 0 0 2px rgba(42, 110, 237, 0.1);
}

/* 
 c
 c
 c
 c
 c
 c
 图
 c
 c
 c
 c
 c
 c









转
 c
 c
 c提示词底部 “大模型” 选择下拉，沿用顶部搜索类型下拉的视觉风格 */
.model-type-wrapper {
	    position: relative;
	    height: 36px;
	    display: flex;
	    align-items: stretch;
}

.model-type-display {
	    display: flex;
	    align-items: center;
	    padding: 0 16px;
	    font-size: 14px;
	    color: #787a7d;
	    cursor: pointer;
	    font-weight: 500;
	    background: linear-gradient(135deg, #f8f9ff, #f1f3ff);
	    border-radius: 18px;
}

.model-type-arrow {
	    font-size: 16px;
	    margin-left: 6px;
	    color: #666666;
}

.model-type-wrapper:hover .model-type-display,
.model-type-wrapper.open .model-type-display {
	    background: linear-gradient(135deg, #edf0ff, #e5e8ff);
	    color: #787a7d;
}

/* 大模型下拉菜单 */
.model-type-menu {
	    position: absolute;
	    top: 110%;
	    left: 0;
	    z-index: 1000;
	    list-style: none;
	    padding: 4px 0;
	    margin: 0;
	    min-width: 100%;
	    background-color: #ffffff;
	    border-radius: 12px;
	    box-shadow: 0 10px 30px rgba(15, 35, 95, 0.18);
	    border: 1px solid rgba(64, 84, 178, 0.08);
	    display: none;
}

.model-type-wrapper.open .model-type-menu {
	    display: block;
}

.model-type-menu li {
	    padding: 8px 16px;
	    font-size: 13px;
	    color: #555555;
	    cursor: pointer;
	    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
	    white-space: nowrap;
}

.model-type-menu li:hover {
	    background-color: #f5f6ff;
	    color: #222222;
	    padding-left: 20px;
}

.model-type-menu li.active {
	    background-color: #aeb1b5;
	    color: #ffffff;
}

		/* 选中项与弹层圆角保持一致（支持多条和仅一条两种场景） */
		/* 多条时：第一条和最后一条分别只处理上圆角 / 下圆角 */
		.model-type-menu li:first-child.active:not(:last-child) {
			    border-radius: 12px 12px 0 0;
		}
		
		.model-type-menu li:last-child.active:not(:first-child) {
			    border-radius: 0 0 12px 12px;
		}

		/* 只有一条时：上下左右都是圆角，灰色块和白色背景完全重合 */
		.model-type-menu li:only-child.active {
			    border-radius: 12px;
		}

/* 隐藏真实值 input */
.model-type-select {
	    display: none;
}

.new-design-language {
    display: flex;
	    /* 电脑端语言切换按钮之间的水平间距调大一些，视觉上更舒展 */
	    gap: 18px;
    flex: 0 0 auto;
}

.new-design-lang-btn {
    height: 36px;
    padding: 0 16px;
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
	    border-radius: 999px;
    font-family: 'PingFang SC', '思源黑体', sans-serif;
    font-size: 14px;
    color: #666666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.new-design-lang-btn:hover {
    background-color: #F0F2F5;
    border-color: #D0D0D0;
}

.new-design-lang-btn.active {
    background-color: #2A6EED;
    color: #FFFFFF;
    border-color: #2A6EED;
}

.new-design-controls {
    display: flex;
    gap: 8px;
}

.new-design-control-btn {
    width: 36px;
    height: 36px;
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
	    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.new-design-control-btn:hover {
    background-color: #F0F2F5;
    border-color: #D0D0D0;
}

.new-design-control-btn i {
    font-size: 16px;
    color: #666666;
    line-height: 1.5px;
}

.new-design-generate {
    flex: 0 0 auto;
}

.new-design-generate-btn {
    height: 36px;
    padding: 0 24px;
    background-color: #2A6EED;
    color: #FFFFFF;
    border: none;
	    border-radius: 999px;
    font-family: 'PingFang SC', '思源黑体', sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.new-design-generate-btn:hover {
    background-color: #1E5BCC;
    box-shadow: 0 2px 8px rgba(42, 110, 237, 0.3);
}

.new-design-generate-btn:active {
    transform: scale(0.98);
}

.new-design-generate-btn:disabled {
    background-color: #F0F0F0;
    color: #999999;
    cursor: not-allowed;
}

/*  e f
6
8
60
6
b
8
2
7
6
f
6
7
8
7
50
7
8
3
2
5
b0
6
70
9
8
8
7
f
b: 0
6
8
6
7
6
9
8
b
e
b
e */
.new-design-view-detail {
    flex: 0 0 auto;
}

.view-prompt-detail-btn {
	    width: 160px;
	    height: 42px;
	    padding: 0;
	    background-color: #1f77fa;
	    color: #ffffff;
	    border: none;
	    border-radius: 999px;
	    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.view-prompt-detail-btn:hover {
	    background-color: #1762d6;
}

/* 结果区域样式 */
.new-design-result {
    margin-top: 24px;
    background-color: #FFFFFF;
	    border-radius: 12px;
    border: 1px solid #E0E0E0;
    overflow: hidden;
}

.new-design-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #F5F7FA;
    border-bottom: 1px solid #E0E0E0;
}

.new-design-result-header h3 {
    margin: 0;
    font-family: 'PingFang SC', '思源黑体', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #1A1A1A;
    line-height: 1.5;
}

.new-design-copy-btn {
    background-color: #2A6EED;
    color: #FFFFFF;
    border: none;
	    border-radius: 999px;
    padding: 8px 16px;
    font-family: 'PingFang SC', '思源黑体', sans-serif;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.new-design-copy-btn:hover {
    background-color: #1E5BCC;
}

.new-design-copy-btn i {
    font-size: 16px;
    line-height: 1.5px;
}

	.new-design-result-content {
	    padding: 8px 16px;
	    background-color: transparent;
	}
	
	.new-design-result-content pre {
	    background-color: #F5F7FA;
	    padding: 16px;
		    border-radius: 10px;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.4;
	    color: #4f4a4b;
    margin: 0;
}

/* 提示词模板分类区 */
.new-design-templates {
    margin-top: 32px;
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
}

.templates-title {
    font-family: 'PingFang SC', '思源黑体', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #1A1A1A;
    margin-bottom: 16px;
}

.section-title-icon {
	    margin-right: 8px;
	    font-size: 20px;
	    vertical-align: -2px;
	    color: #4F46E5;
	}

.templates-title-with-bar {
	    position: relative;
	    display: inline-flex;
	    align-items: center;
	    padding-left: 10px;
}

.templates-title-with-bar::before {
	    content: '';
	    position: absolute;
	    left: 0;
	    width: 3px;
	    height: 1.2em;
	    border-radius: 999px;
	    background-color: #3B82F6;
}

.templates-grid {
    display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	/* 行高根据内容自适应，避免卡片被压扁、文字被遮挡 */
	grid-auto-rows: auto;
	gap: 16px;
	/* 允许根据项目数量自然增高，不再强行限制高度 */
	max-height: none;
	width: 100%;
	box-sizing: border-box;
}

/* ======================= */
/* 模板详情页：主卡片与详情块 */
/* ======================= */

/* 整个模板详情主卡片：复用作品详情的卡片感 */
.template-detail-main .tpl-detail-main-card {
	background-color: #ffffff;
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
	padding: 18px 18px 20px;
}

/* 模板详情正文整体：统一文字颜色 + 字体平滑，避免“纯黑 + 锯齿感” */
.template-detail-body {
    /* 深灰色，而不是纯黑，观感更柔和 */
    color: #374151;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 单个区块通用样式 */
.template-detail-body .tpl-detail-section {
    margin-bottom: 18px;
}

.template-detail-body .tpl-detail-section-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    /* 颜色继承自 .template-detail-body，保持整体统一 */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 标题前的小色点，和整体主题色一致 */
.template-detail-body .tpl-detail-section-title::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(135deg, #2A6EED, #1B89E3);
}

	/* 使用提示 / 说明：与下方正文保持左右对齐，不再做成单独“卡片” */
	.template-detail-body .tpl-detail-usage-row {
		/* 作为普通块级容器，让内部正文与 .tpl-detail-body 文本左边缘对齐 */
		display: block;
		padding: 0;
		margin-bottom: 10px;
		border-radius: 0;
		background-color: transparent; /* 继承主卡片白色背景 */
	}

.template-detail-body .tpl-detail-usage-label {
	font-size: 13px;
	font-weight: 500;
	color: #1D4ED8;
	white-space: nowrap;
}

.template-detail-body .tpl-detail-usage-text {
	font-size: 13px;
	line-height: 1.7;
	/* 颜色继承自 .template-detail-body，统一正文色 */
}

/* 模板详情正文：普通段落样式，略大行高便于阅读 */
.template-detail-body .tpl-detail-body.tpl-detail-guide {
	font-size: 13px;
	line-height: 1.8;
}

@media (max-width: 768px) {
	.template-detail-main .tpl-detail-main-card {
		padding: 14px 12px 16px;
	}
}

/* 顶部：栏目 + 标签小圆角按钮区域 */
.tpl-detail-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.tpl-meta-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 14px;
	border-radius: 999px;
	border: 1px solid rgba(37, 99, 235, 0.65);
	background-color: #FFFFFF;
	font-size: 12px;
	font-weight: 500;
	color: #2563EB;
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
}

@media (max-width: 768px) {
	.tpl-detail-hero-meta {
		margin-bottom: 8px;
	}

	.tpl-meta-chip {
		padding: 3px 10px;
		font-size: 11px;
	}
}

.template-category {
		background-color: #FFFFFF;
		border: 1px solid #E0E0E0; /* 默认灰色边框，下面各颜色类会覆盖 */
		border-radius: 8px;
		/* 垂直方向减少 12px 高度：上下各减 6px */
		padding: 6px 12px;
		cursor: pointer;
		transition: all 0.2s ease;
		display: flex;
		flex-direction: column;
	}

/* 首页顶部“图片转提示词分类”区域的卡片整体再降低 3px 高度（上下各减 1.5px） */
.new-design-container .new-design-templates:first-of-type .template-category {
		padding-top: 4.5px;
		padding-bottom: 4.5px;
}

.template-category:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 紧凑版分类卡片：无描述文字，高度更小 */
.template-category--compact {
    padding: 8px 12px;
}
.template-category--compact .template-header {
    margin-bottom: 0;
}
.template-category--compact .template-desc {
    display: none;
}

.template-category.blue {
	border-color: #1890FF;
	border-left-width: 4px;
}

.template-category.purple {
	border-color: #722ED1;
	border-left-width: 4px;
}

.template-category.pink {
	border-color: #EB2F96;
	border-left-width: 4px;
}

.template-category.light-blue {
	border-color: #52C41A;
	border-left-width: 4px;
}

.template-category.violet {
	border-color: #9254DE;
	border-left-width: 4px;
}

.template-category.green {
	border-color: #52C41A;
	border-left-width: 4px;
}

.template-category.orange {
	border-color: #FA8C16;
	border-left-width: 4px;
}

.template-category.teal {
	border-color: #13C2C2;
	border-left-width: 4px;
}

.template-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.template-tag {
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #1890FF;
    padding: 2px 6px;
    border-radius: 2px;
}

.template-name {
    font-family: 'PingFang SC', '思源黑体', sans-serif;
    font-size: 14px;
    font-weight: bold;
	    color: #4f4a4b;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	    margin-top: 3px; /* 让栏目名称在卡片内整体下移一点 */
}

.template-badge {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 2px;
    white-space: nowrap;
    background-color: #F0F5FF;
    color: #1890FF;
}

.template-badge.flow {
    background-color: #FFF1F0;
    color: #FF4D4F;
}

.template-badge.new {
    background-color: #F6FFED;
    color: #52C41A;
}

.template-badge.hot {
    background-color: #FFF7E6;
    color: #FA8C16;
}

.template-icon {
	font-size: 18px;
	color: #999999; /* 默认兜底颜色 */
		margin-top: 3px; /* 与栏目名称一起在卡片内下移 3px */
}

/* 根据栏目颜色类，给图标不同的主题色 */
.template-category.blue .template-icon {
	color: #1890FF;
}

.template-category.purple .template-icon {
	color: #722ED1;
}

.template-category.pink .template-icon {
	color: #EB2F96;
}

.template-category.light-blue .template-icon {
	color: #52C41A;
}

.template-category.violet .template-icon {
	color: #9254DE;
}

.template-category.green .template-icon {
	color: #52C41A;
}

.template-category.orange .template-icon {
	color: #FA8C16;
}

.template-category.teal .template-icon {
	color: #13C2C2;
}

.template-desc {
	font-family: 'PingFang SC', '思源黑体', sans-serif;
	font-size: 12px;
	color: #666666;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .header-inner {
        padding: 0 20px;
    }

    .header-nav-item span {
        display: none;
    }

    .header-nav-item {
        padding: 8px 10px;
    }

    .header-center {
        max-width: 280px;
    }
}

@media (max-width: 1024px) {
    .header-feature-item span {
        display: none;
    }

    .header-feature-item {
        padding: 8px;
    }

    .header-nav {
        display: none;
    }

    .header-center {
        flex: 1;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .header-features {
        gap: 4px;
    }

    .header-center {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .header-feature-item:not(#header-user-info) {
        display: none;
    }

    .header-login-btn {
        display: flex;
        padding: 6px 12px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .sidebar-toggle {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    #sidebar {
        position: fixed;
        left: -220px;
        z-index: 1000;
        height: 100vh;
    }

    #sidebar.open {
        left: 0;
    }
}

@media (max-width: 768px) {
    #sidebar {
        width: 100%;
        position: absolute;
        left: -100%;
        z-index: 999;
    }

    #sidebar.open {
        left: 0;
    }

    .sidebar-toggle {
        left: 0;
        top: 20px;
        transform: none;
        border-radius: 0 5px 5px 0;
    }

    #top-header {
        padding: 15px 20px;
    }

    .header-right .search-box {
        display: none;
    }

	    #content {
	        padding: 8px;
		    }
}

@media (max-width: 768px) {
    .new-design-container {
	        padding: 16px 8px;
	        margin-top: 8px;
	    }

	    /* 手机端：仅针对头部搜索框里的“提示词作品/模板”下拉做精简
	       不影响首页其他使用 .template-* 的卡片样式 */
	    .search-box .search-type-wrapper {
	        width: auto;
	        border-right: none;
	    }

	    .search-box .search-type-display {
	        padding: 0 10px;
	        border-radius: 18px;
	    }

	    .search-box .search-type-label {
	        display: none;
	    }

	    .new-design-header {
	        margin-bottom: 16px;
	    }

	    .new-design-title {
	        font-size: 24px;
	        line-height: 1.3;
	    }

	    .new-design-subtitle {
	        margin: 8px 0 0;
	        font-size: 13px;
	    }

	    .new-design-main {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }

    .new-design-add-btn {
        width: 100%;
    }

	    	.new-design-footer {
	        /* 手机端：底部区域改为可换行的弹性布局，方便重新排布各控件 */
	        flex-direction: row;
	        flex-wrap: wrap;
	        justify-content: center;
	        align-items: center;
	        row-gap: 8px;
	        column-gap: 8px;
	    }

	    /* 手机端：底部控件的排列顺序与宽度 */
	    .new-design-dropdown {
	        order: 1;
	        width: 100%; /* 模型下拉单独占一行 */
	    }

	    .new-design-language {
	        order: 2;
	        width: 100%; /* 语言按钮一行铺满，内部再居中 */
	        justify-content: center;
	        flex-wrap: wrap;
	    }

	    .new-design-controls,
	    .new-design-generate {
	        order: 3;
	        display: flex;
	        align-items: center;
	    }

	    .new-design-controls {
	        flex: 0 0 auto; /* 保持清空按钮为小图标 */
	    }

	    .new-design-generate {
	        flex: 1 1 auto; /* 生成按钮占据剩余空间，与清空按钮同一行 */
	    }

	    .new-design-generate-btn {
	        width: 100%;
	    }

	    .new-design-view-detail {
	        order: 4;
	        width: 100%; /* “查看提示词详细参数”按钮在最下方单独一行 */
	    }

	    	.new-design-templates {
	        margin-top: 24px;
	        padding: 0;
	    }

	    /* 模型下拉内部的选择框仍保持 100% 宽度 */
	    .new-design-dropdown .model-type-wrapper,
	    .new-design-select {
	        width: 100%;
	    }

	    .templates-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .template-category {
        min-width: 150px;
    }
}

/* =============================
 * 提示词作品列表与详情页样式
 * ============================= */

.prompt-page {
	    /* 减小顶部留白，让栏目页头部与导航之间的空白区域更紧凑 */
	    padding: 0 0 24px;
	    max-width: 1440px;
	    margin: 0 auto;
	    width: 100%;
}


.prompt-page-header {
	margin-bottom: 15px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
	border-radius: 14px;
	padding: 28px 32px;
	position: relative;
	overflow: hidden;
}

/* 装饰光效 */
.prompt-page-header::before {
	content: '';
	position: absolute;
	top: -40%;
	right: -10%;
	width: 280px;
	height: 280px;
	background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.prompt-page-header::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: 5%;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.prompt-page-title-wrap {
	position: relative;
	z-index: 1;
}

.prompt-page-title {
	font-size: 22px;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 6px;
	letter-spacing: 0.5px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.prompt-page-subtitle {
	font-size: 13px;
	color: rgba(255,255,255,0.85);
	line-height: 1.5;
}

/* 列表页筛选条 */
.prompt-filter-bar {
	    /* 筛选条与下方作品列表之间的垂直间距 15px */
	    margin-bottom: 15px;
	    background-color: #ffffff;
    border-radius: 12px;
    padding: 10px 14px;
	    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
	    font-size: 14px;
}

.prompt-filter-options-with-featured {
	    align-items: center;
}

.prompt-filter-inline-label {
	    margin-right: 4px;
	    color: #6b7280;
}

.prompt-filter-inline {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 6px;
	    margin-right: 12px;
}

.prompt-filter-row {
	    position: relative;
	    display: flex;
	    align-items: center;
	    flex-wrap: nowrap;
	    padding: 6px 0;
	    border-bottom: 1px dashed #e5e7eb;
		}

.prompt-filter-row:last-child {
	    border-bottom: none;
	}

.prompt-filter-label {
	    display: flex;
	    align-items: center;
	    flex: 0 0 auto;
	    width: 80px;
	    color: #6b7280;
	    font-weight: 500;
	}

.prompt-filter-icon {
	    margin-right: 6px;
	    color: #9ca3af;
	    font-size: 14px;
	}

.prompt-filter-options {
	    flex: 1;
	    display: flex;
	    flex-wrap: nowrap;
	    gap: 8px;
	    overflow: hidden;
	    white-space: nowrap;
	    min-width: 0;
	}

.prompt-filter-row.is-open .prompt-filter-options {
	    flex-wrap: wrap;
	    white-space: normal;
	    overflow: visible;
	}

.prompt-filter-toggle {
	    flex: 0 0 auto;
	    margin-left: 8px;
	    color: #9ca3af;
	    cursor: pointer;
	    display: flex;
	    align-items: center;
	}

.prompt-filter-toggle-icon {
	    font-size: 20px;
	    color: #FC7300;
	    transition: transform 0.2s ease;
	}

/* 强制覆盖 MDI 默认 ::before 字号，让下拉图标按 20px 显示 */
.prompt-filter-toggle-icon.mdi:before {
	    font-size: 20px;
	}

.prompt-filter-row.is-open .prompt-filter-toggle-icon {
	    transform: rotate(180deg);
	}

.prompt-filter-link {
	    display: inline-block;
	    padding: 0 4px;
	    color: #4b5563;
	    text-decoration: none;
	    border-bottom: 2px solid transparent;
	    border-radius: 0;
	    background-color: transparent;
	}

.prompt-filter-link:hover {
	    color: #FC7300;
	}

.prompt-filter-link.active {
	    color: #FC7300;
	    border-bottom-color: #F25D07;
	}

.prompt-filter-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.prompt-search-input {
    flex: 1;
    min-width: 0;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    padding: 0 12px;
    font-size: 13px;
}

.prompt-search-btn {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: none;
    background-color: #111827;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

	.prompt-search-btn:hover {
	    background-color: #020617;
	}

	/* =============================
	 * 提示词作品列表：JS 控制的 Masonry 列布局
	 * ============================= */
	#prompt-masonry {
	    display: flex;
	    align-items: flex-start;
	    gap: 16px;
	}

	/* 单列容器：每列里垂直堆叠若干 .prompt-card */
	.prompt-masonry-column {
	    flex: 1 1 0;
	    min-width: 0;
	}

	/* 旧的 .prompt-masonry-page 多列布局仅作为兜底（无 JS 时），不再参与实际排列 */
	.prompt-masonry-page {
	    column-count: 6;
	    column-gap: 16px;
	}

	@media (max-width: 1200px) {
	    .prompt-masonry-page {
	        column-count: 3;
	    }
	}

	@media (max-width: 992px) {
	    .prompt-masonry-page {
	        column-count: 2;
	    }
	}

	@media (max-width: 600px) {
	    .prompt-masonry-page {
	        column-count: 1;
	    }
	}

	.prompt-card {
    display: block;
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    margin-bottom: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.prompt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

.prompt-card-image {
	    position: relative;
	    width: 100%;
	    /* 不再固定高度，让图片按照原始纵横比自适应高度，配合列布局形成真正的瀑布流效果 */
	    background-color: #f3f4f6;
	}

.prompt-card-image img {
	    width: 100%;
	    height: auto;
	    display: block;
	    /* 使用 contain/默认行为，保证不裁剪图片内容和高度 */
	    object-fit: contain;
	}

.prompt-card-no-image {
    padding: 40px 16px;
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
    background: linear-gradient(135deg, #f9fafb, #eef2ff);
}

.prompt-card-body {
    padding: 12px 14px 14px;
}

.prompt-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}

.prompt-card-summary {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    max-height: 3em;
    overflow: hidden;
}

.prompt-card-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
}

.prompt-card-meta-item::before {
    content: '· ';
}

/* 首页图转提示词作品列表：卡片式，一行 4 个，不要图片 */
.prompt-card--list {
	    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}
.prompt-card--list .prompt-card-body {
	    padding: 12px 12px 10px;
}
.prompt-grid {
	    display: grid;
	    grid-template-columns: repeat(4, minmax(0, 1fr));
	    gap: 12px;
}
.prompt-grid-item {
	    display: block;
	    padding: 10px 12px;
	    border-radius: 10px;
	    text-decoration: none;
	    color: inherit;
	    background-color: #ffffff;
	    border: 1px solid #e5e7eb;
	    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
	    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.prompt-grid-item:hover {
	    transform: translateY(-1px);
	    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
	    border-color: #d1d5db;
}
.prompt-grid-line {
	    display: flex;
	    align-items: center;
}
.prompt-grid-title {
		    flex: 1;
		    min-width: 0;
		    font-size: 14px;
		    font-weight: 500;
		    white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		}
.prompt-grid-category {
	    margin-left: 8px;
	    padding: 0 6px;
	    font-size: 12px;
	    color: #f97316;
	    background-color: #fff7ed;
	    border-radius: 999px;
	    white-space: nowrap;
	    text-align: right;
}
	/*  */
	.prompt-grid-meta {
		    margin-top: 4px;
		    display: flex;
		    flex-wrap: wrap;
		    align-items: center;
		    gap: 6px;
		    font-size: 12px;
		    color: #6b7280;
		}
	.prompt-grid-meta-item {
		    display: inline-flex;
		    align-items: center;
		}
	.prompt-grid-meta-tag {
		    margin-left: auto;
		    padding: 0 6px;
		    border-radius: 999px;
		    background: rgba(148, 163, 184, 0.18);
		    color: #4b5563;
		    max-width: 100%;
		    white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		}
@media (max-width: 1024px) {
	    .prompt-grid {
	        grid-template-columns: repeat(3, minmax(0, 1fr));
	    }
}
@media (max-width: 768px) {
	    .prompt-grid {
	        grid-template-columns: repeat(2, minmax(0, 1fr));
	    }
}
@media (max-width: 480px) {
	    .prompt-grid {
	        grid-template-columns: repeat(1, minmax(0, 1fr));
	    }
}

.prompt-loading,
.prompt-empty,
.prompt-error {
    margin-top: 16px;
    font-size: 13px;
}

.prompt-loading {
    color: #4b5563;
}

.prompt-empty {
    color: #9ca3af;
}

.prompt-error {
    color: #dc2626;
}

/* 详情页 */

.prompt-detail-page {
		    /* 与栏目列表页统一：顶部不再额外留白，只在底部留出 24px 间距 */
		    padding: 0 0 24px;
		    max-width: 1440px;
		    margin: 0 auto;
		    width: 100%;
		}

.prompt-detail-header {
	    /* 顶部与主内容之间的间距缩小为 8px */
	    margin-bottom: 8px;
}

.prompt-back-link {
    font-size: 13px;
    color: #4b5563;
    text-decoration: none;
}

.prompt-back-link:hover {
    color: #111827;
}

.prompt-detail-body {
		    	display: flex;
		    	gap: 8px; /* 调整内容区与右侧栏之间的间距为 8px */
		    	align-items: stretch;
		    	/* 占满可用宽度，左右间隙由外层 #content 的 padding 控制（统一为 8px） */
		    	width: 100%;
			}

/* 详情页左侧主内容列 */
.prompt-detail-main-column {
	    /* 自适应占满剩余宽度，让左侧主内容 + 右侧推荐栏一起铺满页面 */
	    flex: 1 1 0;
	    min-width: 0;
	}

.prompt-detail-article {
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    padding: 18px 18px 20px;
}

	/* 详情页下方：相关作品网格卡片 */
	.prompt-detail-related-section {
	    margin-top: 16px;
	    background-color: #ffffff;
	    border-radius: 14px;
	    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
	    padding: 14px 14px 16px;
	}

	.prompt-detail-related-header h2 {
	    font-size: 16px;
	    margin: 0 0 10px;
	    color: #111827;
	}

	.prompt-detail-related-grid {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 10px;
	}

	.prompt-detail-related-item {
	    display: flex;
	    flex-direction: column;
	    text-decoration: none;
	    border-radius: 10px;
	    overflow: hidden;
	    background-color: #f9fafb;
	    flex: 0 0 calc(20% - 8px); /* PC 端一行 5 个，2 行最多 10 个 */
	    color: #111827;
	    transition: background-color 0.15s ease, transform 0.15s ease;
	}

	.prompt-detail-related-item:hover {
	    background-color: #f3f4f6;
	    transform: translateY(-1px);
	}

	.prompt-detail-related-thumb {
		    width: 100%;
		    height: 220px; /* 固定高度 220px */
		    position: relative;
		    background-color: #e5e7eb;
	}

	.prompt-detail-related-thumb img {
	    position: absolute;
	    inset: 0;
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	}

	.prompt-detail-related-info {
	    padding: 8px 8px 6px;
	}

	.prompt-detail-related-title {
	    font-size: 13px;
	    font-weight: 500;
	    margin-bottom: 4px;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}

/* =============================
 * 会员中心 / 用户中心总览样式
 * ============================= */

/* 用户中心总页 */
.user-center-page {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	padding: 0 0 24px;
}

.user-center-top-banner {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 16px;
	background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #22c1c3 100%);
	border-radius: 12px;
	padding: 20px 24px;
	color: #ffffff;
	box-shadow: 0 6px 18px rgba(15,23,42,0.12);
}

.user-center-top-main {
	display: flex;
	flex: 1;
	gap: 16px;
	align-items: center;
}

.user-center-user-summary {
	display: flex;
	align-items: center;
	gap: 12px;
}

.user-center-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 20px;
}

.user-center-user-name-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 2px;
}

.user-center-user-name {
	font-size: 18px;
	font-weight: 600;
}

.user-center-user-tag {
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255,255,255,0.18);
	backdrop-filter: blur(6px);
}

.user-center-user-subtitle {
	font-size: 13px;
	opacity: 0.92;
}

.user-center-user-meta {
	font-size: 12px;
	opacity: 0.9;
}

.user-center-top-stats {
	display: flex;
	gap: 10px;
}

.user-center-top-stat-item {
	min-width: 120px;
	background: rgba(255,255,255,0.12);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 12px;
	backdrop-filter: blur(4px);
}

.user-center-top-stat-item .stat-label {
	opacity: 0.9;
}

.user-center-top-stat-item .stat-value {
	font-size: 18px;
	font-weight: 600;
	margin: 2px 0;
}

.user-center-top-stat-item .stat-desc {
	opacity: 0.85;
}

.user-center-top-extra {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
}

.user-center-level-badge {
	background: rgba(15,23,42,0.16);
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
}

.user-center-level-badge .level-label {
	opacity: 0.85;
	margin-right: 4px;
}

.user-center-level-badge .level-value {
	font-weight: 600;
}

.user-center-top-btn {
	margin-top: 8px;
	padding: 8px 18px;
	border-radius: 8px;
	border: none;
	background: rgba(255,255,255,0.2);
	color: #fff;
	font-size: 13px;
	text-decoration: none;
	font-weight: 500;
	backdrop-filter: blur(4px);
	transition: all 0.2s ease;
	white-space: nowrap;
}

.user-center-top-btn:hover {
	background: rgba(255,255,255,0.3);
}

.user-center-layout {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	width: 100%;
}

.user-center-main-column {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

	/* 会员中心主列：当前会员状态与推荐积分套餐之间的间距调为 8px，更紧凑一些 */
	.user-vip-page .user-center-main-column {
		gap: 8px;
	}

	/* 会员中心：顶部“会员中心”标题区域使用卡片背景 */
	.user-vip-page .page-header {
		margin: 0 0 8px;
		padding: 14px 18px;
		border-radius: 12px;
		background: linear-gradient(180deg, #f9fafb, #ffffff);
		box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
	}

	.user-vip-page .page-header h1 {
		margin: 0 0 4px;
		font-size: 20px;
		font-weight: 600;
		color: #111827;
	}

	.user-vip-page .page-header p {
		margin: 0;
		font-size: 13px;
		color: #4b5563;
	}

/* 右侧栏：固定宽度 280px */
.user-center-side-column {
	flex: 0 0 280px;
	max-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.user-center-section {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(15,23,42,0.06);
	padding: 16px 18px;
}

/* 嵌套的 section 去除多余的卡片样式，避免双重 padding */
.user-center-section .user-center-section {
	box-shadow: none;
	background: transparent;
	padding: 0;
	border-radius: 0;
}

/* 会员中心："当前会员状态" 与 "推荐积分套餐" 两个卡片之间间距 8px */
.user-vip-page #user-vip-authed > .user-center-section + .user-center-section {
	margin-top: 8px;
}

.user-center-section-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 12px;
}

.user-center-section-header h2 {
	font-size: 15px;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0;
}

.user-center-section-header .section-subtitle {
	font-size: 12px;
	color: #6b7280;
}

.section-link {
	font-size: 12px;
	color: #4f46e5;
	text-decoration: none;
}

.user-center-metric-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}

.metric-card {
	border-radius: 10px;
	background: #f9fafb;
	padding: 12px 14px 10px;
	min-width: 0;
}

/* 会员中心：积分套餐列表（宽度自适应 + 单独美化） */
.user-vip-packages-grid {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.user-vip-package-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 12px;
	background: #ffffff;
	border: 1px solid rgba(59, 130, 246, 0.18);
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	overflow: visible;
}

.user-vip-package-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
	border-color: rgba(59, 130, 246, 0.32);
}

.user-vip-package-name {
	font-weight: 600;
	color: #111827;
	white-space: nowrap;
}

	.user-vip-package-line {
		margin-top: 4px;
	}

	/* 推荐积分套餐卡片内主数值区：整体字号下调两级，并拆分为两行 */
	.metric-value.user-vip-package-line {
		font-size: 16px;
		line-height: 1.5;
	}

	.user-vip-package-main-text {
		font-size: 16px;
		white-space: nowrap;
	}

	.user-vip-package-bonus-text {
		margin-top: 2px;
		font-size: 14px;
		color: #ef4444; /* 红色突出“赠送” */
	}

/* 价格数字单独突出颜色 */
.user-vip-package-price {
	color: #f97316; /* 橙色高亮价格 */
	font-weight: 700;
}

.user-vip-package-card .vip-package-buy-btn {
	margin-top: 8px;
	width: 100%;
}

@media (max-width: 768px) {
	.user-vip-packages-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}
}

.metric-label {
	font-size: 12px;
	color: #6b7280;
}

.metric-value {
	font-size: 20px;
	font-weight: 600;
	margin: 4px 0;
}

.metric-footer {
	font-size: 11px;
	color: #9ca3af;
	line-height: 1.4;
}

.user-center-membership-row {
	display: flex;
	gap: 10px;
}

.membership-card-main {
	flex: 1;
}

.membership-card-side {
	flex: 0 0 220px;
	background: #f9fafb;
	border-radius: 10px;
	padding: 8px 10px;
	font-size: 12px;
}

.membership-card-side h3 {
	margin: 0 0 6px;
	font-size: 13px;
}

.membership-card-side ul {
	margin: 0 0 6px;
	padding-left: 16px;
}

.membership-line {
	font-size: 13px;
	margin-bottom: 4px;
}

/* 用户中心总览页：会员状态卡片美化，仅作用于 user_center.php */
#user-center-authed .membership-card-main-overview {
	background: linear-gradient(135deg, #f9fafb, #eef2ff);
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	padding: 10px 12px 8px;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

#user-center-authed .membership-card-main-overview .membership-line:first-child {
	display: flex;
	align-items: center;
	gap: 8px;
}

#user-center-authed .membership-label {
	font-size: 13px;
	color: #6b7280;
}

/* 当前会员等级徽章：更醒目，但与会员中心页的 SVIP 样式区分开 */
#user-center-membership-level-main.membership-level-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, #4f46e5, #6366f1);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
}

#user-center-authed .membership-desc {
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 8px;
}

/* 当前会员等级里的 SVIP 等文字：字号放大、颜色更醒目 */
#vip-membership-level {
	font-size: 16px; /* 比周围文字大约 3 级 */
	font-weight: 600;
	color: #f97316; /* 橙色高亮，与整站强调色保持一致 */
}

.membership-desc {
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 8px;
}
	/* 会员中心：当前会员状态卡片内的 SVIP 套餐横向卡片样式 */
	.vip-membership-packages-wrapper {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px dashed #fee2e2;
}

.vip-membership-packages-title {
	font-size: 13px;
	font-weight: 600;
	color: #b45309;
	margin-bottom: 6px;
}

.vip-membership-packages-row {
	display: grid;
	/* 桌面端：4 等分占满整行 */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 1200px) {
	/* 中等屏幕：2 列布局 */
	.vip-membership-packages-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	/* 小屏：单列铺满 */
	.vip-membership-packages-row {
		grid-template-columns: 1fr;
	}
}

	/* SVIP 会员套餐统一支付按钮区域 */
	.vip-membership-action {
		margin-top: 12px;
		display: flex;
		justify-content: center;
	}

	.vip-membership-action-btn {
		min-width: 220px;
	}

.vip-membership-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	padding: 10px 12px 8px;
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
	cursor: default;
	overflow: hidden; /* 让右上角推荐角标的斜切背景不会超出卡片边框 */
}

.vip-membership-card.is-featured {
	border-color: #fb923c;
	background: #fff7ed;
	box-shadow: 0 16px 32px rgba(248, 113, 113, 0.35);
}

.vip-membership-card-ribbon {
	position: absolute;
	top: 8px;
	right: -26px;
	transform: rotate(45deg);
	padding: 2px 28px;
	background: linear-gradient(90deg, #f97316, #fb7185);
	color: #ffffff;
	font-size: 11px;
	box-shadow: 0 3px 6px rgba(248, 113, 113, 0.45);
}

.vip-membership-card-title {
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	margin-bottom: 4px;
}

.vip-membership-card-price {
	display: flex;
	align-items: baseline;
	margin: 2px 0;
}

.vip-membership-card-price-sign {
	font-size: 13px;
	color: #f97316;
	margin-right: 2px;
}

.vip-membership-card-price-value {
	font-size: 24px;
	font-weight: 700;
	color: #f97316;
}

.vip-membership-card-price-unit {
	font-size: 12px;
	color: #6b7280;
	margin-left: 4px;
}

.vip-membership-card-original {
	font-size: 11px;
	color: #9ca3af;
	text-decoration: line-through;
	margin-top: 2px;
}

.vip-membership-card-footer {
	margin-top: 4px;
	font-size: 12px;
	color: #374151;
}

.membership-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.user-center-primary-btn {
	border-radius: 8px;
	background: linear-gradient(135deg, #6366f1, #2563eb);
	color: #ffffff;
	border: none;
	padding: 8px 16px;
	font-size: 13px;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	transition: all 0.2s ease;
	cursor: pointer;
}

.user-center-primary-btn:hover {
	background: linear-gradient(135deg, #4f46e5, #1d4ed8);
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.user-center-ghost-btn {
	border-radius: 8px;
	border: 1px solid #e5e7eb;
	padding: 8px 16px;
	background: #ffffff;
	color: #555;
	font-size: 13px;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	transition: all 0.2s ease;
	cursor: pointer;
}

.user-center-ghost-btn:hover {
	border-color: #6366f1;
	color: #6366f1;
}

.user-center-chart-placeholder {
	height: 180px;
	border-radius: 10px;
	border: 1px dashed #e5e7eb;
	background: repeating-linear-gradient(45deg,#f9fafb,#f9fafb 10px,#f3f4f6 10px,#f3f4f6 20px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.chart-empty-text {
	font-size: 13px;
	color: #6b7280;
}

.user-center-table-wrapper {
	border-radius: 8px;
	border: 1px solid #f0f0f0;
	overflow: hidden;
}

.user-center-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	table-layout: auto;
}

.user-center-table thead {
	background: #f9fafb;
}

.user-center-table th,
.user-center-table td {
	padding: 8px 10px;
	border-bottom: 1px solid #f1f5f9;
	text-align: left;
	white-space: nowrap;
}

.user-center-table td {
	white-space: normal;
	word-break: break-all;
}

.user-center-table .table-empty {
	text-align: center;
	color: #9ca3af;
	white-space: normal;
}

.user-center-side-section {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(15,23,42,0.06);
	padding: 14px 16px;
}

.side-section-title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: #1a1a1a;
}

.side-summary-list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.side-summary-list li {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	padding: 3px 0;
}

.side-summary-list span {
	color: #6b7280;
}

.side-summary-list strong {
	color: #111827;
}

.side-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.full-width {
	display: block;
	text-align: center;
	width: 100%;
}

.side-link-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.side-link-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	background: #ffffff;
	color: #111827;
	font-size: 13px;
	transition: background-color 0.15s ease;
}

.side-link-item:hover {
	background: #f5f5ff;
}

.side-link-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #f3f4f6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #6366f1;
	font-size: 17px;
	flex-shrink: 0;
}

.side-link-main {
	display: flex;
	flex-direction: column;
}

.side-link-extra {
	color: #6b7280;
	font-size: 12px;
}


/* 通用提示文本（默认较小） */
.side-tip-text {
	font-size: 12px;
	color: #6b7280;
}

/* 会员中心 - 右下角网站公告列表美化 */
#user-center-announcements-list .side-tip-item {
	display: flex;
	align-items: center; /* 喇叭图标与标题垂直居中对齐 */
	padding: 6px 8px;
	border-radius: 8px;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

#user-center-announcements-list .side-tip-item:hover {
	background-color: #f9fafb;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
	transform: translateY(-1px);
}

#user-center-announcements-list .side-tip-icon {
	color: #f59e0b;
	margin-right: 8px;
	display: flex;
	align-items: center; /* 图标在容器内垂直居中 */
	line-height: 1;      /* 避免文字行高影响对齐 */
}

#user-center-announcements-list .side-tip-icon i {
	font-size: 18px;
}

#user-center-announcements-list .side-tip-text {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	color: #374151;
}

#user-center-announcements-list .side-tip-title {
	flex: 1 1 auto;
	min-width: 0;
}

#user-center-announcements-list .side-tip-date {
	flex: 0 0 auto;
	font-size: 12px;
	color: #9ca3af;
	white-space: nowrap;
}

#user-center-announcements-list .side-tip-empty .side-tip-text {
	font-size: 13px;
	color: #9ca3af;
}

.user-center-guest {
	margin-top: 8px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 8px 18px rgba(15,23,42,0.06);
	padding: 14px 16px;
	text-align: center;
}

.guest-tip {
	margin-bottom: 8px;
	font-size: 13px;
}

/* 会员中心 - 网站公告弹窗样式 */
#user-center-announcement-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 11000;
}

.user-center-announcement-modal {
	width: 90%;
	max-width: 520px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35);
	overflow: hidden;
	animation: uc-ann-modal-in 0.18s ease-out;
}

.user-center-announcement-modal-header {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
}

.user-center-announcement-modal-header-icon {
	margin-right: 8px;
	color: #f59e0b;
	font-size: 20px;
}

.user-center-announcement-modal-title {
	flex: 1;
	font-size: 15px;
	font-weight: 600;
	color: #111827;
}

.user-center-announcement-modal-close {
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 20px;
	color: #9ca3af;
}

.user-center-announcement-modal-close:hover {
	color: #4b5563;
}

.user-center-announcement-modal-body {
	padding: 12px 16px 4px;
	max-height: 360px;
	overflow: auto;
	font-size: 14px;
	line-height: 1.7;
	color: #374151;
	white-space: pre-wrap;
}

.user-center-announcement-modal-footer {
	padding: 10px 16px 14px;
	text-align: right;
	background: #f9fafb;
}

.user-center-announcement-modal-ok {
	min-width: 86px;
	padding: 6px 14px;
	border-radius: 999px;
	border: none;
	background: linear-gradient(135deg, #4f46e5, #6366f1);
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.user-center-announcement-modal-ok:hover {
	background: linear-gradient(135deg, #4338ca, #4f46e5);
}

@keyframes uc-ann-modal-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

		/* =============================
		 * 用户中心 - 财务中心专用样式
		 * ============================= */

		/* 顶部标题区域：放入统一卡片内，并在右侧增加快捷充值输入框 */
		.user-balance-header-section {
			padding-top: 10px;
			padding-bottom: 10px;
		}

		.user-balance-header-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
		}

		.user-balance-header-main {
			flex: 1 1 auto;
			min-width: 0;
		}

		.user-balance-page .page-header {
			margin: 0;
			padding: 0;
		}

		.user-balance-page .page-header h1 {
			margin: 0 0 4px;
			font-size: 20px;
			font-weight: 600;
			color: #111827;
		}

		.user-balance-page .page-header p {
			margin: 0;
			font-size: 13px;
			color: #6b7280;
		}

		/* 顶部右侧：快捷充值输入与按钮 */
		.user-balance-quick-recharge {
			flex: 0 0 auto;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 4px;
		}

		.user-balance-quick-recharge-label {
			font-size: 12px;
			color: #6b7280;
		}

		.user-balance-quick-recharge-form {
			display: flex;
			align-items: center;
			gap: 6px;
		}
			.user-balance-quick-recharge-amount-label {
				font-size: 13px;
				color: #4b5563;
				white-space: nowrap;
			}

		.user-balance-quick-recharge-input {
				width: 220px; /* 原来 130px，增大宽度 */
				padding: 8px 14px; /* 原来 6px 10px，增大高度与左右内边距 */
				border-radius: 999px;
				border: 1px solid #d1d5db;
				font-size: 14px; /* 原来 13px，稍微放大文字 */
				outline: none;
				transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
		}

		.user-balance-quick-recharge-input:focus {
			border-color: #2563eb;
			box-shadow: 0 0 0 1px rgba(37,99,235,0.18);
			background-color: #f9fafb;
		}

		.user-balance-quick-recharge-btn {
			border-radius: 999px;
			border: none;
			padding: 6px 14px;
			font-size: 13px;
			background: linear-gradient(135deg,#4f46e5,#6366f1);
			color: #ffffff;
			cursor: pointer;
			box-shadow: 0 4px 10px rgba(79,70,229,0.35);
			transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
			white-space: nowrap;
		}

		.user-balance-quick-recharge-btn:hover {
			background: linear-gradient(135deg,#4338ca,#4f46e5);
			transform: translateY(-1px);
			box-shadow: 0 6px 16px rgba(79,70,229,0.45);
		}

		.user-balance-quick-recharge-btn:disabled,
		.user-balance-quick-recharge-btn[disabled] {
			background: #e5e7eb;
			color: #9ca3af;
			box-shadow: none;
			cursor: default;
		}

		.user-balance-quick-recharge-tips {
			margin-top: 2px;
			font-size: 12px;
			color: #6b7280;
			max-width: 260px;
			text-align: right;
		}

/* 会员中心：推荐积分套餐卡片内的“积分快捷充值”整体向下 15px */
.user-vip-page .user-vip-quick-recharge-inline {
	margin-top: 15px;
}

		.user-balance-quick-recharge-tips.is-error {
			color: #b91c1c;
		}

		.user-balance-quick-recharge-tips.is-success {
			color: #166534;
		}
			.user-balance-quick-recharge-rate {
				margin-top: 2px;
				font-size: 12px;
				color: #6b7280;
				max-width: 260px;
				text-align: right;
			}
		
			.user-balance-quick-recharge-rate.is-error {
				color: #b91c1c;
			}
		
			.user-balance-quick-recharge-rate.is-success {
				color: #166534;
			}

		@media (max-width: 768px) {
			.user-balance-header-row {
				flex-direction: column;
				align-items: flex-start;
			}

			.user-balance-quick-recharge {
				align-items: stretch;
				width: 100%;
			}

			.user-balance-quick-recharge-form {
				width: 100%;
			}

			.user-balance-quick-recharge-input {
				flex: 1 1 auto;
				width: auto;
			}
		}

		/* 财务中心主列：稍微减小区块之间的间距，让整体更紧凑 */
		.user-balance-page .user-center-main-column {
			gap: 8px;
		}
			/* 财务中心：在“账户概况”和“点数收支明细”两个区块之间额外增加 8px 间距 */
			.user-balance-page #user-balance-authed > .user-center-section + .user-center-section {
				margin-top: 8px;
			}

		/* 财务中心 - 账户概况卡片：在统一风格基础上增加轻微描边与阴影 */
	.user-balance-page .user-center-metric-grid {
		gap: 12px;
	}

	.user-balance-page .metric-card {
		background: linear-gradient(135deg,#f9fafb,#eef2ff);
		border-radius: 10px;
		border: 1px solid #e5e7eb;
		box-shadow: 0 4px 12px rgba(15,23,42,0.05);
		padding: 10px 12px 8px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 72px;
	}

	.user-balance-page .metric-label {
		font-size: 12px;
		color: #6b7280;
	}

	.user-balance-page .metric-value {
		font-size: 20px;
		font-weight: 600;
		margin-top: 4px;
	}

		/* 财务中心 - 分页样式美化 */
		.user-center-pagination {
		margin-top: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		font-size: 13px;
	}

	.user-center-pagination .page-info {
		color: #6b7280;
	}

	.user-center-pagination button {
		border-radius: 999px;
		border: 1px solid #d1d5db;
		padding: 4px 12px;
		background: #ffffff;
		color: #4b5563;
		font-size: 13px;
		cursor: pointer;
		transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	}

	.user-center-pagination button:hover {
		background: #eef2ff;
		border-color: #c7d2fe;
		color: #6366f1;
		box-shadow: 0 2px 6px rgba(99,102,241,0.2);
	}

	.user-center-pagination button:disabled,
	.user-center-pagination button[disabled] {
		background: #f9fafb;
		color: #9ca3af;
		border-color: #e5e7eb;
		box-shadow: none;
		cursor: default;
	}

	/* 用户中心 - 我的作品列表页样式 */
	.user-works-page .user-center-main-column {
		gap: 10px;
	}

	.user-works-header-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 8px;
		margin-bottom: 6px;
	}

	.user-works-tabs {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.user-works-tab {
		border: none;
		padding: 4px 10px;
		border-radius: 999px;
		font-size: 13px;
		background: #eff6ff;
		color: #4f46e5;
		cursor: pointer;
		transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	}

	.user-works-tab:hover {
		background: #e0e7ff;
	}

	.user-works-tab.active {
		background: #4f46e5;
		color: #ffffff;
		box-shadow: 0 0 0 1px rgba(59,130,246,0.4), 0 6px 18px rgba(79,70,229,0.35);
	}

	.user-works-sort {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 13px;
		color: #6b7280;
	}

	#user-works-order {
		border-radius: 999px;
		border: 1px solid #e5e7eb;
		padding: 4px 10px;
		font-size: 13px;
		background: #f9fafb;
		color: #111827;
	}

	.user-works-loading,
	.user-works-error,
	.user-works-empty {
		margin-top: 8px;
		font-size: 13px;
	}

	.user-works-loading {
		color: #4b5563;
	}

	.user-works-empty {
		color: #9ca3af;
	}

	.user-works-error {
		color: #b91c1c;
	}

	.user-works-list {
		margin-top: 10px;
		display: grid;
			/* 我的作品：PC 端一行两条 */
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 12px;
	}

	.user-works-item {
		background: #ffffff;
		border-radius: 12px;
			box-shadow: 0 6px 16px rgba(15,23,42,0.08);
			overflow: hidden;
			display: flex;
			/* 卡片改为左右结构，类似示例截图 */
			flex-direction: row;
			align-items: center;
		transition: transform 0.18s ease, box-shadow 0.18s ease;
	}

	.user-works-item:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 24px rgba(15,23,42,0.14);
	}

		.user-works-thumb {
			position: relative;
			display: block;
			/* 稍微加宽加高一点，同时加上圆角和更柔和的背景，让图片更好看 */
			width: 156px;
			height: 110px; /* 依然偏扁，但视觉上比 96px 舒服一些 */
			flex-shrink: 0;
			border-radius: 10px;
			background: radial-gradient(circle at 30% 20%, #fef9c3 0, #eef2ff 42%, #e5e7eb 100%);
			overflow: hidden;
		}

		.user-works-thumb img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				transform: scale(1.02);
				transition: transform 0.22s ease-out;
		}

		/* 悬停时让图片轻微放大一点，质感更好 */
		.user-works-item:hover .user-works-thumb img {
			transform: scale(1.08);
		}

	.user-works-thumb.no-image {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #9ca3af;
		background: linear-gradient(135deg,#f9fafb,#eef2ff);
	}

	.user-works-no-image {
		padding: 20px 12px;
	}

	.user-works-body {
			padding: 8px 14px 9px;
		display: flex;
		flex-direction: column;
			flex: 1;
			gap: 4px;
	}

			/* 响应式：窄屏改为一列展示，避免过窄 */
			@media (max-width: 960px) {
				.user-works-list {
					grid-template-columns: 1fr;
				}
				.user-works-thumb {
					width: 132px;
					height: 96px;
				}
			}

	.user-works-title-row {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 6px;
	}

	.user-works-title {
		font-size: 14px;
		font-weight: 600;
		color: #111827;
		margin: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.user-works-summary {
		font-size: 13px;
		color: #6b7280;
		max-height: 3em;
		overflow: hidden;
	}

	.user-works-meta-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 6px;
		font-size: 12px;
		color: #9ca3af;
	}

	.user-works-meta-left {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-wrap: wrap;
	}

	.user-works-meta-tag {
		padding: 1px 6px;
		border-radius: 999px;
		background: #eff6ff;
		color: #1d4ed8;
		font-size: 11px;
	}

	.user-works-meta-points {
		font-size: 11px;
		color: #f97316;
	}

	.user-works-meta-time {
		white-space: nowrap;
	}

	.user-works-actions {
		margin-top: 6px;
	}

	.user-works-view-link {
		font-size: 13px;
		color: #4f46e5;
		text-decoration: none;
	}

	.user-works-view-link:hover {
		text-decoration: underline;
	}

	.user-works-pagination {
		margin-top: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 4px;
		flex-wrap: wrap;
	}

	.user-works-page-btn,
	.user-works-page-number {
		min-width: 26px;
		height: 26px;
		padding: 0 8px;
		border-radius: 999px;
		border: 1px solid #e5e7eb;
		background: #ffffff;
		font-size: 12px;
		color: #4b5563;
		cursor: pointer;
		transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	}

	.user-works-page-number.active {
		background: #4f46e5;
		color: #ffffff;
		border-color: #4f46e5;
		box-shadow: 0 4px 12px rgba(79,70,229,0.35);
	}

	.user-works-page-btn.disabled {
		opacity: 0.45;
		cursor: default;
	}

	.user-works-page-btn.disabled:hover {
		background: #ffffff;
	}

	.user-works-page-ellipsis {
		padding: 0 4px;
		font-size: 12px;
		color: #9ca3af;
	}

@media (max-width: 1024px) {
	.user-center-page {
		max-width: 100%;
	}
	.user-center-top-banner {
		flex-direction: column;
		align-items: flex-start;
	}
	.user-center-layout {
		flex-direction: column;
	}
	.user-center-side-column {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
	}
	.user-center-metric-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.user-center-metric-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.user-center-top-main {
		flex-direction: column;
		align-items: flex-start;
	}
	.user-center-top-stats {
		width: 100%;
		flex-wrap: wrap;
	}
}

	.prompt-detail-related-meta {
	    font-size: 12px;
	    color: #6b7280;
	    display: flex;
	    align-items: center;
	    gap: 4px;
	}

	@media (max-width: 1200px) {
	    .prompt-detail-related-item {
	        flex: 0 0 calc(25% - 8px); /* 中等宽度：每行 4 个 */
	    }
	}

	@media (max-width: 992px) {
	    .prompt-detail-related-item {
	        flex: 0 0 calc(33.333% - 8px); /* 平板：每行 3 个 */
	    }
	}

	@media (max-width: 768px) {
	    .prompt-detail-related-item {
	        flex: 0 0 calc(50% - 8px); /* 手机：每行 2 个 */
	    }
	}

/* 详情页主卡片内：图片 + 中英文提示词两列布局 */
.prompt-detail-main-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.prompt-detail-main-left {
	flex: 0 0 350px; /* 固定宽度 350px */
}

.prompt-detail-main-right {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* 详情页：图片下方 作者信息 + 按钮 一行布局 */
.prompt-detail-footer-bar {
			margin-top: 8px;
			margin-bottom: 4px;
			padding-top: 4px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
}

.prompt-detail-author {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
			color: #393e46;
		flex: 1 1 auto;
		min-width: 0;
}

.prompt-detail-author-name {
		font-weight: 500;
		color: #111827;
}

.prompt-detail-author-style {
		color: #f97316;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 360px;
}

/* 手机端：作者文案和按钮各占一行，并整体居中 */
@media (max-width: 768px) {
		.prompt-detail-footer-bar {
				flex-direction: column;
				align-items: center;   /* 整体居中 */
				gap: 8px;
		}

		.prompt-detail-author {
				justify-content: center;
				text-align: center;
				width: 100%;
		}

		.view-prompt-detail-btn {
				align-self: center;    /* 按钮在手机端居中 */
		}
}

/* 详情页右侧推荐栏 */
.prompt-detail-sidebar {
	    flex: 0 0 280px;
	    display: flex;
	}

.prompt-detail-image {
		position: relative;
		width: 100%;
		height: 450px;              /* 固定高度 450px */
		margin-bottom: 16px;
		background-color: #f3f4f6;  /* 浅灰背景，作为兜底色 */
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
}

/* 使用当前图片作为容器背景，铺满并做模糊+透明处理，填充左右空白 */
.prompt-detail-image::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: var(--prompt-image-url);
		background-size: cover;
		background-position: center;
		filter: blur(26px);
		transform: scale(1.08); /* 稍微放大，避免四周出现锐利边缘 */
		opacity: 0.75;
		z-index: 0;
}

.prompt-detail-image img {
		position: relative;
		z-index: 1;
		max-width: 100%;
		max-height: 100%;
		display: block;
		object-fit: contain;
}

.prompt-detail-info {
    /* 主体文字信息块，保持原有排版 */
}

.prompt-detail-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #111827;
}

.prompt-detail-summary {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 10px;
}

.prompt-detail-meta {
	    font-size: 12px;
	    color: #9ca3af;
	    margin-bottom: 16px;
	    display: flex;
	    flex-wrap: wrap;
	    align-items: center;
	    gap: 6px 16px;
	}

.prompt-detail-meta-item {
	    display: inline-flex;
	    align-items: center;
	    white-space: nowrap;
	}

.prompt-detail-meta-item + .prompt-detail-meta-item {
	    position: relative;
	    padding-left: 14px;
	}

.prompt-detail-meta-item + .prompt-detail-meta-item::before {
	    content: '';
	    position: absolute;
	    left: 6px;
	    top: 50%;
	    width: 4px;
	    height: 4px;
	    border-radius: 999px;
	    background-color: #d1d5db;
	    transform: translateY(-50%);
	}

.prompt-detail-prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.prompt-detail-prompt-header h2 {
    font-size: 16px;
    margin: 0;
}

/* 1e721ff53e

6129ec221ff031 24 */
.prompt-detail-prompt {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 12px 12px 10px;
		box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
	}

/* 中文 / 英文提示词卡片：作为复制角标的承载卡片 */
.prompt-detail-prompt-zh,
.prompt-detail-prompt-en {
	position: relative;
}

/* PC 端：中文 / 英文提示词卡片，最小高度 180px，保证边框高度视觉统一 */
@media (min-width: 769px) {
	.prompt-detail-prompt-zh,
	.prompt-detail-prompt-en {
		min-height: 180px;
	}
}

/* 中文提示词：使用主题色 #1B89E3 作为描边颜色 */
.prompt-detail-prompt-zh {
	border: 1px solid #1B89E3;
}

/* 英文提示词：保持原有描边颜色 */
.prompt-detail-prompt-en {
	border: 1px solid #ffd162;
}

/* 专用提示词（中英+参数）：不需要单独卡片背景，去掉阴影和额外内边距 */
.prompt-detail-prompt-special {
	background-color: transparent;
	box-shadow: none;
	padding: 0;
}

/* 专用提示词上方：左右彩色发光线 + 中间“参数正文”文字 */
.prompt-detail-special-divider {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 10px; /* 线到下方标题的间隙 10px */
}

.prompt-detail-special-divider-line {
		flex: 1 1 0;
		height: 2px; /* 横线 2px */
		border-radius: 999px;
		background: linear-gradient(90deg,
			#ff4b4b,
			#ffa534,
			#ffe600,
			#3bd16f,
			#1f77fa,
			#8b5cf6,
			#ff4b4b
		);
		box-shadow: 0 0 6px rgba(255, 255, 255, 0.6),
		            0 0 12px rgba(31, 119, 250, 0.7);
}

.prompt-detail-special-divider-text {
			font-size: 16px;
		color: #393e46;
		white-space: nowrap;
}

/* 顶部右上角的“复制”角标（曲线背景），放在卡片内部右上角 */
.prompt-detail-badge {
	position: absolute;
	top: 4px;    /* 稍微下移，落在卡片内部 */
	right: 10px; /* 与右侧内边距对齐，看起来贴住右上角 */
	padding: 4px 10px;
	background-color: #EF8B33;
	color: #ffffff;
	font-size: 12px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px; /* 四个角统一圆角，做成胶囊形角标 */
	box-shadow: 0 4px 10px rgba(239, 139, 51, 0.35);
	z-index: 1;
}

/* 中文提示词卡片上的“复制”角标：同步使用 #1B89E3 色系 */
.prompt-detail-prompt-zh .prompt-detail-badge {
	background-color: #1B89E3;
	box-shadow: 0 4px 10px rgba(27, 137, 227, 0.35);
}

/* 详情页：提示词正文（中文 / 英文 / 专用），统一用普通文本样式展示，多行自动换行 */
.prompt-detail-plain-text,
.prompt-detail-special-text {
	white-space: pre-wrap;   /* 保留换行与缩进 */
	font-size: 13px;
	line-height: 1.7;
	color: #111827;
}

.prompt-copy-btn {
    border: none;
    background: #4f46e5;
    color: #ffffff;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.prompt-copy-btn:hover {
    background: #4338ca;
}

/* 复制成功/失败的小气泡提示 */
.copy-toast {
	position: absolute;
	max-width: 220px;
	padding: 6px 10px;
	background: rgba(15, 23, 42, 0.9);
	color: #ffffff;
	font-size: 12px;
	line-height: 1.4;
	border-radius: 999px;
	pointer-events: none;
	z-index: 9999;
	white-space: nowrap;
	opacity: 0;
}

.prompt-detail-text {
	    width: 100%;
	    min-height: 220px;
	    padding: 14px 16px;
	    border-radius: 10px;
	    border: none;
	    background-color: #020617;
	    color: #e5e7eb;
	    font-size: 13px;
	    line-height: 1.7;
	    resize: vertical;
	    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	    box-shadow: inset 0 0 0 1px #111827;
	}

/* 详情页右侧推荐列表样式 */
.prompt-sidebar-section {
	    background-color: #ffffff;
	    border-radius: 14px;
	    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
	    padding: 14px 14px 10px;
	    width: 100%;
	    height: 100%;
}

.prompt-sidebar-title {
	    font-size: 16px; /* 右栏标题字号：在放大基础上略微减小 */
	    font-weight: 600;
	    margin-bottom: 10px;
	    border-left: 3px solid #f97316;
	    padding-left: 8px;
	    color: #4b5563; /* 深灰色，避免纯黑 */
}

.prompt-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prompt-sidebar-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 10px;
    padding: 6px 6px;
    transition: background-color 0.15s ease, transform 0.15s ease;
	    color: #4b5563; /* 深灰主文字颜色 */
}

.prompt-sidebar-item:hover {
    background-color: #f9fafb;
    transform: translateY(-1px);
}

.prompt-sidebar-thumb {
    flex: 0 0 64px;
    height: 48px;
    overflow: hidden;
    border-radius: 8px;
    margin-right: 8px;
    background-color: #e5e7eb;
}

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

.prompt-sidebar-info {
    flex: 1;
    min-width: 0;
}

.prompt-sidebar-item-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.prompt-sidebar-item-title {
	    font-size: 14px; /* 推荐作品标题：略微减小一档 */
	    font-weight: 500;
	    color: #4b5563; /* 深灰 */
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prompt-sidebar-item-meta {
	    font-size: 13px; /* 时间等副标题：略微减小一档 */
    color: #9ca3af;
}

.prompt-sidebar-item-category {
	font-size: 12px;
	color: #9ca3af;
	white-space: nowrap;
	margin-left: 8px;
}

.prompt-sidebar-empty {
	    font-size: 13px; /* 无数据提示：略微减小一档 */
    color: #9ca3af;
    padding: 4px 0 2px;
}

/* 详情页右侧栏：推荐专题卡片样式 */
.prompt-sidebar-topics {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prompt-sidebar-topics-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prompt-sidebar-topic-item {
	display: block;
	padding: 8px 10px;
	border-radius: 10px;
	text-decoration: none;
		/* 默认不显示圈起的背景和边框，保持简洁 */
		background-color: transparent;
		border: 1px solid transparent;
		color: #4b5563; /* 推荐专题主文字深灰 */
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* 详情页右侧栏推荐专题卡片：hover 效果保持简洁 */
	.prompt-sidebar-topic-item:hover {
		/* 鼠标滑过时再出现浅灰背景和边框 */
		background-color: #f9fafb;
		border-color: #e5e7eb;
	}

/* 推荐专题：编号 + 标题一行展示 */
.prompt-sidebar-topic-main {
	display: flex;
	align-items: center;
	gap: 6px;
}

.prompt-sidebar-topic-index {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: linear-gradient(135deg, #f97316, #facc15);
		color: #ffffff;
		font-size: 12px; /* 序号数字：略微减小一档 */
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.prompt-sidebar-topic-name {
	    font-size: 14px; /* 推荐专题标题：略微减小一档 */
	    font-weight: 600;
		color: #4b5563; /* 深灰色标题 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
}

/* 详情页右侧推荐专题卡片不再展示描述，仅保留 SEO 标题 */

/* 详情页右侧栏：固定宽度 280px */
		.prompt-detail-sidebar {
			    flex: 0 0 280px;
			    max-width: 280px;
			    display: flex;
			    flex-direction: column;
			    gap: 12px;
			    position: sticky;
			    top: 66px;
			    align-self: flex-start;
			}

/* 右侧栏内通用卡片样式：高度随内容自适应 */
.prompt-sidebar-section {
	    height: auto;
	}

/* 用户信息卡片 + 占位卡片的简单排版 */
.prompt-sidebar-user,
.prompt-sidebar-placeholder {
	    display: flex;
	    flex-direction: column;
	    gap: 6px;
	}

.prompt-sidebar-placeholder-body,
.prompt-sidebar-user-body {
		    font-size: 13px; /* 用户信息/占位说明：略微减小一档 */
	    color: #6b7280;
	}

		/* 详情页右侧栏：用户信息卡片样式（去掉灰色背景块，直接贴合白色侧栏） */
		.prompt-user-card {
		    border-radius: 10px;
		    padding: 6px 0 2px;
		    background: transparent;
		    border: none;
		}

		/* 未登录态卡片：整体可点击，轻微渐变背景 */
		.prompt-user-card-guest {
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		    min-height: 64px;
		    cursor: pointer;
		    background: linear-gradient(90deg, #eff6ff, #fef3c7);
		    color: #4b5563;
		    font-weight: 500;
		}
		
			.prompt-user-guest-main {
		    font-size: 16px; /* 未登录主文案：略微减小一档 */
		}

			.prompt-user-guest-sub {
		    margin-top: 2px;
		    font-size: 13px; /* 未登录副文案：略微减小一档 */
		    color: #6b7280;
		}

			.prompt-user-guest-sub strong {
		    color: #ef4444;
		    font-weight: 600;
		}

		/* 已登录态卡片：头像置于上方居中，整体更大气 */
		.prompt-user-card-authed {
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    gap: 10px;
		}

		.prompt-user-card-header {
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    gap: 10px;
		}

		.prompt-user-avatar {
		    width: 44px;
		    height: 44px;
		    border-radius: 999px;
		    background: linear-gradient(135deg, #4f46e5, #22c55e);
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    color: #ffffff;
		    font-size: 18px;
		    font-weight: 600;
		    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
		}

		.prompt-user-card-header-main {
		    flex: 1;
		    min-width: 0;
		    text-align: center;
		}

		.prompt-user-card-name-row {
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    gap: 6px;
		    margin-bottom: 4px;
		}

		.prompt-user-name {
		    font-size: 16px;
		    font-weight: 600;
		    color: #111827;
		}

		.prompt-user-vip-tag {
		    font-size: 14px;
		    padding: 2px 6px;
		    border-radius: 999px;
		    background: #e5e7eb;
		    color: #4b5563;
		}

	.prompt-user-vip-tag.is-vip {
	    background: linear-gradient(135deg, #f97316, #facc15);
	    color: #7c2d12;
	}

			.prompt-user-card-subtitle {
		    font-size: 14px;
		    color: #6b7280;
		    white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		}

				.prompt-user-card-stats {
				    display: flex;
				    align-items: flex-start;
				    justify-content: center; /* 三个数字整体居中 */
				    gap: 48px;              /* 横向间距再加大一些 */
				    margin-top: 10px;
				    padding-top: 12px;
				    border-top: 1px dashed #e5e7eb;
				}

		.prompt-user-stat-item {
		    flex: 1 1 0;
		    min-width: 0;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    text-align: center;
		}

			.prompt-user-stat-value {
		    font-size: 14px;
		    font-weight: 600;
		    color: #111827;
		}

				.prompt-user-stat-label {
			    font-size: 14px;
			    color: #6b7280;
			    white-space: nowrap; /* 防止“今日调用”“点数余额”换行 */
			}

			.prompt-user-card-footer-link {
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    margin-top: 10px;
		    font-size: 14px;
		    color: #2563eb;
		    text-decoration: none;
		}

	.prompt-user-card-footer-link:hover {
	    text-decoration: underline;
	}

@media (max-width: 992px) {
    .prompt-detail-body {
        flex-direction: column;
    }

    .prompt-detail-sidebar {
        width: 100%;
        max-width: 100%;
        position: static;
        flex: 1 1 auto;
    }

    .prompt-detail-main-layout {
        flex-direction: column;
    }

    .prompt-detail-main-left,
    .prompt-detail-main-right {
        flex: 1 1 100%;
    }
}

		@media (max-width: 768px) {
		    .prompt-page,
		    .prompt-detail-page {
		        /* 移动端左右留白缩小为 3px，顶部保持贴近导航，底部预留 24px 间距 */
		        padding: 0 3px 24px;
		    }

	    .prompt-filter-label {
	        width: 40px;
	        margin-bottom: 4px;
	    }

	    .prompt-filter-search {
	        flex-direction: column;
	        align-items: stretch;
	    }

	    /* 整体布局：手机端将左右双栏改为上下结构，避免错位 */
	    #app-container {
	        flex-direction: column;
	        height: auto;
	        min-height: 100vh;
	    }

	    #main-content {
	        width: 100%;
	    }

	    /* 手机端侧边栏：改为从左侧滑出的覆盖面板，由右上角菜单按钮控制 */
		    #sidebar {
		        position: fixed;
		        top: 0;
		        left: 0;
		        width: 80%;
		        max-width: 260px;
		        height: 100vh;
		        z-index: 1000;
		        box-shadow: 4px 0 20px rgba(15, 23, 42, 0.45);
		        transform: translateX(-100%);
		        transition: transform 0.3s ease;
		    }
		
		    #sidebar.open {
		        transform: translateX(0);
		    }

	    .sidebar-toggle {
	        display: none;
	    }

	    .mobile-menu-toggle {
	        display: block;
	    }

	    /* 顶部导航在手机端：上下两行布局，保证会员信息和登录/注册可见 */
	    #top-header {
	        flex-wrap: wrap;
	        height: auto;
	        align-items: flex-start;
	        padding: 10px 12px;
	        row-gap: 8px;
	    }

	    .header-left,
	    .header-right {
	        padding-left: 0;
	        width: 100%;
	    }

	    .header-left {
	        margin-bottom: 4px;
	    }

	    .header-right {
	        justify-content: space-between;
	    }

	    .search-box {
	        margin-right: 0;
	        width: 100%;
	    }

	    .search-input {
	        min-width: 0;
	        width: 100%;
	    }

	    /* 顶部右侧快捷入口在手机端允许自动换行，避免挤压变形 */
	    .header-features {
	        flex-wrap: wrap;
	        gap: 8px;
	    }

	    /* 移动端保留“登录/注册”文字，避免被 1024px 断点的通用规则隐藏 */
	    #login-register-btn span {
	        display: inline;
	    }
	}
		
			/* 专用提示词卡片底部的大图展示区域：居中且在大屏上限制最大宽度 */
	.prompt-detail-special-image {
		margin: 16px auto 0;
		border-radius: 12px;
		overflow: hidden;
		background-color: #f3f4f6;
		max-width: 780px;
		width: 100%;
	}

	.prompt-detail-special-image img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain;
		cursor: zoom-in;
	}

	/* 底部大图的全屏弹出层样式 */
	.prompt-image-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.85);
		z-index: 9999;
		display: none;
		align-items: center;
		justify-content: center;
		cursor: zoom-out;
	}

	.prompt-image-overlay-inner {
		max-width: 96vw;
		max-height: 96vh;
	}

	.prompt-image-overlay-inner img {
		display: block;
		max-width: 100%;
		max-height: 100%;
		margin: 0 auto;
	}

/* ================================================
 * 移动端兼容性修复（2026-02-09）
 * ================================================ */

/* 1. 表格容器：允许横向滚动，防止表格超出屏幕 */
.user-center-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* 2. 全局 box-sizing 兜底 */
.user-center-page *,
.user-center-page *::before,
.user-center-page *::after {
	box-sizing: border-box;
}

@media (max-width: 768px) {

	/* 3. SVIP支付按钮：移动端取消最小宽度，占满 */
	.vip-membership-action-btn {
		min-width: unset !important;
		width: 100%;
	}

	/* 4. 充值输入框：移动端自适应宽度 */
	.user-balance-quick-recharge-input {
		width: 100% !important;
		max-width: 100%;
	}

	/* 5. 充值提示文字：移动端取消最大宽度限制 */
	.user-balance-quick-recharge-tips,
	.user-balance-quick-recharge-rate {
		max-width: 100%;
		text-align: left;
	}

	/* 6. 指标网格：移动端改为2列 */
	.user-center-metric-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	/* 7. 作品头部操作栏：换行 */
	.user-works-header-row {
		flex-wrap: wrap;
	}

	/* 8. 作品缩略图：移动端缩小 */
	.user-works-thumb {
		width: 110px !important;
		height: 80px !important;
	}

	/* 9. 作品卡片：纵向排列 */
	.user-works-item {
		flex-direction: column !important;
	}

	.user-works-item .user-works-thumb {
		width: 100% !important;
		height: 140px !important;
		border-radius: 10px 10px 0 0;
	}

	/* 10. 会员中心顶部统计项：小屏缩小 */
	.user-center-top-stat-item {
		min-width: 80px;
		padding: 6px 8px;
	}

	.user-center-top-stat-item .stat-value {
		font-size: 16px;
	}

	.user-center-top-stat-item .stat-label {
		font-size: 11px;
	}

	/* 11. 右侧栏：移动端占满宽度 */
	.user-center-side-column {
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
	}

	/* 12. 推广码文字：移动端缩小 */
	.user-promo-code-value {
		font-size: 16px !important;
		letter-spacing: 1px !important;
	}

	/* 13. 推广链接输入框：移动端取消最小宽度 */
	.user-promo-link-input {
		min-width: unset !important;
		width: 100% !important;
	}

	/* 14. 指标卡片值：移动端缩小字体 */
	.metric-value {
		font-size: 16px;
	}

	/* 15. 会员中心顶部横幅：纵向排列 */
	.user-center-top-banner {
		flex-direction: column;
		align-items: stretch;
		padding: 12px;
	}

	.user-center-top-main {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.user-center-top-stats {
		width: 100%;
		flex-wrap: wrap;
		gap: 6px;
	}

	/* 16. 会员中心布局：单列 */
	.user-center-layout {
		flex-direction: column;
	}

	/* 17. 充值行内表单：移动端改为纵向排列 */
	.user-balance-quick-recharge-row,
	.user-balance-quick-recharge-form {
		flex-direction: column;
		align-items: stretch !important;
		gap: 8px;
	}

	.user-balance-quick-recharge-form .user-balance-quick-recharge-input {
		width: 100% !important;
	}

	.user-balance-quick-recharge-form .user-balance-quick-recharge-btn {
		width: 100%;
		text-align: center;
	}

	.user-balance-quick-recharge-amount-label {
		font-size: 13px;
		margin-bottom: 2px;
	}

	/* 支付渠道选择行：确保不换行竖排 */
	.user-balance-pay-channel-row label {
		white-space: nowrap;
	}

	/* 18. 会员中心section：减少内边距 */
	.user-center-section {
		padding: 12px;
	}

	/* 19. 会员套餐网格：移动端更小的最小宽度 */
	.user-vip-packages-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 8px;
	}

	/* 20. 会员中心页面：减小外边距 */
	.user-center-page {
		padding: 0 4px;
	}
}

@media (max-width: 480px) {

	/* 超小屏：指标网格改为1列 */
	.user-center-metric-grid {
		grid-template-columns: 1fr;
	}

	/* 超小屏：SVIP套餐1列 */
	.vip-membership-packages-row {
		grid-template-columns: 1fr !important;
	}

	/* 超小屏：充值套餐1列 */
	.user-vip-packages-grid {
		grid-template-columns: 1fr;
	}

	/* 超小屏：表格字体缩小 */
	.user-center-table th,
	.user-center-table td {
		font-size: 12px;
		padding: 6px 8px;
	}
}