* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: #f5f6fa;
    color: #333;
    font-size: 14px;
}

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

.admin-container {
    display: flex;
    min-height: 100vh;
}

/* 左侧导航 */
.sidebar {
    width: 220px;
    background: #fff;
    border-right: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: transform 0.3s;
}

.sidebar.collapsed {
    transform: translateX(-220px);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}

.sidebar-logo svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

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

.nav-group {
    margin-bottom: 2px;
}

.nav-group-title {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    transition: background 0.2s;
    user-select: none;
}

.nav-group-title:hover {
    background: #f5f7fa;
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    color: #666;
}

.nav-icon svg {
    width: 18px;
    height: 18px;
}

.nav-arrow {
    margin-left: auto;
    font-size: 10px;
    color: #999;
    transition: transform 0.2s;
}

.nav-group.open .nav-arrow {
    transform: rotate(180deg);
}

.nav-submenu {
    overflow: hidden;
    transition: max-height 0.3s;
}

.nav-submenu.hidden {
    display: none;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 9px 20px 9px 50px;
    color: #555;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background: #f0f7ff;
    color: #1677ff;
}

.nav-item.active {
    background: #e6f4ff;
    color: #1677ff;
    border-left-color: #1677ff;
    font-weight: 500;
}

.nav-item-single {
    padding-left: 20px;
}

.nav-item-single .nav-icon {
    margin-right: 10px;
}

