/**
 * ============================================================================
 * 数字农业管理平台 - 后台管理界面通用样式表
 * @author 彭浩 <2443257717@qq.com>
 * @date 2026-07-21
 * ============================================================================
 */

:root {
    --xp-primary: #10b981;
    --xp-primary-dark: #059669;
    --xp-primary-light: #34d399;
    --xp-secondary: #06b6d4;
    --xp-accent: #f59e0b;
    --xp-success: #22c55e;
    --xp-warning: #f97316;
    --xp-danger: #ef4444;
    --xp-bg-sidebar: #f8fafc;
    --xp-bg-main: #f0fdf4;
    --xp-bg-card: #ffffff;
    --xp-text-primary: #1f2937;
    --xp-text-secondary: #4b5563;
    --xp-text-muted: #9ca3af;
    --xp-border: #e2e8f0;
    --xp-border-light: #f3f4f6;
    --xp-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --xp-shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --xp-radius-sm: 8px;
    --xp-radius-md: 12px;
    --xp-radius-lg: 16px;
    --xp-radius-xl: 20px;
}

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

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    background-color: var(--xp-bg-main);
    color: var(--xp-text-primary);
    font-size: 14px;
    line-height: 1.5;
}

a {
    color: var(--xp-primary);
    text-decoration: none;
}

a:hover {
    color: var(--xp-primary-dark);
}

.xp-layout {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.xp-sidebar {
    width: 224px;
    background-color: var(--xp-bg-sidebar);
    color: var(--xp-text-secondary);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    overflow: hidden;
    flex-shrink: 0;
    border-right: 1px solid var(--xp-border);
}

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

.xp-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.1);
    border-radius: 4px;
}

.xp-layout.xp-collapsed .xp-sidebar {
    width: 64px;
}

.xp-sidebar .xp-logo {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid var(--xp-border);
    white-space: nowrap;
    overflow: hidden;
    padding: 0 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.xp-sidebar .xp-menu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    flex: 1;
    overflow-y: auto;
}

.xp-sidebar .xp-menu li {
    margin: 4px 8px;
    border-radius: var(--xp-radius-sm);
    transition: all 0.2s ease;
}

.xp-sidebar .xp-menu li:hover {
    background-color: #f1f5f9;
}

.xp-sidebar .xp-menu a {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: var(--xp-text-secondary);
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
    border-radius: var(--xp-radius-sm);
}

.xp-sidebar .xp-menu a:hover {
    color: var(--xp-primary);
    background-color: #ecfdf5;
}

.xp-sidebar .xp-menu a.xp-active {
    background: linear-gradient(135deg, var(--xp-primary), var(--xp-primary-light));
    color: #fff;
}

.xp-sidebar .xp-menu-icon {
    width: 20px;
    text-align: center;
    margin-right: 10px;
    font-size: 16px;
    flex-shrink: 0;
}

.xp-layout.xp-collapsed .xp-menu-text {
    display: none;
}

.xp-layout.xp-collapsed .xp-menu a {
    padding: 10px 22px;
    justify-content: center;
}

.xp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background-color: var(--xp-bg-main);
    min-width: 0;
}

