/* ---------- 全局与布局 ---------- */
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: var(--bg);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: var(--text);
        }

        .admin-shell {
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        .topbar {
            flex-shrink: 0;
            height: 64px;
            border-bottom: 1px solid var(--border);
            background: #fff;
            display: flex;
            align-items: center;
            padding: 0 32px;
            gap: 24px;
            box-shadow: var(--card-shadow);
            z-index: 10;
        }

        .topbar .brand {
            font-size: 20px;
            text-decoration: none;
            color: var(--text);
            font-weight: 600;
            white-space: nowrap;
        }

        .topbar .brand span {
            color: #1c4a71;
        }

        .topbar .brand b {
            color: #4eccb1;
        }

        .topbar .brand em {
            font-style: normal;
            font-weight: 400;
            color: var(--text-secondary);
            font-size: 14px;
            margin-left: 6px;
        }

        .topbar .spacer {
            flex: 1;
        }

        .user-area {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 14px;
        }

        .text-button {
            border: none;
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 4px 12px;
            border-radius: var(--radius-sm);
            transition: background 0.2s;
        }

        .text-button:hover {
            background: #EBECF0;
        }

        .admin-body {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

        .admin-sidebar {
            flex-shrink: 0;
            width: 200px;
            background: #fff;
            border-right: 1px solid var(--border);
            padding: 16px 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            overflow-y: auto;
        }

        .admin-sidebar .menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            border-radius: var(--radius-sm);
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-size: 15px;
            cursor: pointer;
            width: 100%;
            text-align: left;
            transition: all 0.2s;
            font-weight: 500;
        }

        .admin-sidebar .menu-item i {
            width: 20px;
            font-size: 16px;
            color: inherit;
        }

        .admin-sidebar .menu-item:hover {
            background: #EBECF0;
            color: var(--text);
        }

        .admin-sidebar .menu-item.active {
            background: var(--primary);
            color: #fff;
        }

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

        .admin-content {
            flex: 1;
            padding: 24px 32px;
            overflow-y: auto;
            background: var(--bg);
        }

        .page-section {
            display: none;
            animation: fadeIn 0.25s ease;
        }

        .page-section.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0.6;
                transform: translateY(4px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

        .page-header h2 {
            font-size: 22px;
            font-weight: 600;
            margin: 0;
            color: var(--text);
        }

        /* 统计卡片 */
        .stat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 16px;
            margin-bottom: 28px;
        }

        .stat-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px 20px;
            box-shadow: var(--card-shadow);
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .stat-card .stat-icon {
            font-size: 28px;
            color: var(--primary);
            opacity: 0.7;
        }

        .stat-card .stat-info {
            display: flex;
            flex-direction: column;
        }

        .stat-card .stat-info strong {
            font-size: 26px;
            font-weight: 600;
            line-height: 1.2;
            color: var(--primary);
        }

        .stat-card .stat-info span {
            font-size: 14px;
            color: var(--text-secondary);
        }

        .stat-card.orange .stat-info strong {
            color: #FF8B00;
        }

        .stat-card.amber .stat-info strong {
            color: #FFAB00;
        }

        .stat-card.red .stat-info strong {
            color: #DE350B;
        }

        .stat-card.green .stat-info strong {
            color: #36B37E;
        }

        /* 图表网格 */
        .chart-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 20px;
            margin-top: 16px;
        }

        .chart-box {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 12px 14px;
            box-shadow: var(--card-shadow);
            min-width: 0;
        }

        .chart-box h4 {
            margin: 0 0 8px 0;
            font-weight: 500;
            color: var(--text-secondary);
            font-size: 14px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .chart-box canvas {
            max-height: 160px;
            max-width: 100%;
        }

        .chart-row-wide {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 24px;
            margin-top: 24px;
        }

        .chart-box-large {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px 20px;
            box-shadow: var(--card-shadow);
        }

        .chart-box-large h4 {
            margin: 0 0 12px 0;
            font-weight: 500;
            color: var(--text-secondary);
            font-size: 15px;
        }

        .chart-box-large canvas {
            min-height: 220px;
            max-height: 300px;
            width: 100% !important;
            height: auto !important;
        }

        /* 表格 */
        .table-wrap {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: auto;
            box-shadow: var(--card-shadow);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        th {
            background: #F4F5F7;
            color: var(--text-secondary);
            font-weight: 600;
            padding: 12px 14px;
            text-align: left;
            border-bottom: 1px solid var(--border);
            white-space: nowrap;
        }

        td {
            padding: 10px 14px;
            border-bottom: 1px solid #F4F5F7;
            color: var(--text);
        }

        tr:last-child td {
            border-bottom: none;
        }

        .tag-sm {
            display: inline-block;
            padding: 0 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            line-height: 22px;
            color: #fff;
        }

        .tag-sm.notice {
            background: #6554C0;
        }

        .tag-sm.suggestion {
            background: #36B37E;
        }

        .tag-sm.hotel {
            background: #00A3BF;
        }

        .tag-sm.process {
            background: #0052CC;
        }

        .tag-sm.complaint {
            background: #DE350B;
        }

        /* 用户表格优化 */
        .user-row {
            transition: background 0.15s;
        }
        .user-row:hover {
            background: #EBF5FF;
        }
        .user-row.is-current {
            background: #DCECF8;
        }
        .user-row.is-current:hover {
            background: #BFDBFE;
        }
        .user-cell {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .user-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--primary);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            display: grid;
            place-items: center;
            flex-shrink: 0;
        }
        .user-name {
            font-weight: 600;
            color: var(--text);
        }
        .current-tag {
            display: inline-block;
            padding: 1px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
            background: #BFDBFE;
            color: #1E40AF;
            border: 1px solid #93C5FD;
        }
        .role-tag {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        .role-tag.tag-admin {
            background: #EAE6FF;
            color: #6554C0;
            border: 1px solid #C4B5FD;
        }
        .role-tag.tag-user {
            background: #EBF5FF;
            color: #0052CC;
            border: 1px solid #B3D4FF;
        }
        .read-tag {
            font-size: 13px;
            color: var(--text);
        }
        .read-tag.tag-ok {
            color: #36B37E;
        }
        .read-tag.tag-no {
            color: #97A0AF;
        }
        .action-cell {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* 用户头像小尺寸 */
        .user-avatar.small {
            width: 28px;
            height: 28px;
            font-size: 12px;
        }

        /* 日志表格 */
        .log-row:hover {
            background: #FAFBFC;
        }
        .log-time {
            color: var(--text-secondary);
            font-size: 13px;
            white-space: nowrap;
        }
        .log-time i {
            margin-right: 4px;
            font-size: 12px;
        }
        .log-user {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
        }
        .log-action-tag {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        .log-action-login { background: #EAE6FF; color: #6554C0; }
        .log-action-publish { background: #DBEAFE; color: #1D4ED8; }
        .log-action-edit { background: #FEF3C7; color: #92400E; }
        .log-action-delete { background: #FFEBE6; color: #DE350B; }
        .log-action-read { background: #E0F2FE; color: #0369A1; }
        .log-action-create { background: #D1FAE5; color: #065F46; }
        .log-action-update { background: #EDE9FE; color: #5B21B6; }
        .log-action-pwd { background: #FCE7F3; color: #9D174D; }
        .log-action-default { background: #F4F5F7; color: #64748B; }
        .log-detail {
            color: var(--text-secondary);
            font-size: 13px;
        }

        /* 公告表格 */
        .notice-row:hover {
            background: #FAFBFC;
        }
        .notice-title {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .pin-icon {
            color: #FFAB00;
            font-size: 13px;
            flex-shrink: 0;
        }
        .notice-title-text {
            font-weight: 600;
            color: var(--text);
        }
        .category-tag {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            background: #F4F5F7;
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }
        .notice-date {
            color: var(--text-secondary);
            font-size: 13px;
            white-space: nowrap;
        }
        .notice-date i {
            margin-right: 4px;
            font-size: 12px;
        }
        .action-btn {
            border: none;
            background: transparent;
            color: var(--primary);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            font-size: 13px;
            transition: background 0.15s, color 0.15s;
        }
        .action-btn:hover {
            background: #EBF5FF;
            color: var(--primary-dark);
        }
        .action-btn.danger {
            color: #DE350B;
        }

        .action-btn.danger:hover {
            background: #FFEBE6;
        }

        /* 筛选栏 */
        .filter-bar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px 16px;
            background: #fff;
            padding: 12px 16px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 20px;
            box-shadow: var(--card-shadow);
        }

        .filter-bar label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .filter-bar select,
        .filter-bar input {
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 14px;
            background: #fff;
            outline: none;
        }

        .filter-bar select:focus,
        .filter-bar input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
        }

        .btn-primary {
            background: var(--primary);
            color: #fff;
            border: none;
            padding: 6px 18px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
        }

        .btn-primary:hover {
            background: var(--primary-dark);
        }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border);
            padding: 6px 18px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 14px;
        }

        /* 鱼骨屏加载动画 */
        .skeleton-loader {
            padding: 20px 0;
        }
        .skeleton-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 16px;
            margin-bottom: 28px;
        }
        .skeleton-card {
            height: 72px;
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            border-radius: var(--radius);
            animation: shimmer 1.5s infinite;
        }
        .skeleton-charts {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-top: 16px;
        }
        .skeleton-chart {
            height: 160px;
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            border-radius: var(--radius);
            animation: shimmer 1.5s infinite;
        }
        .skeleton-chart-wide {
            grid-column: span 2;
            height: 220px;
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            border-radius: var(--radius);
            animation: shimmer 1.5s infinite;
        }
        .skeleton-loading-text {
            text-align: center;
            padding: 16px;
            color: var(--text-secondary);
            font-size: 14px;
        }
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        /* 导入导出 */
        .io-area {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
            margin-top: 12px;
        }

        .io-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 24px;
            box-shadow: var(--card-shadow);
        }

        .io-card h3 {
            margin-top: 0;
            font-weight: 600;
            font-size: 18px;
        }

        /* 导入进度条 */
        .import-progress {
            margin-top: 16px;
            padding: 12px;
            background: #F4F5F7;
            border-radius: var(--radius-sm);
        }

        .progress-bar {
            height: 8px;
            background: #DFE1E6;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), #00C7B7);
            border-radius: 4px;
            transition: width 0.3s ease;
            width: 0%;
        }

        .import-progress span {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .drop-zone {
            border: 2px dashed var(--border);
            border-radius: var(--radius-sm);
            padding: 40px 20px;
            text-align: center;
            cursor: pointer;
            color: var(--text-secondary);
            transition: border-color 0.2s;
        }

        .drop-zone:hover {
            border-color: var(--primary);
        }

        .drop-zone i {
            font-size: 36px;
            display: block;
            margin-bottom: 8px;
        }

        /* 分页 */
        .pagination-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            padding: 16px 0 4px;
        }

        .pagination-bar button {
            border: 1px solid var(--border);
            background: #fff;
            border-radius: var(--radius-sm);
            padding: 4px 14px;
            cursor: pointer;
        }

        .pagination-bar button:hover {
            background: #F4F5F7;
        }

        /* Toast & Modal */
        .toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(80px);
            background: var(--text);
            color: #fff;
            padding: 10px 20px;
            border-radius: var(--radius-sm);
            opacity: 0;
            transition: 0.25s;
            z-index: 99;
            font-size: 14px;
            pointer-events: none;
        }

        .toast.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }

        .modal-mask {
            position: fixed;
            z-index: 50;
            inset: 0;
            background: rgba(9, 30, 66, 0.5);
            display: grid;
            place-items: center;
        }

        .modal {
            width: min(540px, 90vw);
            max-height: 88vh;
            overflow: auto;
            background: #fff;
            border-radius: var(--radius);
            padding: 24px 32px;
            box-shadow: 0 8px 24px rgba(9, 30, 66, 0.2);
        }

        .modal h2 {
            margin-top: 0;
        }

        .form-group {
            display: grid;
            gap: 6px;
            margin-bottom: 16px;
        }

        .form-group label {
            font-weight: 500;
            font-size: 14px;
            color: var(--text-secondary);
        }

        .form-group input,
        .form-group select {
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font: inherit;
        }

        .form-group input:focus,
        .form-group select:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
        }

        .form-group.checkbox-group {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 0;
        }

        .form-group.checkbox-group label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 400;
            color: var(--text-secondary);
            cursor: pointer;
        }

        .form-group.checkbox-group input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin: 0;
            cursor: pointer;
        }

        .modal-actions {
            text-align: right;
            margin-top: 20px;
        }

        .modal-actions button {
            padding: 8px 20px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            cursor: pointer;
            font-size: 14px;
            margin-left: 8px;
        }

        .modal-actions .primary {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }

        .modal-actions .primary:hover {
            background: var(--primary-dark);
        }

        @media (max-width: 900px) {
            .chart-row-wide {
                grid-template-columns: 1fr;
            }

            .io-area {
                grid-template-columns: 1fr;
            }

            .admin-sidebar {
                width: 160px;
            }
        }

        #dashLoading {
            display: flex;
        }

        #dashLoading i {
            font-size: 24px;
        }

        /* ============================================================
           桌面提醒设置页面样式
           ============================================================ */
        .notification-settings-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 24px;
            box-shadow: var(--card-shadow);
            max-width: 600px;
        }

        .setting-group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 16px 0;
        }

        .setting-label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text);
            flex-shrink: 0;
        }

        .setting-label i {
            font-size: 16px;
            color: var(--primary);
            width: 20px;
            text-align: center;
        }

        .setting-group input[type="text"],
        .setting-group input[type="number"] {
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 14px;
            color: var(--text);
            background: #fff;
            outline: none;
            transition: border-color 0.2s;
        }

        .setting-group input[type="text"]:focus,
        .setting-group input[type="number"]:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
        }

        .setting-divider {
            height: 1px;
            background: var(--border);
            margin: 0;
        }

        /* Switch 开关样式 */
        .switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 26px;
            flex-shrink: 0;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background: #ccc;
            border-radius: 26px;
            transition: 0.3s;
        }

        .slider:before {
            content: "";
            position: absolute;
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background: #fff;
            border-radius: 50%;
            transition: 0.3s;
        }

        input:checked + .slider {
            background: var(--primary);
        }

        input:checked + .slider:before {
            transform: translateX(22px);
        }

        /* 提醒范围 */
        .reminder-scopes {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .scope-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--text-secondary);
            cursor: pointer;
        }

        .scope-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        /* 操作按钮 */
        .setting-actions {
            display: flex;
            gap: 12px;
            margin-top: 8px;
        }

        .setting-actions button {
            padding: 8px 20px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .setting-actions .btn-primary {
            background: var(--primary);
            color: #fff;
            border: none;
        }

        .setting-actions .btn-primary:hover {
            background: var(--primary-dark);
        }

        .setting-actions .btn-outline {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }

        .setting-actions .btn-outline:hover {
            background: #F4F5F7;
            border-color: #B3BAC5;
        }

        #notifStatus {
            margin-top: 12px;
            padding: 8px 12px;
            border-radius: var(--radius-sm);
            font-size: 13px;
            background: #F4F5F7;
            color: var(--text-secondary);
        }

        #notifStatus.success {
            color: #36B37E;
            background: #E3FBE8;
        }

        #notifStatus.error {
            color: #DE350B;
            background: #FFEBE6;
        }