.sidebar-collapse {
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    cursor: pointer;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-collapse svg {
    width: 18px;
    height: 18px;
}

/* 主内容区 */
.main-wrapper {
    flex: 1;
    margin-left: 220px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.3s;
}

.main-wrapper.full {
    margin-left: 0;
}

/* 顶部导航 */
.topbar {
    height: 56px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-left {
    display: flex;
    align-items: center;
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-toggle:hover {
    background: #f5f5f5;
}

.menu-toggle svg {
    width: 20px;
    height: 20px;
}

.topbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.announcement-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f0f7ff;
    border: 1px solid #d6e8ff;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 12px;
    color: #1677ff;
    max-width: 600px;
    overflow: hidden;
}

.announcement-icon {
    flex-shrink: 0;
}

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

.announcement-link {
    color: #1677ff;
    text-decoration: underline;
    flex-shrink: 0;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar-btn:hover {
    background: #f5f5f5;
}

.topbar-btn svg {
    width: 18px;
    height: 18px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
}

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

.user-name {
    font-size: 13px;
    color: #333;
}

/* 内容区 */
.content {
    flex: 1;
    padding: 20px;
}

/* 警告条 */
.warning-bar {
    background: #fff7e6;
    border: 1px solid #ffd591;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.warning-bar .warning-icon {
    color: #fa8c16;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.warning-bar .warning-content {
    flex: 1;
}

.warning-bar .warning-title {
    font-size: 14px;
    font-weight: 600;
    color: #d46b08;
    margin-bottom: 4px;
}

.warning-bar .warning-desc {
    font-size: 12px;
    color: #874d00;
    line-height: 1.6;
}

.warning-bar .warning-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 18px;
    padding: 0 4px;
}

/* 搜索栏 */
.search-bar {
    background: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.search-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.search-item input {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    width: 180px;
    transition: border-color 0.2s;
}

.search-item input:focus {
    border-color: #1677ff;
}

.search-btn {
    height: 32px;
    padding: 0 20px;
    background: #1677ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.search-btn:hover {
    background: #0958d9;
}

/* 操作栏 */
.action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.btn-primary {
    height: 34px;
    padding: 0 16px;
    background: #1677ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: #0958d9;
}

.btn-primary svg {
    width: 14px;
    height: 14px;
}

.tip-bar {
    background: #fff7e6;
    border: 1px solid #ffd591;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    color: #d46b08;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tip-bar a {
    color: #1677ff;
    text-decoration: underline;
}

/* 表格 */
.table-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

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

.data-table th {
    background: #fafafa;
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.data-table td {
    padding: 14px 16px;
    font-size: 13px;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
}

.data-table tr:hover td {
    background: #fafafa;
}

.data-table .checkbox-cell {
    width: 40px;
}

.data-table .action-cell {
    white-space: nowrap;
}

.table-link {
    color: #1677ff;
    cursor: pointer;
    margin-right: 12px;
}

.table-link:hover {
    text-decoration: underline;
}

.table-link.danger {
    color: #ff4d4f;
}

/* 空状态 */
.empty-state {
    padding: 60px 20px;
    text-align: center;
    color: #999;
}

.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state .empty-text {
    font-size: 14px;
}

/* 状态标签 */
.status-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.status-tag.success {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

.status-tag.warning {
    background: #fffbe6;
    color: #faad14;
    border: 1px solid #ffe58f;
}

.status-tag.error {
    background: #fff2f0;
    color: #ff4d4f;
    border: 1px solid #ffccc7;
}

.status-tag.info {
    background: #e6f4ff;
    color: #1677ff;
    border: 1px solid #91caff;
}

/* 底部 */
.footer {
    background: #fff;
    border-top: 1px solid #e8e8e8;
    padding: 16px 20px;
    text-align: center;
    font-size: 12px;
    color: #999;
}

.footer p {
    margin-bottom: 6px;
}

.footer .icp-info {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* 响应式 */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-220px);
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    .main-wrapper {
        margin-left: 0;
    }
    .announcement-bar {
        display: none;
    }
    .search-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .search-item input {
        width: 100%;
    }
}

/* 页面标题 */
.page-header {
    margin-bottom: 16px;
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.page-desc {
    font-size: 13px;
    color: #999;
}

/* 卡片 */
.card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

/* 表单 */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    color: #333;
    margin-bottom: 6px;
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #1677ff;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

/* 模态框 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal {
    background: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

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

.modal-title {
    font-size: 16px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    padding: 0 4px;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-default {
    height: 32px;
    padding: 0 16px;
    background: #fff;
    color: #333;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}

.btn-default:hover {
    border-color: #1677ff;
    color: #1677ff;
}

/* Tab按钮 */
.tab-btn {
    height: 32px;
    padding: 0 16px;
    background: #fff;
    color: #666;
    border: 1px solid #d9d9d9;
    border-right: none;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.tab-btn:last-child {
    border-right: 1px solid #d9d9d9;
    border-radius: 0 4px 4px 0;
}

.tab-btn.active {
    background: #1677ff;
    color: #fff;
    border-color: #1677ff;
}

/* 表格操作按钮 */
.action-btn {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    margin-right: 6px;
    transition: opacity 0.2s;
}

.action-btn:hover {
    opacity: 0.8;
}

.edit-btn {
    background: #fa8c16;
    color: #fff;
}

.data-btn {
    background: #1677ff;
    color: #fff;
}

.link-btn {
    background: #1677ff;
    color: #fff;
}

.delete-btn {
    background: #ff4d4f;
    color: #fff;
}

/* 分页 */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-top: 1px solid #f0f0f0;
}

.pagination-total {
    font-size: 13px;
    color: #666;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    color: #666;
}

.page-btn.active {
    background: #1677ff;
    color: #fff;
    border-color: #1677ff;
}

.page-size {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}

.page-jump {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-input {
    width: 50px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
    outline: none;
}

/* 大模态框 */
.modal-large {
    max-width: 700px !important;
    width: 90% !important;
}

.modal-large .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* 卡片表单 */
.card-form {
    padding: 0;
}

.form-row-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
}

.form-label {
    width: 100px;
    flex-shrink: 0;
    font-size: 13px;
    color: #333;
    padding-top: 8px;
    text-align: right;
    padding-right: 12px;
}

.form-input {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    background: #fafafa;
}

.form-input:focus {
    border-color: #1677ff;
    background: #fff;
}

textarea.form-input {
    min-height: 80px;
    padding: 8px 12px;
    resize: vertical;
}

select.form-input {
    cursor: pointer;
}

/* 落地页跳转Tab */
.jump-tabs {
    display: flex;
    gap: 0;
    flex: 1;
}

.jump-tab {
    padding: 6px 16px;
    background: #f5f5f5;
    color: #666;
    border: 1px solid #d9d9d9;
    border-right: none;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.jump-tab:first-child {
    border-radius: 4px 0 0 4px;
}

.jump-tab:last-child {
    border-right: 1px solid #d9d9d9;
    border-radius: 0 4px 4px 0;
}

.jump-tab.active {
    background: #1677ff;
    color: #fff;
    border-color: #1677ff;
}

.jump-content {
    margin-left: 100px;
    margin-bottom: 16px;
}

.form-tip {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
    line-height: 1.5;
}

.form-tip a {
    color: #1677ff;
}

/* 开关 */
.switch-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.switch {
    width: 44px;
    height: 24px;
    background: #ccc;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.switch.on {
    background: #1677ff;
}

.switch-dot {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.2s;
}

.switch.on .switch-dot {
    left: 22px;
}

.switch-tag {
    background: #fff7e6;
    color: #fa8c16;
    border: 1px solid #ffd591;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* 补发提示 */
.resend-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    border-radius: 4px;
    padding: 10px 12px;
    margin-left: 100px;
    margin-bottom: 16px;
}

/* 高级设置 */
.advanced-toggle {
    text-align: center;
    color: #1677ff;
    font-size: 13px;
    cursor: pointer;
    padding: 8px;
    border-top: 1px solid #f0f0f0;
    margin: 8px 0 16px;
}

.advanced-settings {
    display: block;
}

/* Logo操作 */
.logo-actions {
    display: flex;
    gap: 8px;
    flex: 1;
}

.logo-btn {
    padding: 6px 14px;
    background: #fff;
    color: #333;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.logo-btn.active {
    background: #1677ff;
    color: #fff;
    border-color: #1677ff;
}

/* Logo网格 */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
    margin-left: 0;
    margin-bottom: 16px;
}

.logo-item {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
    padding: 0;
    line-height: 1.2;
    border: 2px solid transparent;
    overflow: hidden;
}

.logo-item:hover {
    transform: scale(1.05);
}

.logo-item.selected {
    border-color: #1677ff;
    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
}

/* 卡片预览 */
.card-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 12px;
    flex: 1;
    max-width: 320px;
}

.preview-logo {
    width: 60px;
    height: 60px;
    background: #f5f5f5;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    text-align: center;
    line-height: 1.2;
    padding: 0;
    overflow: hidden;
}

.preview-content {
    flex: 1;
    min-width: 0;
}

.preview-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-desc {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 二维码图片 */
.qrcode-img-wrap {
    width: 120px;
    height: 120px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    transition: transform 0.2s;
}

.qrcode-img-wrap:hover {
    transform: scale(1.02);
}

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

.qrcode-placeholder {
    font-size: 12px;
    color: #999;
}

.qrcode-img-wrap-large {
    width: 120px;
    height: 120px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    transition: transform 0.2s;
}

.qrcode-img-wrap-large:hover {
    transform: scale(1.02);
}

/* 二维码上传区域 */
.qr-upload-area {
    width: 160px;
    height: 160px;
    border: 2px dashed #d9d9d9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fafafa;
    transition: all 0.2s;
    overflow: hidden;
}

.qr-upload-area:hover {
    border-color: #1677ff;
    background: #f0f7ff;
}

.qr-upload-placeholder {
    text-align: center;
    color: #999;
    font-size: 13px;
}

.qr-upload-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 展示模式单选 */
.mode-radio-group {
    display: flex;
    gap: 12px;
    flex: 1;
}

.mode-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    transition: all 0.2s;
}

.mode-radio.active {
    border-color: #1677ff;
    color: #1677ff;
    background: #e6f4ff;
}

.mode-radio input {
    margin: 0;
}

/* 二维码包内二维码列表 */
.pkg-qrcode-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    margin-bottom: 10px;
    position: relative;
    background: #fafafa;
}

.pkg-qrcode-img {
    width: 70px;
    height: 70px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    flex-shrink: 0;
}

.pkg-qrcode-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pkg-qrcode-add {
    font-size: 24px;
    color: #ccc;
}

.pkg-qrcode-config {
    flex: 1;
    min-width: 0;
}

.config-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 6px;
}

.config-row:last-child {
    margin-bottom: 0;
}

.config-row label {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.config-input {
    width: 100px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
}

.config-input:focus {
    border-color: #1677ff;
}

.pkg-qrcode-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    background: #ff4d4f;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.pkg-qrcode-del:hover {
    background: #ff7875;
}

/* 链接包内链接列表 */
.pkg-link-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    margin-bottom: 10px;
    position: relative;
    background: #fafafa;
}

.pkg-link-index {
    width: 28px;
    height: 28px;
    background: #1677ff;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    flex-shrink: 0;
}

.pkg-link-config {
    flex: 1;
    min-width: 0;
}

.pkg-link-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    background: #ff4d4f;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.pkg-link-del:hover {
    background: #ff7875;
}