.xp-header {
    height: 60px;
    background-color: var(--xp-bg-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-shadow: var(--xp-shadow);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.xp-content {
    padding: 12px 16px;
    flex: 1;
}

.xp-card {
    background-color: var(--xp-bg-card);
    border-radius: var(--xp-radius-lg);
    box-shadow: var(--xp-shadow);
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.xp-card:hover {
    box-shadow: var(--xp-shadow-lg);
}

.xp-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--xp-text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.xp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: none;
    border-radius: var(--xp-radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    text-decoration: none;
    line-height: 1;
    font-weight: 500;
}

.xp-btn:hover {
    transform: translateY(-0.5px);
    box-shadow: var(--xp-shadow-lg);
}

.xp-btn:active {
    transform: translateY(0);
}

.xp-btn-primary {
    background: linear-gradient(135deg, var(--xp-primary), var(--xp-primary-light));
    color: #fff;
}

.xp-btn-primary:hover {
    background: linear-gradient(135deg, var(--xp-primary-dark), var(--xp-primary));
}

.xp-btn-danger {
    background-color: var(--xp-danger);
    color: #fff;
}

.xp-btn-danger:hover {
    background-color: #dc2626;
}

.xp-btn-default {
    background-color: #f3f4f6;
    color: var(--xp-text-secondary);
    border: 1px solid var(--xp-border);
}

.xp-btn-default:hover {
    background-color: #e5e7eb;
}

.xp-btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.2;
}

.xp-btn-link {
    background: transparent;
    color: var(--xp-primary);
    padding: 4px 8px;
}

.xp-btn-link:hover {
    background-color: rgba(16, 185, 129, 0.1);
}

/* ===== 操作列图标按钮（紧凑型，防换行） ===== */
.xp-actions { display: flex; align-items: center; justify-content: flex-start; gap: 4px; flex-wrap: nowrap; }
.xp-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.18s;
    font-size: 13px;
    padding: 0;
    flex-shrink: 0;
    position: relative;
}
.xp-action-btn:hover { transform: translateY(-1px); }
.xp-action-btn i { line-height: 1; }

/* 颜色变体 */
.xp-action-edit:hover { background-color: #dcfce7; border-color: #86efac; color: #15803d; }
.xp-action-delete:hover { background-color: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.xp-action-view:hover { background-color: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.xp-action-blue:hover { background-color: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.xp-action-yellow:hover { background-color: #fef3c7; border-color: #fcd34d; color: #b45309; }
.xp-action-green:hover { background-color: #dcfce7; border-color: #86efac; color: #15803d; }
.xp-action-purple:hover { background-color: #f3e8ff; border-color: #c4b5fd; color: #6d28d9; }

/* tooltip 提示（纯CSS，title属性的增强替代） */
.xp-action-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1f2937;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    pointer-events: none;
    z-index: 100;
    font-weight: 500;
}
.xp-action-btn[data-tip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    pointer-events: none;
}
.xp-action-btn[data-tip]:hover::after,
.xp-action-btn[data-tip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.xp-table-wrap {
    background-color: var(--xp-bg-card);
    border-radius: var(--xp-radius-lg);
    box-shadow: var(--xp-shadow);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

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

.xp-table th, .xp-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--xp-border-light);
}

.xp-table th {
    background-color: #fafafa;
    color: var(--xp-text-primary);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.xp-table tbody tr:hover {
    background-color: #f0fdf4;
}

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

.xp-table .xp-table-actions .xp-btn + .xp-btn {
    margin-left: 6px;
}

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

.xp-form-label {
    display: block;
    margin-bottom: 6px;
    color: var(--xp-text-primary);
    font-weight: 500;
    font-size: 14px;
}

.xp-input, .xp-select, .xp-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-radius-sm);
    font-size: 14px;
    color: var(--xp-text-primary);
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.xp-input:focus, .xp-select:focus, .xp-textarea:focus {
    outline: none;
    border-color: var(--xp-primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.xp-input::placeholder, .xp-textarea::placeholder {
    color: var(--xp-text-muted);
}

.xp-form-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.xp-form-inline .xp-form-group {
    margin-bottom: 0;
}

.xp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.xp-stat-card {
    background-color: var(--xp-bg-card);
    border-radius: var(--xp-radius-xl);
    box-shadow: var(--xp-shadow);
    padding: 24px;
    display: flex;
    align-items: center;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.xp-stat-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 100px;
    height: 100px;
    opacity: 0.05;
    pointer-events: none;
}

.xp-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--xp-shadow-lg);
}

.xp-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--xp-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-right: 20px;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.xp-stat-icon-green {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.xp-stat-icon-blue {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.xp-stat-icon-orange {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.xp-stat-icon-red {
    background: linear-gradient(135deg, #ef4444, #f87171);
}

.xp-stat-info {
    flex: 1;
    min-width: 0;
}

.xp-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--xp-text-primary);
    line-height: 1.2;
}

.xp-stat-label {
    font-size: 13px;
    color: var(--xp-text-muted);
    margin-bottom: 4px;
}

.xp-stat-desc {
    font-size: 12px;
    color: var(--xp-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.xp-stat-trend {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.xp-stat-trend-up {
    color: var(--xp-success);
}

.xp-stat-trend-down {
    color: var(--xp-danger);
}

.xp-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 0;
    gap: 6px;
    flex-wrap: wrap;
}

.xp-pagination a, .xp-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--xp-radius-sm);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}

.xp-pagination a {
    background-color: #fff;
    color: var(--xp-text-secondary);
    border: 1px solid var(--xp-border);
}

.xp-pagination a:hover {
    border-color: var(--xp-primary);
    color: var(--xp-primary);
}

.xp-pagination .xp-active span {
    background: linear-gradient(135deg, var(--xp-primary), var(--xp-primary-light));
    color: #fff;
    border-color: var(--xp-primary);
}

.xp-pagination .xp-disabled span {
    color: var(--xp-text-muted);
    background-color: #f3f4f6;
    border-color: var(--xp-border);
    cursor: not-allowed;
}

.xp-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.xp-badge-success {
    background-color: #d1fae5;
    color: #065f46;
}

.xp-badge-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.xp-badge-warning {
    background-color: #fef3c7;
    color: #92400e;
}

.xp-badge-gray {
    background-color: #f3f4f6;
    color: var(--xp-text-secondary);
}

.xp-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(16, 24, 40, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.xp-modal-overlay.xp-show {
    opacity: 1;
    visibility: visible;
}

.xp-modal-box {
    background: #fff;
    border-radius: var(--xp-radius-lg);
    width: 480px;
    max-width: 90%;
    max-height: 85vh;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    transform: scale(0.92) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.xp-modal-overlay.xp-show .xp-modal-box {
    transform: scale(1) translateY(0);
}

.xp-modal-box.xp-modal-lg {
    width: 720px;
    max-width: 92%;
}

.xp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--xp-border-light);
    flex-shrink: 0;
    background-color: #fff;
}

.xp-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--xp-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.xp-modal-title i {
    color: var(--xp-primary);
}

.xp-modal-close {
    color: var(--xp-text-muted);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
    padding: 4px;
    border-radius: 4px;
}

.xp-modal-close:hover {
    color: var(--xp-text-primary);
    background-color: #f3f4f6;
}

.xp-modal-body {
    color: var(--xp-text-secondary);
    line-height: 1.6;
    padding: 20px 24px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.xp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--xp-border-light);
    flex-shrink: 0;
    background-color: #fff;
}

.xp-toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.xp-toast {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: var(--xp-radius-sm);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: xpToastIn 0.3s ease;
    pointer-events: auto;
    white-space: nowrap;
}

.xp-toast-success { background: linear-gradient(135deg, var(--xp-primary), var(--xp-primary-light)); }
.xp-toast-error { background-color: var(--xp-danger); }
.xp-toast-warning { background-color: var(--xp-accent); }

@keyframes xpToastIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.xp-image-preview-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    cursor: zoom-out;
}

.xp-image-preview-overlay.xp-show {
    opacity: 1;
    visibility: visible;
}

.xp-image-preview-overlay img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.xp-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.xp-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--xp-primary);
    border-radius: 50%;
    animation: xpSpin 1s linear infinite;
}

@keyframes xpSpin {
    to { transform: rotate(360deg); }
}

.xp-main::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.xp-main::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.xp-text-right { text-align: right; }
.xp-text-center { text-align: center; }
.xp-text-left { text-align: left; }
.xp-mb-0 { margin-bottom: 0 !important; }
.xp-ml-2 { margin-left: 8px; }
.xp-mr-2 { margin-right: 8px; }
.xp-hidden { display: none !important; }
.xp-flex { display: flex; }
.xp-items-center { align-items: center; }
.xp-justify-between { justify-content: space-between; }

.xp-progress-bar {
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.xp-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.xp-progress-green { background: linear-gradient(90deg, var(--xp-primary), var(--xp-primary-light)); }
.xp-progress-blue { background-color: var(--xp-secondary); }
.xp-progress-orange { background-color: var(--xp-accent); }

.xp-search-area {
    padding: 16px;
    border-bottom: 1px solid var(--xp-border-light);
    background-color: #fafafa;
}

.xp-toolbar {
    padding: 16px;
    border-bottom: 1px solid var(--xp-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.xp-form-card {
    background-color: var(--xp-bg-card);
    border-radius: var(--xp-radius-lg);
    box-shadow: var(--xp-shadow);
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.xp-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--xp-border-light);
    margin-top: 20px;
}

.xp-chart-card {
    background-color: var(--xp-bg-card);
    border-radius: var(--xp-radius-xl);
    box-shadow: var(--xp-shadow);
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.xp-chart-card:hover {
    box-shadow: var(--xp-shadow-lg);
}

.xp-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.xp-chart-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--xp-text-primary);
    display: flex;
    align-items: center;
}

.xp-chart-title i {
    color: var(--xp-primary);
    margin-right: 8px;
}

.xp-chart-subtitle {
    font-size: 12px;
    color: var(--xp-text-muted);
}

.xp-sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--xp-border);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.xp-sidebar-footer-content {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: var(--xp-radius-md);
    padding: 12px;
    text-align: center;
}

.xp-sidebar-footer-content .xp-footer-title {
    font-size: 12px;
    color: var(--xp-primary-dark);
    font-weight: 500;
    margin-bottom: 4px;
}

.xp-sidebar-footer-content .xp-footer-desc {
    font-size: 11px;
    color: var(--xp-text-muted);
}

.xp-sidebar-footer-content .xp-footer-icon {
    margin-top: 8px;
    color: var(--xp-primary);
    font-size: 14px;
}

.xp-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--xp-primary), var(--xp-primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

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

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

.xp-header-date {
    display: flex;
    align-items: center;
    color: var(--xp-text-secondary);
    font-size: 14px;
}

.xp-header-date i {
    color: var(--xp-primary);
    margin-right: 8px;
}

.xp-notifications {
    position: relative;
    cursor: pointer;
}

.xp-notifications i {
    color: var(--xp-text-muted);
    font-size: 18px;
    transition: color 0.2s;
}

.xp-notifications:hover i {
    color: var(--xp-primary);
}

.xp-notifications .xp-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background-color: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xp-help {
    cursor: pointer;
}

.xp-help i {
    color: var(--xp-text-muted);
    font-size: 18px;
    transition: color 0.2s;
}

.xp-help:hover i {
    color: var(--xp-primary);
}

.xp-user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--xp-radius-sm);
    transition: background-color 0.2s;
}

.xp-user-info:hover {
    background-color: #f0fdf4;
}

.xp-user-info .xp-user-name {
    font-size: 14px;
    color: var(--xp-text-primary);
    font-weight: 500;
    margin-right: 8px;
}

.xp-user-info .xp-user-arrow {
    font-size: 12px;
    color: var(--xp-text-muted);
    transition: transform 0.2s;
}

.xp-user-info:hover .xp-user-arrow {
    transform: rotate(180deg);
}

.xp-menu-group {
    margin: 2px 0;
}

.xp-menu-item {
    color: var(--xp-text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 14px;
    border-radius: var(--xp-radius-sm);
    margin: 0 8px;
    text-decoration: none;
}

.xp-menu-item:hover {
    background-color: #f1f5f9;
    color: var(--xp-primary-dark);
}

.xp-menu-item.active {
    background: linear-gradient(135deg, var(--xp-primary), var(--xp-primary-light));
    color: #fff;
}

.xp-menu-item.active i {
    color: #fff;
}

.xp-menu-icon {
    width: 20px;
    text-align: center;
    margin-right: 10px;
    font-size: 15px;
    flex-shrink: 0;
}

.xp-menu-text {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xp-menu-arrow {
    font-size: 11px;
    color: var(--xp-text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

.xp-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.xp-submenu.open {
    max-height: 600px;
}

.xp-submenu .xp-menu-item {
    font-size: 13px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.xp-frame-wrapper.xp-collapsed .xp-sidebar {
    width: 64px;
}

.xp-frame-wrapper.xp-collapsed .xp-menu-text,
.xp-frame-wrapper.xp-collapsed .xp-menu-arrow {
    display: none !important;
}

.xp-frame-wrapper.xp-collapsed .xp-menu-item {
    justify-content: center;
    padding: 10px 0;
}

.xp-frame-wrapper.xp-collapsed .xp-menu-icon {
    margin-right: 0;
}

.xp-toggle-sidebar {
    color: var(--xp-text-muted);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
    padding: 4px 8px;
    border-radius: var(--xp-radius-sm);
    margin-right: 16px;
}

.xp-toggle-sidebar:hover {
    color: var(--xp-primary);
    background-color: #f0fdf4;
}

.xp-iframe {
    width: 100%;
    height: calc(100vh - 60px);
    border: none;
}

.xp-content-wrapper {
    flex: 1;
    overflow: hidden;
    background-color: var(--xp-bg-main);
}

.xp-frame-wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

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

.xp-log-table th, .xp-log-table td {
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid var(--xp-border-light);
}

.xp-log-table th {
    background-color: #fafafa;
    color: var(--xp-text-muted);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.xp-log-table tbody tr:hover {
    background-color: #f0fdf4;
}

.xp-log-table tbody tr:last-child td {
    border-bottom: none;
}

.xp-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.xp-log-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--xp-text-primary);
    display: flex;
    align-items: center;
}

.xp-log-title i {
    color: var(--xp-primary);
    margin-right: 10px;
}

.xp-log-more {
    font-size: 13px;
    color: var(--xp-primary);
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.xp-log-more:hover {
    color: var(--xp-primary-dark);
}

.xp-log-more i {
    margin-left: 4px;
    font-size: 12px;
}

.xp-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.xp-search-form .xp-input {
    width: 200px;
}

.xp-search-form .xp-select {
    width: 140px;
}

.xp-search-form .xp-btn {
    white-space: nowrap;
}

.xp-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
}

.xp-status-active {
    background-color: #d1fae5;
    color: #065f46;
}

.xp-status-inactive {
    background-color: #fee2e2;
    color: #991b1b;
}

.xp-status-pending {
    background-color: #fef3c7;
    color: #92400e;
}

.xp-table-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    flex-wrap: nowrap;
}

.xp-table-actions .xp-btn {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 6px;
}

.xp-btn-edit {
    background-color: #eff6ff;
    color: #2563eb;
}

.xp-btn-edit:hover {
    background-color: #dbeafe;
}

.xp-btn-delete {
    background-color: #fef2f2;
    color: #dc2626;
}

.xp-btn-delete:hover {
    background-color: #fee2e2;
}

.xp-btn-view {
    background-color: #f0fdf4;
    color: var(--xp-primary);
}

.xp-btn-view:hover {
    background-color: #d1fae5;
}

.xp-btn-roles {
    background-color: #faf5ff;
    color: #7c3aed;
}

.xp-btn-roles:hover {
    background-color: #f3e8ff;
}

.xp-btn-reset {
    background-color: #fffbeb;
    color: #d97706;
}

.xp-btn-reset:hover {
    background-color: #fef3c7;
}

.xp-user-wrapper {
    position: relative;
}

.xp-user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 160px;
    background-color: #fff;
    border-radius: var(--xp-radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--xp-border);
    z-index: 200;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.xp-user-wrapper:hover .xp-user-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.xp-user-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    color: var(--xp-text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.xp-user-menu-item:hover {
    background-color: #f0fdf4;
    color: var(--xp-primary);
}

/* ============================================================================
 * 图标选择器样式
 * ============================================================================ */

/* 图标选择器网格容器 */
.xp-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px;
}

/* 图标选择器单项 */
.xp-icon-picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    color: #4b5563;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.xp-icon-picker-item:hover {
    background-color: #f0fdf4;
    color: var(--xp-primary);
    transform: scale(1.1);
}

.xp-icon-picker-item.selected {
    background-color: #dcfce7;
    border-color: var(--xp-primary);
    color: var(--xp-primary-dark);
}

/* 图标输入框组合样式 */
.xp-icon-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.xp-icon-input-group .xp-input {
    flex: 1;
}

.xp-icon-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    font-size: 18px;
    color: #6b7280;
    flex-shrink: 0;
}

.xp-icon-preview i {
    font-size: 18px;
}

.xp-icon-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: var(--xp-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.xp-icon-picker-btn:hover {
    background-color: var(--xp-primary-dark);
}

/* ============================================================================
 * 文件选择器样式
 * ============================================================================ */

/* Tab切换样式 */
.xp-picker-tab {
    padding: 8px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.xp-picker-tab:hover {
    color: var(--xp-primary);
}

.xp-picker-tab.active {
    color: var(--xp-primary);
    border-bottom-color: var(--xp-primary);
    font-weight: 600;
}

/* 文件网格 */
.xp-file-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

/* 文件选择器单项 */
.xp-file-picker-item {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fff;
}

.xp-file-picker-item:hover {
    border-color: var(--xp-primary-light);
    background-color: #f0fdf4;
}

.xp-file-picker-item.selected {
    border-color: var(--xp-primary);
    background-color: #dcfce7;
}

/* 文件缩略图 */
.xp-file-picker-thumb {
    width: 100%;
    height: 100px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9fafb;
    margin-bottom: 6px;
}

/* 文件名 */
.xp-file-picker-name {
    font-size: 12px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

/* 文件信息 */
.xp-file-picker-meta {
    font-size: 11px;
    color: #9ca3af;
}

/* 上传区域 */
.xp-picker-upload-zone {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f9fafb;
}

.xp-picker-upload-zone:hover {
    border-color: var(--xp-primary);
    background-color: #f0fdf4;
}

.xp-picker-upload-zone.xp-dragover {
    border-color: var(--xp-primary);
    background-color: #dcfce7;
}

/* ============================================================================
 * 图片选择器输入框组合样式
 * ============================================================================ */

.xp-image-input-group {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.xp-image-input-group .xp-input {
    flex: 1;
}

.xp-image-preview-box {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

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

.xp-image-preview-box .xp-image-placeholder {
    color: #d1d5db;
    font-size: 24px;
}

.xp-image-input-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.xp-image-input-btns .xp-btn {
    padding: 6px 12px;
    font-size: 13px;
    white-space: nowrap;
}

.xp-image-clear-btn {
    color: #ef4444 !important;
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
}

.xp-image-clear-btn:hover {
    background-color: #fee2e2 !important;
}

.xp-user-menu-item.xp-logout:hover {
    background-color: #fef2f2;
    color: var(--xp-danger);
}

.xp-user-menu .xp-user-menu-item:not(:last-child) {
    border-bottom: 1px solid var(--xp-border-light);
}

.xp-hidden {
    display: none !important;
}

/* ============================================================================
 * 记忆标签栏样式（Tab导航）
 * ============================================================================ */

/* 标签栏容器 */
.xp-tabs-bar {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 12px;
    height: 40px;
    flex-shrink: 0;
    overflow: hidden;
    gap: 4px;
}

/* 标签滚动区域 */
.xp-tabs-scroll {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.xp-tabs-scroll::-webkit-scrollbar {
    display: none;
}

/* 单个标签项 */
.xp-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: #6b7280;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
    user-select: none;
}

.xp-tab-item:hover {
    color: var(--xp-primary);
    background-color: #f0fdf4;
    border-color: var(--xp-primary-light);
}

.xp-tab-item.active {
    color: #fff;
    background-color: var(--xp-primary);
    border-color: var(--xp-primary);
    font-weight: 500;
}

.xp-tab-item.active:hover {
    background-color: var(--xp-primary-dark);
}

/* 标签图标 */
.xp-tab-icon {
    font-size: 12px;
    line-height: 1;
}

/* 标签关闭按钮 */
.xp-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    color: #9ca3af;
    background-color: transparent;
    transition: all 0.15s ease;
    margin-left: 2px;
}

.xp-tab-item:hover .xp-tab-close {
    color: #6b7280;
}

.xp-tab-item.active .xp-tab-close {
    color: rgba(255, 255, 255, 0.8);
}

.xp-tab-close:hover {
    background-color: rgba(239, 68, 68, 0.15);
    color: var(--xp-danger) !important;
}

.xp-tab-item.active .xp-tab-close:hover {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff !important;
}

/* 标签栏操作按钮 */
.xp-tabs-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 8px;
    border-left: 1px solid #e5e7eb;
    margin-left: 4px;
    flex-shrink: 0;
}

.xp-tabs-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background-color: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.xp-tabs-action-btn:hover {
    background-color: #f0fdf4;
    color: var(--xp-primary);
}

.xp-tabs-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 固定标签（首页）样式 - 不可关闭 */
.xp-tab-item.xp-tab-fixed {
    cursor: pointer;
}

.xp-tab-item.xp-tab-fixed.active {
    cursor: default;
}

/* ============================================================================
 * 大号正方形 + 号上传按钮（统一图片/文件添加入口）
 * ============================================================================ */

/* 预览框即添加按钮：无图时显示 + 号，有图时显示图片缩略图 */
.xp-image-preview-box {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    border: 2px dashed #d1d5db;
    background-color: #f9fafb;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.xp-image-preview-box:hover {
    border-color: var(--xp-primary);
    background-color: #ecfdf5;
}

/* 中央大号 + 号占位符（默认） */
.xp-image-preview-box .xp-plus-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: color 0.2s ease;
    pointer-events: none;
    user-select: none;
}

.xp-image-preview-box:hover .xp-plus-placeholder {
    color: var(--xp-primary);
}

.xp-image-preview-box .xp-plus-placeholder i {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 4px;
    font-weight: 400;
}

.xp-image-preview-box .xp-plus-placeholder span {
    font-size: 12px;
    line-height: 1.2;
}

/* 小尺寸版本（72px，用于紧凑场景） */
.xp-image-preview-box.xp-preview-sm {
    width: 72px;
    height: 72px;
    border-radius: 10px;
}

.xp-image-preview-box.xp-preview-sm .xp-plus-placeholder i {
    font-size: 26px;
    margin-bottom: 2px;
}

.xp-image-preview-box.xp-preview-sm .xp-plus-placeholder span {
    display: none;
}

/* 大尺寸版本（128px，封面/banner） */
.xp-image-preview-box.xp-preview-lg {
    width: 128px;
    height: 128px;
    border-radius: 14px;
}

.xp-image-preview-box.xp-preview-lg .xp-plus-placeholder i {
    font-size: 44px;
    margin-bottom: 6px;
}

.xp-image-preview-box.xp-preview-lg .xp-plus-placeholder span {
    font-size: 13px;
}

/* 图片显示时隐藏占位符 */
.xp-image-preview-box img[src]:not([src=""]) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.xp-image-preview-box img[src]:not([src=""]) + .xp-plus-placeholder,
.xp-image-preview-box img[style*="display: block"] + .xp-plus-placeholder {
    display: none;
}

/* 图片模式下的清除/删除小按钮 */
.xp-image-preview-box .xp-preview-clear {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(239, 68, 68, 0.9);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-size: 10px;
    line-height: 1;
    transition: background-color 0.15s ease;
    border: none;
    padding: 0;
}

.xp-image-preview-box .xp-preview-clear:hover {
    background-color: #dc2626;
}

.xp-image-preview-box:hover img[src]:not([src=""]) ~ .xp-preview-clear,
.xp-image-preview-box:hover img[src]:not([src=""]) + .xp-plus-placeholder + .xp-preview-clear {
    display: inline-flex;
}

/* 当预览框内有有效图片时，清除按钮悬停显示 */
.xp-image-preview-box.has-image .xp-preview-clear {
    display: inline-flex;
}

.xp-image-preview-box.has-image {
    border-style: solid;
    border-color: var(--xp-border-light, #e5e7eb);
}

/* 文件上传专用：方形 + 号按钮（非图片预览场景，如附件/ZIP） */
.xp-upload-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    border: 2px dashed #d1d5db;
    background-color: #f9fafb;
    cursor: pointer;
    color: #9ca3af;
    transition: all 0.2s ease;
    flex-direction: column;
    user-select: none;
    flex-shrink: 0;
    padding: 0;
    font: inherit;
}

.xp-upload-add-btn:hover {
    border-color: var(--xp-primary);
    background-color: #ecfdf5;
    color: var(--xp-primary);
}

.xp-upload-add-btn i {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 4px;
}

.xp-upload-add-btn span {
    font-size: 12px;
    line-height: 1.2;
}

.xp-upload-add-btn.xp-sm {
    width: 72px;
    height: 72px;
    border-radius: 10px;
}

.xp-upload-add-btn.xp-sm i {
    font-size: 26px;
    margin-bottom: 2px;
}

.xp-upload-add-btn.xp-sm span {
    display: none;
}

.xp-upload-add-btn.xp-lg {
    width: 128px;
    height: 128px;
    border-radius: 14px;
}

.xp-upload-add-btn.xp-lg i {
    font-size: 44px;
    margin-bottom: 6px;
}

.xp-upload-add-btn.xp-lg span {
    font-size: 13px;
}

/* 旧的 xp-image-placeholder 类兼容：直接用 + 号替代图片占位图标 */
.xp-image-preview-box .xp-image-placeholder::before {
    content: "\2b";  /* 加号 Unicode */
    font-family: inherit;
    font-style: normal;
    font-weight: 300;
    font-size: 36px;
    line-height: 1;
    color: inherit;
    display: inline-block;
}

.xp-image-preview-box .xp-image-placeholder {
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xp-image-preview-box:hover .xp-image-placeholder {
    color: var(--xp-primary);
}

/* 与现有小按钮列布局配合时隐藏下方原按钮组中的"选择"主按钮，只保留清除 */
.xp-image-input-btns .xp-btn:first-child:not(.xp-image-clear-btn) {
    /* 点击预览框已可打开选择器，隐藏冗余文字按钮 */
    display: none;
}