/* 自动回复 */
.auto-reply-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid #f0f0f0;
}

.ar-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.ar-tab:hover {
    color: #1677ff;
}

.ar-tab.active {
    color: #1677ff;
    border-bottom-color: #1677ff;
    font-weight: 500;
}

.auto-reply-panel {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
}

.ar-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ar-tutorial {
    color: #1677ff;
    font-size: 13px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.ar-tutorial:hover {
    text-decoration: underline;
}

.ar-filter-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ar-search-wrap {
    flex: 1;
    max-width: 300px;
}

.ar-search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}

.ar-search-input:focus {
    border-color: #1677ff;
}

.ar-selected-btn {
    height: 36px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #1677ff;
    color: #1677ff;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}

.ar-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
}

.ar-checkbox input {
    margin: 0;
}

/* 规则卡片 */
.ar-rule-card {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.ar-rule-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.ar-rule-card.disabled {
    opacity: 0.6;
}

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

.ar-rule-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ar-rule-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
}

.ar-rule-status.on {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

.ar-rule-status.off {
    background: #fff2f0;
    color: #ff4d4f;
    border: 1px solid #ffccc7;
}

.ar-rule-id {
    font-size: 13px;
    color: #999;
}

.ar-rule-body {
    padding: 12px 16px;
}

.ar-rule-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 8px;
}

.ar-rule-row:last-child {
    margin-bottom: 0;
}

.ar-rule-label {
    width: 50px;
    flex-shrink: 0;
    font-size: 13px;
    color: #999;
}

.ar-rule-value {
    font-size: 13px;
    color: #333;
    flex: 1;
}

.ar-rule-value.deleted {
    color: #ff4d4f;
    background: #fff2f0;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.ar-rule-tag {
    font-size: 12px;
    color: #13c2c2;
    background: #e6fffb;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #87e8de;
}

.ar-rule-card-tag {
    font-size: 12px;
    color: #1677ff;
    background: #e6f4ff;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #91caff;
    cursor: pointer;
    display: inline-block;
}

.ar-rule-link {
    font-size: 13px;
    color: #1677ff;
    cursor: pointer;
    text-decoration: underline;
}

.ar-rule-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

.ar-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    color: #fff;
    transition: opacity 0.2s;
}

.ar-btn:hover {
    opacity: 0.85;
}

.ar-btn-renew {
    background: #1677ff;
}

.ar-btn-edit {
    background: #fa8c16;
}

.ar-btn-delete {
    background: #ff4d4f;
}

.ar-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #f0f0f0;
}

/* 官方版自动回复 */
.official-intro-card {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f4ff 100%);
    border: 1px solid #91caff;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

.official-intro-header {
    margin-bottom: 16px;
}

.official-title {
    font-size: 18px;
    font-weight: 600;
    color: #1677ff;
    margin-bottom: 4px;
}

.official-subtitle {
    font-size: 13px;
    color: #666;
}

.official-features {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.official-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 250px;
}

.feature-icon {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.feature-icon svg {
    width: 20px;
    height: 20px;
}

.feature-content {
    flex: 1;
}

.feature-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.feature-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

.official-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.official-points {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.official-points-blue {
    background: #e6f4ff;
    color: #1677ff;
    border: 1px solid #91caff;
}

.official-points-green {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

.official-tutorial {
    color: #1677ff;
    font-size: 13px;
    text-decoration: none;
}

.official-tutorial:hover {
    text-decoration: underline;
}

.official-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
    max-width: 250px;
}

.official-search-input {
    width: 100%;
    height: 36px;
    padding: 0 36px 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}

.official-search-input:focus {
    border-color: #1677ff;
}

.official-search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #999;
}

.official-search-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.official-card-item {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: box-shadow 0.2s;
}

.official-card-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.official-card-info {
    flex: 1;
}

.official-card-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

.official-card-row:last-child {
    margin-bottom: 0;
}

.official-card-label {
    width: 70px;
    flex-shrink: 0;
    font-size: 13px;
    color: #999;
}

.official-card-value {
    font-size: 13px;
    color: #333;
    flex: 1;
}

.official-card-key {
    font-family: monospace;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 4px;
}

.official-copy-btn {
    padding: 2px 10px;
    background: #fff;
    border: 1px solid #1677ff;
    color: #1677ff;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.official-copy-btn:hover {
    background: #1677ff;
    color: #fff;
}

.official-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

/* 推送配置 */
.push-header {
    margin-bottom: 20px;
}

.push-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.push-subtitle {
    font-size: 13px;
    color: #999;
}

.push-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.push-tab {
    padding: 10px 24px;
    background: none;
    border: none;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.push-tab:hover {
    color: #1677ff;
}

.push-tab.active {
    color: #1677ff;
    border-bottom-color: #1677ff;
    font-weight: 500;
}

.push-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.push-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
}

.push-platforms {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.push-platform-card {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.push-platform-card:hover {
    border-color: #91caff;
}

.push-platform-card.active {
    border-color: #1677ff;
    background: #f0f7ff;
}

.platform-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.platform-info {
    flex: 1;
}

.platform-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.platform-type {
    font-size: 12px;
    color: #999;
}

.platform-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #fff2f0;
    color: #ff4d4f;
    border: 1px solid #ffccc7;
    flex-shrink: 0;
}

.platform-status.configured {
    background: #f6ffed;
    color: #52c41a;
    border-color: #b7eb8f;
}

.push-notify-types {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.notify-type-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

.notify-type-item input {
    margin: 0;
}

.push-notify-tip {
    font-size: 12px;
    color: #999;
    margin-top: 12px;
}

.push-webhook-wrap {
    display: flex;
}

.push-webhook-input {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}

.push-webhook-input:focus {
    border-color: #1677ff;
}

.push-check-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.push-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

.check-icon.success {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

.check-icon.warning {
    background: #fff2f0;
    color: #ff4d4f;
    border: 1px solid #ffccc7;
}

.check-label {
    color: #666;
    width: 100px;
}

.check-value {
    color: #333;
    font-weight: 500;
}

.push-check-tip {
    font-size: 12px;
    color: #999;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.push-save-bar {
    text-align: center;
    padding: 20px 0;
}

.btn-large {
    height: 44px;
    padding: 0 40px;
    font-size: 15px;
}

/* 推送记录 */
.push-record-filter {
    background: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.filter-item input {
    height: 32px;
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}

.filter-item input:focus {
    border-color: #1677ff;
}

.push-record-table {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* 私信聚合 */
.im-locked-card {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    margin-bottom: 20px;
}

.im-locked-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.im-locked-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.im-locked-desc {
    font-size: 14px;
    color: #999;
    margin-bottom: 16px;
}

.im-locked-link {
    color: #1677ff;
    font-size: 14px;
    text-decoration: none;
}

.im-locked-link:hover {
    text-decoration: underline;
}

.im-features-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.im-features-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.im-features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.im-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.im-feature-num {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

.im-feature-text {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    padding-top: 3px;
}

.im-chat-layout {
    display: flex;
    gap: 16px;
    height: 500px;
}

.im-account-panel, .im-chat-panel {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.im-panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.im-search-input {
    flex: 1;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}

.im-add-account {
    color: #1677ff;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.im-account-list, .im-chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.im-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 40px 0;
}

.im-empty-chat {
    text-align: center;
    padding: 60px 0;
    color: #999;
}

.im-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.im-chat-tip {
    display: block;
    margin-top: 8px;
    color: #1677ff;
    font-size: 13px;
    text-decoration: none;
}

/* 积分页面通用 */
.points-page {
    background: #f5f5f5;
    border-radius: 8px;
    min-height: 400px;
}

.points-header {
    background: #fff;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.points-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.points-label {
    font-size: 14px;
    color: #666;
}

.points-value {
    font-size: 18px;
    font-weight: bold;
    color: #fa8c16;
}

.points-cost {
    font-size: 13px;
    color: #999;
}

.points-list {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.points-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    gap: 20px;
}

.points-item:last-child {
    border-bottom: none;
}

.points-item-id {
    font-size: 13px;
    color: #999;
    width: 120px;
}

.points-item-info {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.points-item-status {
    width: 80px;
}

.points-item-time {
    font-size: 13px;
    color: #999;
    width: 160px;
}

/* 小圆码/红薯短链 */
.circle-tip-bar {
    background: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.circle-tip-bar a {
    color: #1677ff;
    text-decoration: none;
}

.circle-prices {
    display: flex;
    gap: 12px;
}

.circle-price {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
}

.circle-price.direct {
    background: #fff2f0;
    color: #ff4d4f;
    border: 1px solid #ffccc7;
}

.circle-price.relay {
    background: #e6f4ff;
    color: #1677ff;
    border: 1px solid #91caff;
}

/* 积分历史 */
.points-history-page {
    background: #f5f5f5;
    border-radius: 8px;
}

.points-history-header {
    background: #fff;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.points-history-list {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.points-history-item {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.points-history-item:last-child {
    border-bottom: none;
}

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

.ph-id {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.ph-change {
    font-size: 18px;
    font-weight: bold;
}

.ph-change.plus {
    color: #52c41a;
}

.ph-change.minus {
    color: #ff4d4f;
}

.ph-row {
    display: flex;
    margin-bottom: 6px;
    font-size: 13px;
}

.ph-row:last-child {
    margin-bottom: 0;
}

.ph-label {
    width: 70px;
    color: #999;
    flex-shrink: 0;
}

.ph-value {
    color: #333;
    flex: 1;
}

/* 卡片管理列表 */
.card-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.card-list-item:hover {
    background: #fafafa;
}

.card-list-item:last-child {
    border-bottom: none;
}

.card-item-left {
    flex: 1;
    min-width: 0;
}

.card-item-id {
    font-size: 13px;
    color: #999;
    margin-bottom: 6px;
}

.card-item-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.card-item-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.stat-today {
    color: #1677ff;
}

.stat-yesterday {
    color: #999;
}

.card-item-preview {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.preview-label, .link-label, .quick-label {
    font-size: 13px;
    color: #999;
    flex-shrink: 0;
    width: 60px;
}

.preview-content {
    background: #f5f5f5;
    border-radius: 6px;
    padding: 8px 12px;
    flex: 1;
    max-width: 300px;
}

.preview-title-text {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.preview-desc-text {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-item-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.link-value {
    font-size: 13px;
    color: #1677ff;
}

.card-item-quick {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-link {
    font-size: 12px;
    color: #1677ff;
    background: #e6f4ff;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #91caff;
}

.quick-link:hover {
    background: #bae0ff;
}

.card-item-right {
    flex-shrink: 0;
    margin-left: 20px;
}

.card-item-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 使用协议弹窗 */
.terms-modal {
    max-width: 600px !important;
    width: 90% !important;
}

.terms-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 20px;
}

.terms-section {
    margin-bottom: 16px;
}

.terms-section p {
    font-size: 13px;
    color: #333;
    line-height: 1.8;
    margin: 0;
}

.terms-list {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.terms-list li {
    font-size: 13px;
    color: #666;
    line-height: 2;
}

/* ========== 自动回复新弹窗样式 ========== */
.ar-form {
    padding: 8px 0;
}

.ar-form-item {
    margin-bottom: 16px;
}

.ar-form-label {
    display: block;
    font-size: 13px;
    color: #333;
    margin-bottom: 6px;
    font-weight: 500;
}

.ar-input-with-count {
    position: relative;
    display: flex;
    align-items: center;
}

.ar-input-with-count .form-input {
    flex: 1;
    padding-right: 50px;
}

.ar-input-count {
    position: absolute;
    right: 10px;
    font-size: 12px;
    color: #999;
}

.ar-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.ar-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}

.ar-radio input[type="radio"] {
    cursor: pointer;
}

.ar-selected-accounts-btn {
    margin-top: 8px;
    padding: 6px 12px;
    background: #e6f4ff;
    border: 1px solid #91caff;
    border-radius: 4px;
    color: #1677ff;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ar-selected-accounts-btn:hover {
    background: #bae0ff;
}

.ar-reply-mode-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ar-add-reply-btn {
    padding: 6px 12px;
    background: #f5f5f5;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.ar-add-reply-btn:hover {
    background: #e8e8e8;
    border-color: #bfbfbf;
}

.ar-reply-item {
    margin-bottom: 12px;
}

.ar-reply-label {
    font-size: 13px;
    color: #333;
    margin-bottom: 6px;
    font-weight: 500;
}

.ar-reply-input-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ar-reply-textarea {
    flex: 1;
    min-height: 60px !important;
    resize: vertical;
    padding: 8px 12px;
    font-size: 13px;
}

.ar-reply-delete {
    width: 32px;
    height: 32px;
    border: none;
    background: #fff2f0;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ar-reply-delete:hover {
    background: #ffccc7;
}

.ar-switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ar-link-tip {
    color: #1677ff;
    font-size: 13px;
    text-decoration: none;
    margin-right: 8px;
}

.ar-link-tip:hover {
    text-decoration: underline;
}

.ar-switch-label {
    font-size: 13px;
    color: #333;
}

.ar-advanced-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}

.ar-advanced-toggle:hover {
    background: #f5f5f5;
}

.ar-advanced-desc {
    flex: 1;
    color: #999;
    font-size: 12px;
}

.ar-advanced-arrow {
    color: #999;
    font-size: 12px;
}

.ar-advanced-content {
    margin-top: 10px;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}

.ar-expire-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ar-expire-input {
    width: 100px;
    text-align: center;
}

.ar-expire-unit {
    width: 80px;
}

.ar-points-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.ar-points-label {
    font-size: 13px;
    color: #333;
}

.ar-points-value {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.ar-enable-row {
    padding: 8px 0;
    border-top: 1px solid #f0f0f0;
    margin-top: 8px;
}

.ar-agreement-row {
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
    margin-top: 8px;
}

.ar-agreement-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    flex-wrap: wrap;
}

.ar-agreement-checkbox input[type="checkbox"] {
    cursor: pointer;
}

.ar-agreement-link {
    color: #1677ff;
    text-decoration: none;
    font-size: 13px;
}

.ar-agreement-link:hover {
    text-decoration: underline;
}

/* ========== 积分系统样式 ========== */
.points-display {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-right: 12px;
}

.points-display:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.points-icon {
    font-size: 14px;
}

.points-value {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.points-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.points-packages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.points-package-card {
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.points-package-card:hover {
    border-color: #91caff;
    background: #f0f7ff;
    transform: translateY(-2px);
}

.points-package-card.selected {
    border-color: #1677ff;
    background: #e6f4ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
}

.points-package-name {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    margin-bottom: 8px;
}

.points-package-points {
    font-size: 20px;
    font-weight: bold;
    color: #1677ff;
    margin-bottom: 8px;
}

.points-package-price {
    font-size: 16px;
    color: #ff4d4f;
    font-weight: bold;
}

/* 积分消耗提示 */
.points-cost-tip {
    margin-top: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fff7e6 0%, #fffbe6 100%);
    border: 1px solid #ffe58f;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #d46b08;
}

.points-cost-icon {
    font-size: 16px;
}

.points-cost-tip strong {
    color: #d46b08;
    font-weight: bold;
}

.points-cost-link {
    margin-left: auto;
    color: #1677ff;
    text-decoration: none;
    font-size: 12px;
}

.points-cost-link:hover {
    text-decoration: underline;
}

/* 用户下拉菜单 */
.user-dropdown {
    position: relative;
}

.user-dropdown .user-info {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
    color: #333;
}

.user-dropdown .user-info:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dropdown-arrow {
    font-size: 10px;
    color: #999;
    transition: transform 0.2s;
}

.user-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    min-width: 120px;
    overflow: hidden;
    display: none;
    z-index: 1000;
    border: 1px solid #f0f0f0;
}

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

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 13px;
    color: #333;
}

.dropdown-item:hover {
    background: #f5f5f5;
}

.dropdown-icon {
    font-size: 14px;
}

/* 个人中心页面 */
.profile-container {
    max-width: 800px;
    margin: 0 auto;
}

.profile-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
}

.profile-info {
    flex: 1;
}

.profile-username {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}

.profile-nickname {
    font-size: 14px;
    color: #999;
    margin-bottom: 8px;
}

.profile-tags {
    display: flex;
    gap: 8px;
}

.tag {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
}

.tag-vip {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    color: #fff;
}

.tag-normal {
    background: #f5f5f5;
    color: #999;
}

.tag-admin {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

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

.stat-item {
    text-align: center;
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 13px;
    color: #999;
}

.profile-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.profile-form .form-group {
    margin-bottom: 16px;
}

.profile-form .form-label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 6px;
    font-weight: 500;
}

.profile-form .form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.profile-form .form-input:focus {
    border-color: #1677ff;
}

.profile-form .form-input:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

.btn {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.2s;
}

.btn:hover {
    opacity: 0.8;
}

.btn-primary {
    background: #1677ff;
    color: #fff;
}

/* 二维码管理弹窗样式 */
.qr-form {
    padding: 10px 0;
}

.qr-form-item {
    margin-bottom: 20px;
}

.qr-form-label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
}

.qr-form-label.required::before {
    content: '*';
    color: #ff4d4f;
    margin-right: 4px;
}

.qr-form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.qr-form-input:focus {
    border-color: #1677ff;
}

.qr-form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}

.qr-form-textarea:focus {
    border-color: #1677ff;
}

.qr-mode-select {
    display: flex;
    gap: 20px;
}

.qr-mode-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    padding: 6px 0;
}

.qr-mode-option.active {
    color: #1677ff;
}

.qr-mode-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.qr-tip-box {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: #e6f4ff;
    border: 1px solid #91caff;
    border-radius: 4px;
    margin-bottom: 12px;
}

.qr-tip-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.qr-tip-title {
    font-size: 13px;
    color: #1677ff;
    font-weight: 500;
    margin-bottom: 4px;
}

.qr-tip-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}

/* 自动回复表格样式 */
.ar-table-wrapper {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.ar-data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ar-data-table thead th {
    background: #f5f7fa;
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: #606266;
    border-bottom: 1px solid #ebeef5;
}

.ar-data-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #ebeef5;
    vertical-align: middle;
}

.ar-data-table tbody tr:last-child td {
    border-bottom: none;
}

.ar-data-table tbody tr:hover {
    background: #fafafa;
}

.ar-cell-id {
    font-size: 14px;
    color: #303133;
}

.ar-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    margin-top: 4px;
}

.ar-status.on {
    color: #67c23a;
}

.ar-status.off {
    color: #909399;
}

.ar-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ar-cell-account {
    padding: 12px 16px !important;
}

.ar-rule-name {
    font-size: 14px;
    color: #303133;
    font-weight: 500;
    margin-bottom: 6px;
}

.ar-account-name {
    font-size: 12px;
    color: #909399;
    display: inline-block;
    padding: 2px 8px;
    background: #f5f7fa;
    border-radius: 3px;
}

.ar-account-name.deleted {
    color: #f56c6c;
    background: #fef0f0;
}

.ar-cell-match {
    padding: 12px 16px !important;
}

.ar-match-type {
    font-size: 13px;
    color: #606266;
    margin-bottom: 6px;
}

.ar-frequency-tag {
    display: inline-block;
    font-size: 12px;
    color: #67c23a;
    background: #f0f9eb;
    padding: 2px 8px;
    border-radius: 3px;
}

.ar-cell-reply {
    padding: 12px 16px !important;
}

.ar-reply-text {
    font-size: 13px;
    color: #303133;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-card-tag {
    display: inline-block;
    font-size: 12px;
    color: #409eff;
    background: #ecf5ff;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
}

.ar-card-tag:hover {
    background: #d9ecff;
}

.ar-cell-expire {
    padding: 12px 16px !important;
}

.ar-expire-date {
    font-size: 13px;
    color: #606266;
    cursor: pointer;
}

.ar-expire-date:hover {
    color: #409eff;
}

.ar-cell-actions {
    padding: 12px 16px !important;
}

.ar-action-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ar-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.ar-btn:hover {
    opacity: 0.85;
}

.ar-btn-renew {
    background: #409eff;
    color: #fff;
}

.ar-btn-edit {
    background: #e6a23c;
    color: #fff;
}

.ar-btn-delete {
    background: #f56c6c;
    color: #fff;
}

/* 自动回复表格分页样式 */
.ar-table-wrapper .ar-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid #ebeef5;
    background: #fff;
    gap: 10px;
}

.ar-table-wrapper .pagination-total {
    font-size: 13px;
    color: #606266;
    margin-right: auto;
}

.ar-table-wrapper .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ar-table-wrapper .page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid #dcdfe6;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #606266;
}

.ar-table-wrapper .page-btn.active {
    background: #409eff;
    color: #fff;
    border-color: #409eff;
}

.ar-table-wrapper .page-jump {
    font-size: 13px;
    color: #606266;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ar-table-wrapper .page-input {
    width: 48px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}

/* 账号管理表格样式 */
.account-table-wrapper {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.account-data-table {
    width: 100%;
    border-collapse: collapse;
}

.account-data-table thead th {
    background: #f5f7fa;
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: #606266;
    border-bottom: 1px solid #ebeef5;
    white-space: nowrap;
}

.account-data-table thead th.checkbox-cell {
    width: 40px;
    text-align: center;
}

.account-data-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #ebeef5;
    vertical-align: middle;
    text-align: left;
}

.account-data-table tbody td.checkbox-cell {
    text-align: center;
}

.account-data-table tbody tr:last-child td {
    border-bottom: none;
}

.account-data-table tbody tr:hover {
    background: #fafafa;
}

.account-cell-id {
    font-size: 14px;
    color: #303133;
    width: 60px;
}

.account-cell-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px !important;
}

.account-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.account-avatar-placeholder {
    font-size: 18px;
}

.account-detail {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.account-name {
    font-size: 14px;
    color: #303133;
    font-weight: 500;
    margin-bottom: 4px;
}

.account-remark {
    color: #909399;
    font-weight: normal;
}

.account-uid {
    font-size: 12px;
    color: #909399;
}

.account-cell-status,
.account-cell-update {
    padding: 12px 16px !important;
    text-align: left;
}

.login-status,
.connect-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    margin-bottom: 4px;
    justify-content: flex-start;
}

.login-status.online,
.connect-status.connected {
    color: #67c23a;
}

.login-status.offline,
.connect-status.disconnected {
    color: #909399;
}

.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.status-time {
    font-size: 12px;
    color: #909399;
    text-align: left;
}

.account-cell-info-col {
    padding: 12px 16px !important;
    text-align: left;
}

.account-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #606266;
    margin-bottom: 8px;
    justify-content: flex-start;
}

.account-bindings {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.binding-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #e6a23c;
    background: #fdf6ec;
    padding: 2px 8px;
    border-radius: 3px;
}

.binding-tag.bound {
    color: #67c23a;
    background: #f0f9eb;
}

.binding-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.account-cell-actions {
    padding: 12px 16px !important;
    text-align: left;
}

.account-action-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.action-row {
    display: flex;
    gap: 6px;
}

.account-btn {
    padding: 4px 10px;
    border: 1px solid #dcdfe6;
    background: #fff;
    border-radius: 4px;
    font-size: 12px;
    color: #606266;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.account-btn:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background: #ecf5ff;
}

.account-btn-delete {
    color: #f56c6c;
    border-color: #fbc4c4;
    background: #fef0f0;
}

.account-btn-delete:hover {
    color: #fff;
    border-color: #f56c6c;
    background: #f56c6c;
}

.douyin-icon {
    margin-right: 2px;
}

/* 自动回复多选账号样式 */
.ar-account-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ar-account-tags {
    flex: 1;
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    background: #fff;
}

.ar-account-placeholder {
    color: #c0c4cc;
    font-size: 13px;
}

.ar-account-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: #ecf5ff;
    color: #409eff;
    border-radius: 4px;
    font-size: 12px;
}

.ar-account-tag-remove {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
}

.ar-account-tag-remove:hover {
    opacity: 1;
}

.ar-account-select {
    height: 36px;
    padding: 0 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    color: #606266;
    background: #fff;
    cursor: pointer;
    outline: none;
}

.ar-account-select:hover {
    border-color: #c6e2ff;
}

.ar-selected-count {
    font-size: 13px;
    color: #909399;
    white-space: nowrap;
}

/* 账号管理表格分页样式 */
.account-table-wrapper .account-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid #ebeef5;
    background: #fff;
    gap: 10px;
}

.account-table-wrapper .pagination-total {
    font-size: 13px;
    color: #606266;
    margin-right: auto;
}

.account-table-wrapper .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-table-wrapper .page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid #dcdfe6;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #606266;
}

.account-table-wrapper .page-btn.active {
    background: #409eff;
    color: #fff;
    border-color: #409eff;
}

.account-table-wrapper .page-size {
    height: 30px;
    padding: 0 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    color: #606266;
    outline: none;
    cursor: pointer;
}

.account-table-wrapper .page-jump {
    font-size: 13px;
    color: #606266;
    display: flex;
    align-items: center;
    gap: 4px;
}

.account-table-wrapper .page-input {
    width: 48px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}

.qr-upload-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.qr-upload-item {
    position: relative;
    width: 80px;
    height: 80px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    overflow: hidden;
}

.qr-upload-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qr-upload-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.qr-upload-delete:hover {
    background: rgba(0, 0, 0, 0.8);
}

.qr-upload-add {
    width: 80px;
    height: 80px;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s;
}

.qr-upload-add:hover {
    border-color: #1677ff;
}

.qr-upload-add-icon {
    font-size: 28px;
    color: #d9d9d9;
}

/* 二维码管理表格样式 */
.qr-table-wrapper {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.qr-data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.qr-data-table thead th {
    background: #f5f7fa;
    padding: 14px 16px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    border-bottom: 1px solid #ebeef5;
}

.qr-data-table tbody td {
    padding: 16px;
    border-bottom: 1px solid #ebeef5;
    vertical-align: middle;
}

.qr-data-table tbody tr:last-child td {
    border-bottom: none;
}

.qr-data-table tbody tr:hover {
    background: #fafafa;
}

/* 分页样式 */
.qr-table-wrapper .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid #ebeef5;
    background: #fff;
}

.qr-table-wrapper .pagination-total {
    font-size: 13px;
    color: #666;
}

.qr-table-wrapper .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qr-table-wrapper .page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d9d9d9;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
}

.qr-table-wrapper .page-btn.active {
    background: #1677ff;
    color: #fff;
    border-color: #1677ff;
}

.qr-table-wrapper .page-jump {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
}

.qr-table-wrapper .page-input {
    width: 50px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}

.qr-cell-id {
    font-size: 14px;
    color: #666;
}

.qr-cell-title {
    padding: 12px 16px !important;
}

.qr-title-main {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin-bottom: 6px;
}

.qr-title-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.stat-num {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    margin-left: 2px;
}

.stat-today {
    background: #e6f4ff;
    color: #1677ff;
}

.stat-yesterday {
    background: #f6ffed;
    color: #52c41a;
}

.qr-title-time {
    font-size: 12px;
    color: #999;
}

.qr-cell-image {
    text-align: left;
}

.qr-img-thumb {
    width: 100px;
    height: 100px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

.qr-img-placeholder {
    font-size: 12px;
    color: #999;
}

.qr-cell-actions {
    text-align: center;
}

.qr-extract-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.copy-icon {
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.2s;
}

.copy-icon:hover {
    opacity: 0.7;
}

.qr-action-btns {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.qr-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.qr-btn:hover {
    opacity: 0.85;
}

.qr-btn-edit {
    background: #ff7d00;
    color: #fff;
}

.qr-btn-delete {
    background: #ff4d4f;
    color: #fff;
}

/* 卡片管理表格样式 */
.card-table-wrapper {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.card-data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.card-data-table thead th {
    background: #f5f7fa;
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: #606266;
    border-bottom: 1px solid #ebeef5;
}

.card-data-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #ebeef5;
    vertical-align: middle;
}

.card-data-table tbody tr:last-child td {
    border-bottom: none;
}

.card-data-table tbody tr:hover {
    background: #fafafa;
}

.card-cell-id {
    font-size: 14px;
    color: #303133;
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ff7d00;
    border-radius: 50%;
}

.card-cell-title {
    padding: 14px 16px !important;
}

.card-title-main {
    font-size: 14px;
    color: #303133;
    font-weight: 500;
    margin-bottom: 8px;
}

.card-title-stats {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #909399;
}

.card-cell-preview {
    padding: 14px 16px !important;
}

.card-preview-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #f5f7fa;
    border-radius: 6px;
    max-width: 340px;
}

.card-preview-logo {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.card-preview-logo-placeholder {
    font-size: 22px;
    color: #ccc;
}

.card-preview-content {
    flex: 1;
    min-width: 0;
}

.card-preview-title {
    font-size: 13px;
    color: #303133;
    font-weight: 500;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-preview-desc {
    font-size: 12px;
    color: #909399;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-cell-link {
    padding: 14px 16px !important;
}

.card-link-main {
    font-size: 13px;
    color: #409eff;
    margin-bottom: 8px;
    cursor: pointer;
}

.card-link-main:hover {
    text-decoration: underline;
}

.card-link-quick {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #606266;
    flex-wrap: wrap;
}

.quick-link-item {
    cursor: pointer;
    color: #606266;
}

.quick-link-item:hover {
    color: #409eff;
}

.copy-icon-small {
    cursor: pointer;
    font-size: 13px;
    opacity: 0.7;
}

.copy-icon-small:hover {
    opacity: 1;
}

.card-cell-actions {
    padding: 14px 16px !important;
}

.card-action-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.card-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.card-btn:hover {
    opacity: 0.85;
}

.card-btn-active {
    background: #67c23a;
    color: #fff;
}

.card-btn-activate {
    background: #67c23a;
    color: #fff;
}

.card-btn-edit {
    background: #e6a23c;
    color: #fff;
}

.card-btn-data {
    background: #409eff;
    color: #fff;
}

.card-btn-link {
    background: #909399;
    color: #fff;
}

.card-btn-delete {
    background: #f56c6c;
    color: #fff;
}

/* 卡片表格分页样式 */
.card-table-wrapper .pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid #ebeef5;
    background: #fff;
    gap: 10px;
}

.card-table-wrapper .pagination-total {
    font-size: 13px;
    color: #606266;
    margin-right: auto;
}

.card-table-wrapper .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-table-wrapper .page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid #dcdfe6;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #606266;
}

.card-table-wrapper .page-btn.active {
    background: #409eff;
    color: #fff;
    border-color: #409eff;
}

.card-table-wrapper .page-size {
    height: 30px;
    padding: 0 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    color: #606266;
    outline: none;
    cursor: pointer;
}

.card-table-wrapper .page-jump {
    font-size: 13px;
    color: #606266;
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-table-wrapper .page-input {
    width: 48px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}