/* ========================================
 * Loopes UI — 设计变量（Design Tokens）
 * ========================================
 * 品牌理念：
 * 「Loopes」意为循环/回路/连接，象征持续生长的设计系统。
 * 主色采用经典品牌蓝（Loopes Blue），
 *   源自主题品牌的 #1a73e8 —— 稳重、专业、值得信赖。
 * 辅以「琥珀橙」（Amber）做点缀，
 *   冷暖对比带来温暖活力和高识别度。
 * 整体风格：现代、专业、信赖、温暖。
 * ======================================== */

:root {
    /* ===== 品牌色 =====
     * Loopes Blue：#1A73E8 → #4285F4 → #1557B0
     * 经典品牌蓝，稳重专业值得信赖
     * ============================= */
    --loopes-primary: #1A73E8;
    --loopes-primary-rgb: 26, 115, 232;
    --loopes-primary-hover: #4285F4;
    --loopes-primary-active: #1557B0;
    --loopes-primary-light: #E8F0FE;
    --loopes-primary-lighter: #C6DAFC;
    --loopes-primary-deeper: #0D47A1;
    --loopes-primary-gradient: linear-gradient(135deg, #1A73E8, #4285F4);
    --loopes-primary-gradient-deeper: linear-gradient(135deg, #1A73E8, #0D47A1);

    /* ===== 品牌辅助色 =====
     * 琥珀橙（Amber）—— 温暖点缀，形成高辨识度的冷暖对比
     * ============================= */
    --loopes-amber: #F59E0B;
    --loopes-amber-hover: #D97706;
    --loopes-amber-light: #FFFBEB;

    --loopes-teal: #0D9488;
    --loopes-teal-hover: #0F766E;
    --loopes-teal-light: #F0FDFA;

    /* ===== 语义色 ===== */
    --loopes-success: #10B981;
    --loopes-success-hover: #059669;
    --loopes-success-active: #047857;
    --loopes-success-light: #ECFDF5;
    --loopes-success-border: #A7F3D0;
    --loopes-success-text: #065F46;

    --loopes-error: #EF4444;
    --loopes-error-hover: #DC2626;
    --loopes-error-active: #B91C1C;
    --loopes-error-light: #FEF2F2;
    --loopes-error-border: #FECACA;
    --loopes-error-text: #991B1B;

    --loopes-warning: #F59E0B;
    --loopes-warning-hover: #D97706;
    --loopes-warning-active: #B45309;
    --loopes-warning-light: #FFFBEB;
    --loopes-warning-border: #FDE68A;
    --loopes-warning-text: #92400E;

    --loopes-info: #4285F4;
    --loopes-info-hover: #1A73E8;
    --loopes-info-active: #1557B0;
    --loopes-info-light: #E8F0FE;
    --loopes-info-border: #C6DAFC;
    --loopes-info-text: #0D47A1;

    /* ===== 辅助色 ===== */
    --loopes-purple: #8B5CF6;
    --loopes-purple-light: #F5F3FF;
    --loopes-pink: #EC4899;
    --loopes-pink-light: #FDF2F8;
    --loopes-cyan: #06B6D4;
    --loopes-cyan-light: #ECFEFF;

    /* ===== 中性色 ===== */
    --loopes-text: #0F172A;
    --loopes-text-secondary: #475569;
    --loopes-text-muted: #94A3B8;
    --loopes-text-placeholder: #CBD5E1;
    --loopes-text-inverse: #FFFFFF;
    --loopes-text-dark: #0F172A;
    --loopes-text-light: #64748B;

    --loopes-bg: #FFFFFF;
    --loopes-bg-secondary: #F8FAFC;
    --loopes-bg-tertiary: #F1F5F9;
    --loopes-bg-page: #F0F4F8;
    --loopes-bg-elevated: #FFFFFF;

    --loopes-dark: #0F172A;
    --loopes-dark-secondary: #1E293B;

    --loopes-border: #E2E8F0;
    --loopes-border-light: #F1F5F9;
    --loopes-border-hover: #CBD5E1;

    /* ===== Modal 专用色 ===== */
    --loopes-modal-icon-success-bg: #ECFDF5;
    --loopes-modal-icon-success-fill: #10B981;
    --loopes-modal-icon-error-bg: #FEF2F2;
    --loopes-modal-icon-error-fill: #EF4444;
    --loopes-modal-icon-warning-bg: #FFFBEB;
    --loopes-modal-icon-warning-fill: #F59E0B;
    --loopes-modal-icon-info-bg: #E8F0FE;
    --loopes-modal-icon-info-fill: #1A73E8;

    /* ===== 圆角 ===== */
    --loopes-radius-sm: 6px;
    --loopes-radius: 10px;
    --loopes-radius-lg: 14px;
    --loopes-radius-xl: 18px;
    --loopes-radius-full: 50%;
    --loopes-radius-round: 9999px;

    /* ===== 阴影 ===== */
    --loopes-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --loopes-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    --loopes-shadow-lg: 0 8px 30px rgba(15, 23, 42, 0.1);
    --loopes-shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.14);
    --loopes-shadow-color: rgba(26, 115, 232, 0.25);
    --loopes-shadow-color-strong: rgba(26, 115, 232, 0.35);

    /* ===== 间距（4px 网格体系） ===== */
    --loopes-space-1: 4px;
    --loopes-space-2: 8px;
    --loopes-space-3: 12px;
    --loopes-space-4: 16px;
    --loopes-space-5: 20px;
    --loopes-space-6: 24px;
    --loopes-space-8: 32px;
    --loopes-space-10: 40px;
    --loopes-space-12: 48px;
    --loopes-space-16: 64px;

    /* 旧变量兼容 */
    --loopes-space-xs: 4px;
    --loopes-space-sm: 8px;
    --loopes-space: 16px;
    --loopes-space-lg: 24px;
    --loopes-space-xl: 32px;
    --loopes-space-2xl: 40px;

    --loopes-grid-gap: 30px;
    --loopes-hero-padding: 80px 0 100px;
    --loopes-hero-margin-top: -40px;

    /* ===== 字体 ===== */
    --loopes-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", Roboto, "Helvetica Neue", Arial, sans-serif;
    --loopes-font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", "Courier New", monospace;
    --loopes-font-size: 14px;
    --loopes-font-size-xs: 11px;
    --loopes-font-size-sm: 12px;
    --loopes-font-size-lg: 16px;
    --loopes-font-size-xl: 18px;
    --loopes-font-size-2xl: 20px;
    --loopes-font-size-h3: 20px;
    --loopes-font-size-h2: 24px;
    --loopes-font-size-h1: 28px;
    --loopes-font-size-hero: 36px;
    --loopes-font-size-display: 42px;

    --loopes-line-height-tight: 1.2;
    --loopes-line-height-normal: 1.5;
    --loopes-line-height-relaxed: 1.75;

    --loopes-font-weight-normal: 400;
    --loopes-font-weight-medium: 500;
    --loopes-font-weight-semibold: 600;
    --loopes-font-weight-bold: 700;

    /* ===== 过渡动画 ===== */
    --loopes-transition: 0.25s ease;
    --loopes-transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --loopes-transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ===== 层级 ===== */
    --loopes-z-dropdown: 1000;
    --loopes-z-sticky: 1020;
    --loopes-z-fixed: 1030;
    --loopes-z-modal-backdrop: 1040;
    --loopes-z-modal: 1050;
    --loopes-z-popover: 1060;
    --loopes-z-tooltip: 1070;
    --loopes-z-toast: 99999;
    --loopes-z-loading: 100000;
    --loopes-z-lightbox: 100001;
}

/* ========================================
 * 暗色模式（Dark Mode）
 * 通过 [data-theme="dark"] 切换
 * ======================================== */
[data-theme="dark"] {
    /* ---- 品牌色（暗色加深） ---- */
    --loopes-primary: #60A5FA;
    --loopes-primary-hover: #93C5FD;
    --loopes-primary-active: #3B82F6;
    --loopes-primary-light: #1E3A5F;
    --loopes-primary-lighter: #1E293B;
    --loopes-primary-deeper: #93C5FD;
    --loopes-primary-gradient: linear-gradient(135deg, #60A5FA, #3B82F6);
    --loopes-primary-gradient-deeper: linear-gradient(135deg, #1A73E8, #0D47A1);

    /* ---- 辅助色 ---- */
    --loopes-amber: #FBBF24;
    --loopes-amber-hover: #F59E0B;
    --loopes-amber-light: #1C1917;
    --loopes-teal: #2DD4BF;
    --loopes-teal-hover: #14B8A6;
    --loopes-teal-light: #042F2E;
    --loopes-purple: #A78BFA;
    --loopes-purple-light: #1E1B4B;
    --loopes-pink: #F472B6;
    --loopes-pink-light: #1F0D1A;
    --loopes-cyan: #22D3EE;
    --loopes-cyan-light: #083344;

    /* ---- 语义色 ---- */
    --loopes-success: #34D399;
    --loopes-success-hover: #10B981;
    --loopes-success-active: #059669;
    --loopes-success-light: #064E3B;
    --loopes-success-border: #065F46;
    --loopes-success-text: #A7F3D0;
    --loopes-error: #F87171;
    --loopes-error-hover: #EF4444;
    --loopes-error-active: #DC2626;
    --loopes-error-light: #450A0A;
    --loopes-error-border: #7F1D1D;
    --loopes-error-text: #FECACA;
    --loopes-warning: #FBBF24;
    --loopes-warning-hover: #F59E0B;
    --loopes-warning-active: #D97706;
    --loopes-warning-light: #1C1917;
    --loopes-warning-border: #78350F;
    --loopes-warning-text: #FDE68A;
    --loopes-info: #60A5FA;
    --loopes-info-hover: #3B82F6;
    --loopes-info-active: #1A73E8;
    --loopes-info-light: #1E3A5F;
    --loopes-info-border: #1E3A5F;
    --loopes-info-text: #93C5FD;

    /* ---- 中性色 ---- */
    --loopes-text: #F1F5F9;
    --loopes-text-secondary: #94A3B8;
    --loopes-text-muted: #64748B;
    --loopes-text-placeholder: #475569;
    --loopes-text-inverse: #0F172A;
    --loopes-text-dark: #F1F5F9;
    --loopes-text-light: #94A3B8;

    /* ---- 背景色 ---- */
    --loopes-bg: #0F172A;
    --loopes-bg-secondary: #1E293B;
    --loopes-bg-tertiary: #334155;
    --loopes-bg-page: #0B1121;
    --loopes-bg-elevated: #1E293B;

    /* ---- 分隔/边框 ---- */
    --loopes-border: #334155;
    --loopes-border-light: #1E293B;
    --loopes-border-hover: #475569;

    /* ---- 阴影（暗色加深） ---- */
    --loopes-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --loopes-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    --loopes-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
    --loopes-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);
    --loopes-shadow-color: rgba(96, 165, 250, 0.25);
    --loopes-shadow-color-strong: rgba(96, 165, 250, 0.35);

    /* ---- Modal 图标色重新映射 ---- */
    --loopes-modal-icon-success-bg: #064E3B;
    --loopes-modal-icon-success-fill: #34D399;
    --loopes-modal-icon-error-bg: #450A0A;
    --loopes-modal-icon-error-fill: #F87171;
    --loopes-modal-icon-warning-bg: #1C1917;
    --loopes-modal-icon-warning-fill: #FBBF24;
    --loopes-modal-icon-info-bg: #1E3A5F;
    --loopes-modal-icon-info-fill: #60A5FA;
}


/* toast */
/* ====== Toast 消息提示 ====== */
.loopes-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--loopes-z-toast);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.loopes-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: var(--loopes-radius-lg);
    box-shadow: var(--loopes-shadow-lg);
    font-size: var(--loopes-font-size);
    font-family: var(--loopes-font);
    line-height: 1.5;
    min-width: 280px;
    max-width: 420px;
    transform: translateX(120%);
    transition: transform var(--loopes-transition-smooth);
    border: 1px solid transparent;
}

.loopes-toast.show {
    transform: translateX(0);
}

.loopes-toast-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.loopes-toast-text {
    flex: 1;
    word-break: break-word;
}

.loopes-toast-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--loopes-radius-sm);
    transition: opacity var(--loopes-transition);
}

.loopes-toast-close:hover {
    opacity: 1;
}

.loopes-toast-close svg {
    width: 14px;
    height: 14px;
}

/* Toast types */
.loopes-toast--success {
    background: var(--loopes-success-light);
    border-color: var(--loopes-success-border);
    color: var(--loopes-success-text);
}

.loopes-toast--success .loopes-toast-icon svg {
    fill: var(--loopes-success);
}

.loopes-toast--error {
    background: var(--loopes-error-light);
    border-color: var(--loopes-error-border);
    color: var(--loopes-error-text);
}

.loopes-toast--error .loopes-toast-icon svg {
    fill: var(--loopes-error);
}

.loopes-toast--warning {
    background: var(--loopes-warning-light);
    border-color: var(--loopes-warning-border);
    color: var(--loopes-warning-text);
}

.loopes-toast--warning .loopes-toast-icon svg {
    fill: var(--loopes-warning);
}

.loopes-toast--info {
    background: var(--loopes-info-light);
    border-color: var(--loopes-info-border);
    color: var(--loopes-info-text);
}

.loopes-toast--info .loopes-toast-icon svg {
    fill: var(--loopes-info);
}


/* modal */
/* ====== Modal 弹出层 ====== */
.loopes-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: var(--loopes-z-modal);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.loopes-modal-overlay.active {
    display: flex;
}

.loopes-modal {
    background: var(--loopes-bg-elevated);
    border-radius: var(--loopes-radius-xl);
    box-shadow: var(--loopes-shadow-xl);
    width: 420px;
    max-width: 100%;
    overflow: hidden;
    animation: loopesModalIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes loopesModalIn {
    from {
        opacity: 0;
        transform: translateY(-24px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.loopes-modal-body {
    padding: 36px 32px 24px;
    text-align: center;
}

.loopes-modal-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--loopes-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.loopes-modal-icon svg {
    width: 30px;
    height: 30px;
}

.loopes-modal-icon--success {
    background: var(--loopes-modal-icon-success-bg);
}

.loopes-modal-icon--success svg {
    fill: var(--loopes-modal-icon-success-fill);
}

.loopes-modal-icon--error {
    background: var(--loopes-modal-icon-error-bg);
}

.loopes-modal-icon--error svg {
    fill: var(--loopes-modal-icon-error-fill);
}

.loopes-modal-icon--warning {
    background: var(--loopes-modal-icon-warning-bg);
}

.loopes-modal-icon--warning svg {
    fill: var(--loopes-modal-icon-warning-fill);
}

.loopes-modal-icon--info {
    background: var(--loopes-modal-icon-info-bg);
}

.loopes-modal-icon--info svg {
    fill: var(--loopes-modal-icon-info-fill);
}

.loopes-modal-title {
    font-size: var(--loopes-font-size-xl);
    font-weight: 600;
    color: var(--loopes-text);
    margin: 0 0 8px;
}

.loopes-modal-message {
    font-size: var(--loopes-font-size);
    color: var(--loopes-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.loopes-modal-footer {
    display: flex;
    gap: 12px;
    padding: 0 32px 32px;
    justify-content: center;
}

.loopes-modal-btn {
    flex: 1;
    max-width: 160px;
    padding: 10px 24px;
    border-radius: var(--loopes-radius);
    border: 1px solid transparent;
    font-size: var(--loopes-font-size);
    font-weight: 600;
    font-family: var(--loopes-font);
    cursor: pointer;
    transition: all var(--loopes-transition);
    text-align: center;
}

.loopes-modal-btn:active {
    transform: scale(0.97);
}

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

.loopes-modal-btn--primary:hover {
    background: var(--loopes-primary-hover);
    border-color: var(--loopes-primary-hover);
}

.loopes-modal-btn--cancel {
    background: var(--loopes-bg-tertiary);
    color: var(--loopes-text-secondary);
    border-color: var(--loopes-border);
}

.loopes-modal-btn--cancel:hover {
    background: var(--loopes-border);
}

.loopes-modal-btn--danger {
    background: var(--loopes-error);
    color: #fff;
    border-color: var(--loopes-error);
}

.loopes-modal-btn--danger:hover {
    background: var(--loopes-error-hover);
    border-color: var(--loopes-error-hover);
}

/* Modal 大尺寸变体 */
.loopes-modal--lg {
    width: 640px;
}

.loopes-modal--fullscreen {
    width: calc(100vw - 40px);
    height: calc(100vh - 40px);
    max-width: 100%;
    border-radius: var(--loopes-radius-lg);
}

.loopes-modal--fullscreen .loopes-modal-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px 32px;
    text-align: left;
    overflow-y: auto;
}

/* Modal 顶部关闭按钮 */
.loopes-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--loopes-bg-tertiary);
    border-radius: 50%;
    cursor: pointer;
    color: var(--loopes-text-light);
    transition: all 0.2s;
    z-index: 1;
}

.loopes-modal__close:hover {
    background: var(--loopes-border);
    color: var(--loopes-text);
}

.loopes-modal__close svg {
    width: 16px;
    height: 16px;
}

/* Modal 自定义内容区 */
.loopes-modal--custom {
    width: auto;
    max-width: 90vw;
}

.loopes-modal--custom .loopes-modal-body {
    text-align: left;
}

/* 自定义 Modal 内容头部 */
.loopes-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
}

.loopes-modal__header-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--loopes-text);
    margin: 0;
}

.loopes-modal__content {
    padding: 20px 24px;
    font-size: 14px;
    color: var(--loopes-text-secondary);
    line-height: 1.6;
}

.loopes-modal__actions {
    display: flex;
    gap: 12px;
    padding: 0 24px 20px;
    justify-content: flex-end;
}


/* loading */
/* ====== Loading 加载状态 ====== */
.loopes-loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: var(--loopes-z-loading);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.loopes-loading-overlay.active {
    display: flex;
}

.loopes-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--loopes-border);
    border-top-color: var(--loopes-primary);
    border-radius: var(--loopes-radius-full);
    animation: loopesSpin 0.7s linear infinite;
}

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

.loopes-loading-text {
    font-size: var(--loopes-font-size);
    color: var(--loopes-text-secondary);
}


/* lightbox */
/* ====== Lightbox 图片预览 ====== */
.loopes-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: var(--loopes-z-lightbox);
    justify-content: center;
    align-items: center;
    padding: 40px;
    cursor: zoom-out;
}

.loopes-lightbox.active {
    display: flex;
}

.loopes-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--loopes-radius-sm);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    animation: loopesLightboxIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes loopesLightboxIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.loopes-lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: var(--loopes-radius-full);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--loopes-transition);
    z-index: 100003;
}

.loopes-lightbox-close:hover {
    background: rgba(0, 0, 0, 0.8);
}


/* utilities */
/* ========================================
 * LoopesUI 工具类（Utilities）
 * 原子化 CSS 工具，辅助快速布局与排版
 * ========================================
 *
 * 命名规则：
 *   .loopes-{property}-{value}
 *   .loopes-{property}-{breakpoint}-{value}  (响应式)
 *
 * 间距单位映射：
 *   0  -> 0
 *   1  -> var(--loopes-space-xs)  (4px)
 *   2  -> var(--loopes-space-sm)  (8px)
 *   3  -> var(--loopes-space)     (16px)
 *   4  -> var(--loopes-space-lg)  (24px)
 *   5  -> var(--loopes-space-xl)  (32px)
 *   6  -> var(--loopes-space-2xl) (40px)
 * ======================================== */

/* ===== 间距工具 ===== */
.loopes-m-0 { margin: 0; }
.loopes-m-1 { margin: var(--loopes-space-xs); }
.loopes-m-2 { margin: var(--loopes-space-sm); }
.loopes-m-3 { margin: var(--loopes-space); }
.loopes-m-4 { margin: var(--loopes-space-lg); }
.loopes-m-5 { margin: var(--loopes-space-xl); }
.loopes-m-6 { margin: var(--loopes-space-2xl); }

.loopes-mt-0 { margin-top: 0; }
.loopes-mt-1 { margin-top: var(--loopes-space-xs); }
.loopes-mt-2 { margin-top: var(--loopes-space-sm); }
.loopes-mt-3 { margin-top: var(--loopes-space); }
.loopes-mt-4 { margin-top: var(--loopes-space-lg); }
.loopes-mt-5 { margin-top: var(--loopes-space-xl); }
.loopes-mt-6 { margin-top: var(--loopes-space-2xl); }

.loopes-mb-0 { margin-bottom: 0; }
.loopes-mb-1 { margin-bottom: var(--loopes-space-xs); }
.loopes-mb-2 { margin-bottom: var(--loopes-space-sm); }
.loopes-mb-3 { margin-bottom: var(--loopes-space); }
.loopes-mb-4 { margin-bottom: var(--loopes-space-lg); }
.loopes-mb-5 { margin-bottom: var(--loopes-space-xl); }
.loopes-mb-6 { margin-bottom: var(--loopes-space-2xl); }

.loopes-ml-0 { margin-left: 0; }
.loopes-ml-1 { margin-left: var(--loopes-space-xs); }
.loopes-ml-2 { margin-left: var(--loopes-space-sm); }
.loopes-ml-3 { margin-left: var(--loopes-space); }
.loopes-ml-4 { margin-left: var(--loopes-space-lg); }
.loopes-ml-5 { margin-left: var(--loopes-space-xl); }
.loopes-ml-6 { margin-left: var(--loopes-space-2xl); }

.loopes-mr-0 { margin-right: 0; }
.loopes-mr-1 { margin-right: var(--loopes-space-xs); }
.loopes-mr-2 { margin-right: var(--loopes-space-sm); }
.loopes-mr-3 { margin-right: var(--loopes-space); }
.loopes-mr-4 { margin-right: var(--loopes-space-lg); }
.loopes-mr-5 { margin-right: var(--loopes-space-xl); }
.loopes-mr-6 { margin-right: var(--loopes-space-2xl); }

.loopes-mx-0 { margin-left: 0; margin-right: 0; }
.loopes-mx-1 { margin-left: var(--loopes-space-xs); margin-right: var(--loopes-space-xs); }
.loopes-mx-2 { margin-left: var(--loopes-space-sm); margin-right: var(--loopes-space-sm); }
.loopes-mx-3 { margin-left: var(--loopes-space); margin-right: var(--loopes-space); }
.loopes-mx-4 { margin-left: var(--loopes-space-lg); margin-right: var(--loopes-space-lg); }
.loopes-mx-5 { margin-left: var(--loopes-space-xl); margin-right: var(--loopes-space-xl); }
.loopes-mx-6 { margin-left: var(--loopes-space-2xl); margin-right: var(--loopes-space-2xl); }

.loopes-my-0 { margin-top: 0; margin-bottom: 0; }
.loopes-my-1 { margin-top: var(--loopes-space-xs); margin-bottom: var(--loopes-space-xs); }
.loopes-my-2 { margin-top: var(--loopes-space-sm); margin-bottom: var(--loopes-space-sm); }
.loopes-my-3 { margin-top: var(--loopes-space); margin-bottom: var(--loopes-space); }
.loopes-my-4 { margin-top: var(--loopes-space-lg); margin-bottom: var(--loopes-space-lg); }
.loopes-my-5 { margin-top: var(--loopes-space-xl); margin-bottom: var(--loopes-space-xl); }
.loopes-my-6 { margin-top: var(--loopes-space-2xl); margin-bottom: var(--loopes-space-2xl); }

/* ===== 内边距工具 ===== */
.loopes-p-0 { padding: 0; }
.loopes-p-1 { padding: var(--loopes-space-xs); }
.loopes-p-2 { padding: var(--loopes-space-sm); }
.loopes-p-3 { padding: var(--loopes-space); }
.loopes-p-4 { padding: var(--loopes-space-lg); }
.loopes-p-5 { padding: var(--loopes-space-xl); }
.loopes-p-6 { padding: var(--loopes-space-2xl); }

.loopes-pt-0 { padding-top: 0; }
.loopes-pt-1 { padding-top: var(--loopes-space-xs); }
.loopes-pt-2 { padding-top: var(--loopes-space-sm); }
.loopes-pt-3 { padding-top: var(--loopes-space); }
.loopes-pt-4 { padding-top: var(--loopes-space-lg); }
.loopes-pt-5 { padding-top: var(--loopes-space-xl); }
.loopes-pt-6 { padding-top: var(--loopes-space-2xl); }

.loopes-pb-0 { padding-bottom: 0; }
.loopes-pb-1 { padding-bottom: var(--loopes-space-xs); }
.loopes-pb-2 { padding-bottom: var(--loopes-space-sm); }
.loopes-pb-3 { padding-bottom: var(--loopes-space); }
.loopes-pb-4 { padding-bottom: var(--loopes-space-lg); }
.loopes-pb-5 { padding-bottom: var(--loopes-space-xl); }
.loopes-pb-6 { padding-bottom: var(--loopes-space-2xl); }

.loopes-pl-0 { padding-left: 0; }
.loopes-pl-1 { padding-left: var(--loopes-space-xs); }
.loopes-pl-2 { padding-left: var(--loopes-space-sm); }
.loopes-pl-3 { padding-left: var(--loopes-space); }
.loopes-pl-4 { padding-left: var(--loopes-space-lg); }
.loopes-pl-5 { padding-left: var(--loopes-space-xl); }
.loopes-pl-6 { padding-left: var(--loopes-space-2xl); }

.loopes-pr-0 { padding-right: 0; }
.loopes-pr-1 { padding-right: var(--loopes-space-xs); }
.loopes-pr-2 { padding-right: var(--loopes-space-sm); }
.loopes-pr-3 { padding-right: var(--loopes-space); }
.loopes-pr-4 { padding-right: var(--loopes-space-lg); }
.loopes-pr-5 { padding-right: var(--loopes-space-xl); }
.loopes-pr-6 { padding-right: var(--loopes-space-2xl); }

.loopes-px-0 { padding-left: 0; padding-right: 0; }
.loopes-px-1 { padding-left: var(--loopes-space-xs); padding-right: var(--loopes-space-xs); }
.loopes-px-2 { padding-left: var(--loopes-space-sm); padding-right: var(--loopes-space-sm); }
.loopes-px-3 { padding-left: var(--loopes-space); padding-right: var(--loopes-space); }
.loopes-px-4 { padding-left: var(--loopes-space-lg); padding-right: var(--loopes-space-lg); }
.loopes-px-5 { padding-left: var(--loopes-space-xl); padding-right: var(--loopes-space-xl); }
.loopes-px-6 { padding-left: var(--loopes-space-2xl); padding-right: var(--loopes-space-2xl); }

.loopes-py-0 { padding-top: 0; padding-bottom: 0; }
.loopes-py-1 { padding-top: var(--loopes-space-xs); padding-bottom: var(--loopes-space-xs); }
.loopes-py-2 { padding-top: var(--loopes-space-sm); padding-bottom: var(--loopes-space-sm); }
.loopes-py-3 { padding-top: var(--loopes-space); padding-bottom: var(--loopes-space); }
.loopes-py-4 { padding-top: var(--loopes-space-lg); padding-bottom: var(--loopes-space-lg); }
.loopes-py-5 { padding-top: var(--loopes-space-xl); padding-bottom: var(--loopes-space-xl); }
.loopes-py-6 { padding-top: var(--loopes-space-2xl); padding-bottom: var(--loopes-space-2xl); }

/* ===== Flex 工具 ===== */
.loopes-d-flex { display: flex; }
.loopes-d-inline-flex { display: inline-flex; }
.loopes-d-block { display: block; }
.loopes-d-inline-block { display: inline-block; }
.loopes-d-none { display: none; }

.loopes-flex-row { flex-direction: row; }
.loopes-flex-column { flex-direction: column; }
.loopes-flex-row-reverse { flex-direction: row-reverse; }
.loopes-flex-column-reverse { flex-direction: column-reverse; }
.loopes-flex-wrap { flex-wrap: wrap; }
.loopes-flex-nowrap { flex-wrap: nowrap; }

.loopes-justify-start { justify-content: flex-start; }
.loopes-justify-end { justify-content: flex-end; }
.loopes-justify-center { justify-content: center; }
.loopes-justify-between { justify-content: space-between; }
.loopes-justify-around { justify-content: space-around; }
.loopes-justify-evenly { justify-content: space-evenly; }

.loopes-items-start { align-items: flex-start; }
.loopes-items-end { align-items: flex-end; }
.loopes-items-center { align-items: center; }
.loopes-items-baseline { align-items: baseline; }
.loopes-items-stretch { align-items: stretch; }

.loopes-flex-1 { flex: 1; }
.loopes-flex-auto { flex: auto; }
.loopes-flex-none { flex: none; }
.loopes-flex-grow-0 { flex-grow: 0; }
.loopes-flex-grow-1 { flex-grow: 1; }
.loopes-flex-shrink-0 { flex-shrink: 0; }
.loopes-flex-shrink-1 { flex-shrink: 1; }

.loopes-gap-0 { gap: 0; }
.loopes-gap-1 { gap: var(--loopes-space-xs); }
.loopes-gap-2 { gap: var(--loopes-space-sm); }
.loopes-gap-3 { gap: var(--loopes-space); }
.loopes-gap-4 { gap: var(--loopes-space-lg); }
.loopes-gap-5 { gap: var(--loopes-space-xl); }
.loopes-gap-6 { gap: var(--loopes-space-2xl); }

/* ===== 文本工具 ===== */
.loopes-text-left { text-align: left; }
.loopes-text-center { text-align: center; }
.loopes-text-right { text-align: right; }
.loopes-text-justify { text-align: justify; }

.loopes-text-xs { font-size: var(--loopes-font-size-sm); }
.loopes-text-sm { font-size: var(--loopes-font-size-sm); }
.loopes-text-base { font-size: var(--loopes-font-size); }
.loopes-text-lg { font-size: var(--loopes-font-size-lg); }
.loopes-text-xl { font-size: var(--loopes-font-size-xl); }
.loopes-text-h3 { font-size: var(--loopes-font-size-h3); }
.loopes-text-h2 { font-size: var(--loopes-font-size-h2); }

.loopes-font-normal { font-weight: 400; }
.loopes-font-medium { font-weight: 500; }
.loopes-font-semibold { font-weight: 600; }
.loopes-font-bold { font-weight: 700; }

.loopes-text-primary { color: var(--loopes-primary); }
.loopes-text-success { color: var(--loopes-success); }
.loopes-text-error { color: var(--loopes-error); }
.loopes-text-warning { color: var(--loopes-warning); }
.loopes-text-muted { color: var(--loopes-text-muted); }
.loopes-text-secondary { color: var(--loopes-text-secondary); }
.loopes-text-white { color: #fff; }

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

/* ===== 多行文本截断 ===== */
.loopes-text-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.loopes-text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.loopes-text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.loopes-text-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.loopes-text-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.loopes-text-break {
    word-break: break-word;
    overflow-wrap: break-word;
}
.loopes-text-nowrap { white-space: nowrap; }
.loopes-text-uppercase { text-transform: uppercase; }
.loopes-text-capitalize { text-transform: capitalize; }
.loopes-text-lowercase { text-transform: lowercase; }

/* ===== 宽度 & 高度工具 ===== */
.loopes-w-25 { width: 25%; }
.loopes-w-50 { width: 50%; }
.loopes-w-75 { width: 75%; }
.loopes-w-100 { width: 100%; }
.loopes-w-auto { width: auto; }

.loopes-h-25 { height: 25%; }
.loopes-h-50 { height: 50%; }
.loopes-h-75 { height: 75%; }
.loopes-h-100 { height: 100%; }
.loopes-h-auto { height: auto; }

.loopes-max-w-100 { max-width: 100%; }

.loopes-mx-auto { margin-left: auto; margin-right: auto; }

/* ===== 显示 & 溢出 ===== */
.loopes-overflow-hidden { overflow: hidden; }
.loopes-overflow-auto { overflow: auto; }
.loopes-overflow-scroll { overflow: scroll; }
.loopes-overflow-x-auto { overflow-x: auto; }
.loopes-overflow-y-auto { overflow-y: auto; }

.loopes-position-relative { position: relative; }
.loopes-position-absolute { position: absolute; }
.loopes-position-fixed { position: fixed; }
.loopes-position-sticky { position: sticky; }

.loopes-top-0 { top: 0; }
.loopes-right-0 { right: 0; }
.loopes-bottom-0 { bottom: 0; }
.loopes-left-0 { left: 0; }

/* ===== 边框 & 圆角 ===== */
.loopes-border { border: 1px solid var(--loopes-border); }
.loopes-border-0 { border: none; }
.loopes-border-top { border-top: 1px solid var(--loopes-border); }
.loopes-border-bottom { border-bottom: 1px solid var(--loopes-border); }

.loopes-rounded-sm { border-radius: var(--loopes-radius-sm); }
.loopes-rounded { border-radius: var(--loopes-radius); }
.loopes-rounded-lg { border-radius: var(--loopes-radius-lg); }
.loopes-rounded-full { border-radius: var(--loopes-radius-full); }
.loopes-rounded-0 { border-radius: 0; }

/* ===== 阴影 ===== */
.loopes-shadow-sm { box-shadow: var(--loopes-shadow-sm); }
.loopes-shadow { box-shadow: var(--loopes-shadow); }
.loopes-shadow-lg { box-shadow: var(--loopes-shadow-lg); }
.loopes-shadow-xl { box-shadow: var(--loopes-shadow-xl); }
.loopes-shadow-none { box-shadow: none; }

/* ===== 背景色 ===== */
.loopes-bg-primary { background: var(--loopes-primary); }
.loopes-bg-primary-light { background: var(--loopes-primary-light); }
.loopes-bg-success { background: var(--loopes-success); }
.loopes-bg-error { background: var(--loopes-error); }
.loopes-bg-warning { background: var(--loopes-warning); }
.loopes-bg-white { background: var(--loopes-bg); }
.loopes-bg-transparent { background: transparent; }

/* ===== 光标 & 交互 ===== */
.loopes-cursor-pointer { cursor: pointer; }
.loopes-cursor-not-allowed { cursor: not-allowed; }
.loopes-pointer-events-none { pointer-events: none; }
.loopes-user-select-none { user-select: none; }

/* ===== 可见性 ===== */
.loopes-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: none;
}

/* ===== 清除浮动 ===== */
.loopes-clearfix::after {
    content: '';
    display: table;
    clear: both;
}


/* button */
/* ====== Button 按钮系统 ======
 * 参考 Element UI 设计标准，优化视觉精致度
 * =============================== */

.loopes-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    border: 1px solid var(--loopes-border);
    border-radius: var(--loopes-radius);
    font-size: var(--loopes-font-size);
    font-weight: 600;
    font-family: var(--loopes-font);
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--loopes-bg);
    color: var(--loopes-text);
}

.loopes-btn:hover {
    border-color: var(--loopes-primary);
    color: var(--loopes-primary);
    transform: translateY(-1px);
    box-shadow: var(--loopes-shadow);
    text-decoration: none;
}

.loopes-btn:active {
    transform: translateY(0) scale(0.98);
}

.loopes-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}

/* ===== 纯色类型变体 ===== */
.loopes-btn--primary {
    background: var(--loopes-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px var(--loopes-shadow-color);
}
.loopes-btn--primary:hover {
    background: var(--loopes-primary-hover);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px var(--loopes-shadow-color-strong);
}
.loopes-btn--primary:active {
    background: var(--loopes-primary-active);
}

.loopes-btn--success {
    background: var(--loopes-success);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.loopes-btn--success:hover {
    background: var(--loopes-success-hover);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}
.loopes-btn--success:active {
    background: var(--loopes-success-active);
}

.loopes-btn--warning {
    background: var(--loopes-warning);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.loopes-btn--warning:hover {
    background: var(--loopes-warning-hover);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}
.loopes-btn--warning:active {
    background: var(--loopes-warning-active);
}

.loopes-btn--error {
    background: var(--loopes-error);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.loopes-btn--error:hover {
    background: var(--loopes-error-hover);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
}
.loopes-btn--error:active {
    background: var(--loopes-error-active);
}

.loopes-btn--info {
    background: var(--loopes-info);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.loopes-btn--info:hover {
    background: var(--loopes-info-hover);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
}
.loopes-btn--info:active {
    background: var(--loopes-info-active);
}

/* ===== 朴素按钮（plain） ===== */
.loopes-btn--plain {
    background: transparent;
    border-color: var(--loopes-border);
    color: var(--loopes-text);
    box-shadow: none;
}
.loopes-btn--plain:hover {
    border-color: var(--loopes-primary);
    color: var(--loopes-primary);
    transform: translateY(-1px);
}

.loopes-btn--plain.loopes-btn--primary {
    color: var(--loopes-primary);
    border-color: var(--loopes-primary-light);
    background: var(--loopes-primary-light);
}
.loopes-btn--plain.loopes-btn--primary:hover {
    background: var(--loopes-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px var(--loopes-shadow-color);
}

.loopes-btn--plain.loopes-btn--success {
    color: var(--loopes-success);
    border-color: var(--loopes-success-light);
    background: var(--loopes-success-light);
}
.loopes-btn--plain.loopes-btn--success:hover {
    background: var(--loopes-success);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.loopes-btn--plain.loopes-btn--warning {
    color: var(--loopes-warning);
    border-color: var(--loopes-warning-light);
    background: var(--loopes-warning-light);
}
.loopes-btn--plain.loopes-btn--warning:hover {
    background: var(--loopes-warning);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.loopes-btn--plain.loopes-btn--error {
    color: var(--loopes-error);
    border-color: var(--loopes-error-light);
    background: var(--loopes-error-light);
}
.loopes-btn--plain.loopes-btn--error:hover {
    background: var(--loopes-error);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.loopes-btn--plain.loopes-btn--info {
    color: var(--loopes-info);
    border-color: var(--loopes-info-light);
    background: var(--loopes-info-light);
}
.loopes-btn--plain.loopes-btn--info:hover {
    background: var(--loopes-info);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* ===== 尺寸 ===== */
.loopes-btn--sm {
    padding: 7px 14px;
    font-size: var(--loopes-font-size-sm);
    border-radius: var(--loopes-radius-sm);
    gap: 4px;
}

.loopes-btn--lg {
    padding: 14px 30px;
    font-size: var(--loopes-font-size-lg);
    border-radius: var(--loopes-radius-lg);
    gap: 8px;
}

/* ===== 块级按钮 ===== */
.loopes-btn--block {
    display: flex;
    width: 100%;
}

/* ===== 圆角按钮（round） ===== */
.loopes-btn--round {
    border-radius: var(--loopes-radius-round);
}

/* ===== 圆形图标按钮（circle） ===== */
.loopes-btn--circle {
    padding: 8px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    gap: 0;
    font-size: 16px;
}
.loopes-btn--circle.loopes-btn--sm {
    padding: 5px;
    min-width: 28px;
    min-height: 28px;
    font-size: 13px;
}
.loopes-btn--circle.loopes-btn--lg {
    padding: 12px;
    min-width: 48px;
    min-height: 48px;
    font-size: 20px;
}

/* 向后兼容 */
.loopes-btn--icon {
    padding: 8px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    gap: 0;
}

/* ===== 文字按钮（text） ===== */
.loopes-btn--text {
    background: transparent;
    border-color: transparent;
    color: var(--loopes-primary);
    box-shadow: none;
    padding-left: 8px;
    padding-right: 8px;
}
.loopes-btn--text:hover {
    background: var(--loopes-primary-light);
    color: var(--loopes-primary-hover);
    transform: none;
    box-shadow: none;
}
.loopes-btn--text:active {
    background: var(--loopes-primary-lighter);
    transform: none;
}

.loopes-btn--text.loopes-btn--success {
    color: var(--loopes-success);
}
.loopes-btn--text.loopes-btn--success:hover {
    background: var(--loopes-success-light);
    color: var(--loopes-success-hover);
}

.loopes-btn--text.loopes-btn--warning {
    color: var(--loopes-warning);
}
.loopes-btn--text.loopes-btn--warning:hover {
    background: var(--loopes-warning-light);
    color: var(--loopes-warning-hover);
}

.loopes-btn--text.loopes-btn--error {
    color: var(--loopes-error);
}
.loopes-btn--text.loopes-btn--error:hover {
    background: var(--loopes-error-light);
    color: var(--loopes-error-hover);
}

/* ===== 禁用状态 ===== */
.loopes-btn[disabled],
.loopes-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none !important;
    transform: none !important;
}

.loopes-btn--plain[disabled],
.loopes-btn--plain.loopes-btn--disabled {
    opacity: 0.4;
}

/* ===== 按钮组 ===== */
.loopes-btn-group {
    display: inline-flex;
    align-items: center;
}
.loopes-btn-group .loopes-btn {
    border-radius: 0;
    margin: 0;
    position: relative;
}
.loopes-btn-group .loopes-btn:first-child {
    border-radius: var(--loopes-radius) 0 0 var(--loopes-radius);
}
.loopes-btn-group .loopes-btn:last-child {
    border-radius: 0 var(--loopes-radius) var(--loopes-radius) 0;
}
.loopes-btn-group .loopes-btn + .loopes-btn {
    margin-left: -1px;
}

/* ===== 加载状态 ===== */
.loopes-btn--loading {
    position: relative;
    pointer-events: none;
}
.loopes-btn--loading .loopes-btn__text {
    opacity: 0;
    visibility: hidden;
}
.loopes-btn--loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: loopes-btn-spin 0.6s linear infinite;
}

.loopes-btn--lg.loopes-btn--loading::after {
    width: 18px;
    height: 18px;
    border-width: 2.5px;
}

.loopes-btn--sm.loopes-btn--loading::after {
    width: 12px;
    height: 12px;
}

@keyframes loopes-btn-spin {
    to { transform: rotate(360deg); }
}

/* ===== 图标 + 文字 ===== */
.loopes-btn__icon {
    font-size: 1.15em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* ===== 次要/描边按钮（向后兼容） ===== */
.loopes-btn--secondary {
    background: var(--loopes-bg);
    color: var(--loopes-text);
    border-color: var(--loopes-border);
}
.loopes-btn--secondary:hover {
    border-color: var(--loopes-primary);
    color: var(--loopes-primary);
    transform: translateY(-1px);
    box-shadow: var(--loopes-shadow);
}

.loopes-btn--outline {
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
}
.loopes-btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #fff;
    transform: translateY(-1px);
}

.loopes-btn--outline-primary {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}
.loopes-btn--outline-primary:hover {
    background: var(--loopes-primary-light);
    color: var(--loopes-primary);
    border-color: var(--loopes-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ===== Ghost 按钮（透明+低透明度边框，hover 时显色） ===== */
.loopes-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: none;
}

.loopes-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
    box-shadow: none;
}

.loopes-btn--ghost.loopes-btn--primary {
    background: transparent;
    border-color: rgba(var(--loopes-primary-rgb), 0.25);
    color: var(--loopes-primary);
}

.loopes-btn--ghost.loopes-btn--primary:hover {
    background: rgba(var(--loopes-primary-rgb), 0.08);
    border-color: var(--loopes-primary);
    color: var(--loopes-primary);
    box-shadow: none;
}

.loopes-btn--ghost.loopes-btn--success {
    background: transparent;
    border-color: rgba(16, 185, 129, 0.25);
    color: var(--loopes-success);
}

.loopes-btn--ghost.loopes-btn--success:hover {
    background: rgba(16, 185, 129, 0.08);
    border-color: var(--loopes-success);
    color: var(--loopes-success);
}

.loopes-btn--ghost.loopes-btn--warning {
    background: transparent;
    border-color: rgba(245, 158, 11, 0.25);
    color: var(--loopes-warning);
}

.loopes-btn--ghost.loopes-btn--warning:hover {
    background: rgba(245, 158, 11, 0.08);
    border-color: var(--loopes-warning);
    color: var(--loopes-warning);
}

.loopes-btn--ghost.loopes-btn--error {
    background: transparent;
    border-color: rgba(239, 68, 68, 0.25);
    color: var(--loopes-error);
}

.loopes-btn--ghost.loopes-btn--error:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: var(--loopes-error);
    color: var(--loopes-error);
}

.loopes-btn--ghost.loopes-btn--info {
    background: transparent;
    border-color: rgba(59, 130, 246, 0.25);
    color: var(--loopes-info);
}

.loopes-btn--ghost.loopes-btn--info:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: var(--loopes-info);
    color: var(--loopes-info);
}

/* ===== Gradient 渐变按钮 ===== */
.loopes-btn--gradient {
    border: none;
    color: #fff;
    background: var(--loopes-primary-gradient);
    box-shadow: 0 4px 16px rgba(var(--loopes-primary-rgb), 0.30);
}

.loopes-btn--gradient:hover {
    color: #fff;
    background: var(--loopes-primary-gradient);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(var(--loopes-primary-rgb), 0.40);
}

.loopes-btn--gradient:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(var(--loopes-primary-rgb), 0.30);
}

.loopes-btn--gradient.loopes-btn--success {
    background: linear-gradient(135deg, #10B981, #34D399);
    border: none;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.30);
}

.loopes-btn--gradient.loopes-btn--success:hover {
    box-shadow: 0 8px 28px rgba(16, 185, 129, 0.40);
}

.loopes-btn--gradient.loopes-btn--warning {
    background: linear-gradient(135deg, #F59E0B, #FBBF24);
    border: none;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.30);
}

.loopes-btn--gradient.loopes-btn--warning:hover {
    box-shadow: 0 8px 28px rgba(245, 158, 11, 0.40);
}

.loopes-btn--gradient.loopes-btn--error {
    background: linear-gradient(135deg, #EF4444, #F87171);
    border: none;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.30);
}

.loopes-btn--gradient.loopes-btn--error:hover {
    box-shadow: 0 8px 28px rgba(239, 68, 68, 0.40);
}

.loopes-btn--gradient.loopes-btn--info {
    background: linear-gradient(135deg, #3B82F6, #60A5FA);
    border: none;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.30);
}

.loopes-btn--gradient.loopes-btn--info:hover {
    box-shadow: 0 8px 28px rgba(59, 130, 246, 0.40);
}


/* input */
/* ====== 表单输入框 ====== */
.loopes-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--loopes-border);
    border-radius: var(--loopes-radius);
    font-size: var(--loopes-font-size);
    font-family: var(--loopes-font);
    color: var(--loopes-text);
    background: var(--loopes-bg);
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.loopes-input::placeholder {
    color: var(--loopes-text-muted);
}

.loopes-input:hover {
    border-color: var(--loopes-text-muted);
}

.loopes-input:focus {
    border-color: var(--loopes-primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.08);
}

/* ===== 尺寸变体 ===== */
.loopes-input--sm {
    padding: 6px 12px;
    font-size: var(--loopes-font-size-sm);
    border-radius: var(--loopes-radius-sm);
}

.loopes-input--lg {
    padding: 14px 20px;
    font-size: var(--loopes-font-size-lg);
    border-radius: var(--loopes-radius-lg);
}

/* ===== 状态变体 ===== */
.loopes-input[disabled],
.loopes-input--disabled {
    background: var(--loopes-bg-tertiary);
    color: var(--loopes-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.loopes-input[readonly],
.loopes-input--readonly {
    background: var(--loopes-bg-secondary);
    cursor: default;
}

.loopes-input--error {
    border-color: var(--loopes-error);
}
.loopes-input--error:focus {
    border-color: var(--loopes-error);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.loopes-input--success {
    border-color: var(--loopes-success);
}
.loopes-input--success:focus {
    border-color: var(--loopes-success);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.08);
}

/* ===== 文本域 ===== */
textarea.loopes-input {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.loopes-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--loopes-border);
    border-radius: var(--loopes-radius);
    font-size: var(--loopes-font-size);
    font-family: var(--loopes-font);
    color: var(--loopes-text);
    background: var(--loopes-bg);
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.loopes-textarea::placeholder {
    color: var(--loopes-text-muted);
}

.loopes-textarea:hover {
    border-color: var(--loopes-text-muted);
}

.loopes-textarea:focus {
    border-color: var(--loopes-primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.08);
}

.loopes-textarea--sm {
    padding: 6px 12px;
    font-size: var(--loopes-font-size-sm);
    border-radius: var(--loopes-radius-sm);
    min-height: 80px;
}

.loopes-textarea--lg {
    padding: 14px 20px;
    font-size: var(--loopes-font-size-lg);
    border-radius: var(--loopes-radius-lg);
    min-height: 160px;
}

.loopes-textarea[disabled] {
    background: var(--loopes-bg-tertiary);
    color: var(--loopes-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ===== 输入框组（前缀/后缀图标） ===== */
.loopes-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.loopes-input-group .loopes-input {
    flex: 1;
    min-width: 0;
}

/* 前缀 / 后缀——flex 布局 */
.loopes-input-group__prefix,
.loopes-input-group__suffix {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--loopes-text-muted);
    pointer-events: none;
}

.loopes-input-group__prefix svg,
.loopes-input-group__suffix svg {
    width: 18px;
    height: 18px;
}

/* 前缀：左侧 */
.loopes-input-group__prefix {
    order: -1;
    padding-left: 16px;
    padding-right: 4px;
}

.loopes-input-group--has-prefix .loopes-input {
    padding-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.loopes-input-group--has-prefix .loopes-input-group__prefix ~ .loopes-input {
    border-top-left-radius: var(--loopes-radius);
    border-bottom-left-radius: var(--loopes-radius);
    padding-left: 0;
}

/* 小尺寸前缀 */
.loopes-input-group--has-prefix .loopes-input--sm + .loopes-input-group__prefix {
    /* fallback: prefix is before input in DOM */
}
.loopes-input-group--has-prefix .loopes-input-group__prefix:has(~ .loopes-input--sm) {
    padding-left: 14px;
}
.loopes-input-group--has-prefix .loopes-input-group__prefix:has(~ .loopes-input--sm) svg {
    width: 15px;
    height: 15px;
}

/* suffix by default is simple */
.loopes-input-group__suffix {
    padding-right: 16px;
    padding-left: 4px;
}

.loopes-input-group--has-suffix .loopes-input {
    padding-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.loopes-input-group--has-suffix .loopes-input ~ .loopes-input-group__suffix {
    border-top-right-radius: var(--loopes-radius);
    border-bottom-right-radius: var(--loopes-radius);
}

/* 清空按钮（可交互） */
.loopes-input-group__clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: var(--loopes-bg-tertiary);
    border-radius: 50%;
    color: var(--loopes-text-light);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    font-size: 12px;
    pointer-events: auto;
}

.loopes-input-group__clear:hover {
    background: var(--loopes-text-muted);
    color: #fff;
}

.loopes-input-group--has-value .loopes-input-group__clear {
    display: flex;
}

/* 输入框行内提示 */
.loopes-input-msg {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--loopes-text-light);
}

.loopes-input-msg--error {
    color: var(--loopes-error);
}

.loopes-input-msg--success {
    color: var(--loopes-success);
}

.loopes-input-msg svg {
    width: 14px;
    height: 14px;
}

/* ===== 标签（label） ===== */
.loopes-input-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--loopes-text);
}

.loopes-input-label--required::after {
    content: '*';
    margin-left: 4px;
    color: var(--loopes-error);
}


/* textarea */
/* ====== 多行文本框 ====== */
.loopes-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--loopes-border);
    border-radius: var(--loopes-radius);
    font-size: var(--loopes-font-size);
    font-family: var(--loopes-font);
    color: var(--loopes-text);
    background: var(--loopes-bg);
    outline: none;
    resize: vertical;
    min-height: 120px;
    line-height: 1.7;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

.loopes-textarea::placeholder {
    color: var(--loopes-text-muted);
}

.loopes-textarea:hover {
    border-color: var(--loopes-text-muted);
}

.loopes-textarea:focus {
    border-color: var(--loopes-primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.08);
}

.loopes-textarea--sm {
    padding: 6px 12px;
    font-size: var(--loopes-font-size-sm);
    min-height: 80px;
}

.loopes-textarea--lg {
    padding: 14px 20px;
    font-size: var(--loopes-font-size-lg);
    min-height: 160px;
}

.loopes-textarea[disabled],
.loopes-textarea--disabled {
    background: var(--loopes-bg-tertiary);
    color: var(--loopes-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.loopes-textarea--error {
    border-color: var(--loopes-error);
}
.loopes-textarea--error:focus {
    border-color: var(--loopes-error);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}


/* select */
/* ====== 下拉选择框 ====== */
.loopes-select {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1.5px solid var(--loopes-border);
    border-radius: var(--loopes-radius);
    font-size: var(--loopes-font-size);
    font-family: var(--loopes-font);
    color: var(--loopes-text);
    background: var(--loopes-bg-secondary) url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

.loopes-select:focus {
    border-color: var(--loopes-primary);
    background-color: var(--loopes-bg);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.08);
}

.loopes-select--error {
    border-color: var(--loopes-error);
}

.loopes-select--error:focus {
    border-color: var(--loopes-error);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.loopes-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--loopes-bg-tertiary);
}

/* ===== 尺寸变体 ===== */
.loopes-select--sm {
    padding: 6px 28px 6px 12px;
    font-size: var(--loopes-font-size-sm);
    border-radius: var(--loopes-radius-sm);
}

.loopes-select--lg {
    padding: 14px 40px 14px 20px;
    font-size: var(--loopes-font-size-lg);
    border-radius: var(--loopes-radius-lg);
}


/* checkbox */
/* ====== 复选框 ====== */
.loopes-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--loopes-font-size);
    font-family: var(--loopes-font);
    color: var(--loopes-text);
    user-select: none;
}

.loopes-checkbox__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.loopes-checkbox__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--loopes-border);
    border-radius: 4px;
    background: var(--loopes-bg);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.loopes-checkbox__input:checked + .loopes-checkbox__indicator {
    background: var(--loopes-primary);
    border-color: var(--loopes-primary);
}

.loopes-checkbox__input:checked + .loopes-checkbox__indicator::after {
    content: '';
    display: block;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

.loopes-checkbox__input:focus-visible + .loopes-checkbox__indicator {
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.loopes-checkbox--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* radio */
/* ====== 单选按钮 ====== */
.loopes-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--loopes-font-size);
    font-family: var(--loopes-font);
    color: var(--loopes-text);
    user-select: none;
}

.loopes-radio__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.loopes-radio__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--loopes-border);
    border-radius: 50%;
    background: var(--loopes-bg);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.loopes-radio__input:checked + .loopes-radio__indicator {
    border-color: var(--loopes-primary);
}

.loopes-radio__input:checked + .loopes-radio__indicator::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--loopes-primary);
}

.loopes-radio__input:focus-visible + .loopes-radio__indicator {
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.loopes-radio--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* switch */
/* ====== 开关切换 ====== */
.loopes-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: var(--loopes-font-size);
    font-family: var(--loopes-font);
    color: var(--loopes-text);
    user-select: none;
}

.loopes-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.loopes-switch__track {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--loopes-border);
    border-radius: 12px;
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.loopes-switch__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease;
}

.loopes-switch__input:checked + .loopes-switch__track {
    background: var(--loopes-primary);
}

.loopes-switch__input:checked + .loopes-switch__track::after {
    transform: translateX(20px);
}

.loopes-switch__input:focus-visible + .loopes-switch__track {
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.loopes-switch--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.loopes-switch--success .loopes-switch__input:checked + .loopes-switch__track {
    background: var(--loopes-success);
}

.loopes-switch--error .loopes-switch__input:checked + .loopes-switch__track {
    background: var(--loopes-error);
}


/* card */
/* ====== 卡片容器 ====== */
.loopes-card {
    background: var(--loopes-bg);
    border-radius: var(--loopes-radius-lg);
    box-shadow: var(--loopes-shadow);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.loopes-card--hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(26, 115, 232, 0.12);
}

.loopes-card--bordered {
    border: 1px solid var(--loopes-border);
    box-shadow: none;
}

.loopes-card--bordered:hover {
    border-color: var(--loopes-primary);
    box-shadow: 0 8px 28px rgba(var(--loopes-primary-rgb, 26, 115, 232), 0.12);
}

.loopes-card--hover-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(var(--loopes-primary-rgb, 26, 115, 232), 0.10);
    border-color: var(--loopes-primary);
}

.loopes-card--hover-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(16, 185, 129, 0.12);
    border-color: var(--loopes-success);
}

.loopes-card--hover-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(245, 158, 11, 0.12);
    border-color: var(--loopes-warning);
}

.loopes-card--hover-error:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(239, 68, 68, 0.12);
    border-color: var(--loopes-error);
}

.loopes-card--flat {
    box-shadow: none;
    border: 1px solid var(--loopes-border-light);
}

/* 卡片头部 */
.loopes-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--loopes-border-light);
}

.loopes-card__header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.loopes-card__header-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--loopes-text);
    margin: 0;
    line-height: 1.4;
}

.loopes-card__header-subtitle {
    font-size: 13px;
    color: var(--loopes-text-light);
    margin: 0;
}

.loopes-card__header-action {
    flex-shrink: 0;
}

/* 卡片图片 */
.loopes-card__image {
    width: 100%;
    display: block;
}

.loopes-card__image-wrap {
    position: relative;
    overflow: hidden;
}

.loopes-card__image-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

/* 卡片身体 */
.loopes-card__body {
    padding: 24px;
}

.loopes-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--loopes-text-dark);
    margin: 0 0 12px;
    line-height: 1.5;
}

.loopes-card__text {
    font-size: var(--loopes-font-size);
    color: var(--loopes-text-light);
    line-height: 1.7;
    margin: 0;
}

/* 卡片元数据行 */
.loopes-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--loopes-text-light);
}

.loopes-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.loopes-card__meta-item svg {
    width: 14px;
    height: 14px;
}

/* 卡片底部 */
.loopes-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--loopes-border-light);
    font-size: 14px;
}

.loopes-card__footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.loopes-card__footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* 垂直卡片（image 在上） */
.loopes-card--vertical {
    display: flex;
    flex-direction: column;
}

/* 水平卡片（image 在一侧） */
.loopes-card--horizontal {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.loopes-card--horizontal .loopes-card__image-wrap {
    width: 200px;
    flex-shrink: 0;
}

.loopes-card--horizontal .loopes-card__image {
    height: 100%;
    object-fit: cover;
}

.loopes-card--horizontal .loopes-card__body {
    flex: 1;
}

@media (max-width: 768px) {
    .loopes-card__header {
        padding: 14px 18px;
    }

    .loopes-card__body {
        padding: 18px;
    }

    .loopes-card__footer {
        padding: 12px 18px;
    }

    .loopes-card--horizontal {
        flex-direction: column;
    }

    .loopes-card--horizontal .loopes-card__image-wrap {
        width: 100%;
    }
}

/* ====== Card Media 变体（图片型卡片，适合文章/新闻卡片场景） ====== */
.loopes-card--media {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--loopes-border-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.loopes-card--media:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(var(--loopes-primary-rgb), 0.10);
    border-color: transparent;
}

.loopes-card--media .loopes-card__image-wrap {
    overflow: hidden;
}

.loopes-card--media .loopes-card__image {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.loopes-card--media:hover .loopes-card__image {
    transform: scale(1.05);
}

.loopes-card--media .loopes-card__body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.loopes-card--media .loopes-card__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--loopes-text);
    margin-bottom: 10px;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.loopes-card--media:hover .loopes-card__title {
    color: var(--loopes-primary);
}

.loopes-card--media .loopes-card__text {
    font-size: 14px;
    color: var(--loopes-text-light);
    line-height: 1.7;
    margin-bottom: 16px;
    flex: 1;
}

.loopes-card--media .loopes-card__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--loopes-border-light);
    font-size: 13px;
    color: var(--loopes-text-light);
}

.loopes-card--media .loopes-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.loopes-card--media .loopes-card__meta-item svg {
    width: 14px;
    height: 14px;
}

.loopes-card--media .loopes-card__arrow {
    margin-left: auto;
    font-size: 14px;
    color: var(--loopes-primary);
    transition: transform 0.3s ease;
}

.loopes-card--media:hover .loopes-card__arrow {
    transform: translateX(4px);
}

/* 小号媒体卡片 */
.loopes-card--media-sm .loopes-card__body {
    padding: 16px;
}

.loopes-card--media-sm .loopes-card__title {
    font-size: 15px;
    margin-bottom: 6px;
}

.loopes-card--media-sm .loopes-card__text {
    font-size: 13px;
    margin-bottom: 12px;
}

.loopes-card--media-sm .loopes-card__image {
    aspect-ratio: 16 / 9;
}

/* ====== Card Post 变体（文章卡片，来自分类页设计，适合博客/文章列表） ====== */
.loopes-card--post {
    display: flex;
    flex-direction: column;
    background: var(--loopes-bg);
    border-radius: 14px;
    border: 1px solid var(--loopes-border);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.loopes-card--post:hover {
    transform: translateY(-6px);
    box-shadow:
        0 20px 40px -12px rgba(26, 115, 232, 0.12),
        0 8px 24px -8px rgba(0, 0, 0, 0.06);
    border-color: rgba(26, 115, 232, 0.15);
}

.loopes-card--post .loopes-card__image-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--loopes-bg-secondary);
}

.loopes-card--post .loopes-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.loopes-card--post:hover .loopes-card__image {
    transform: scale(1.06);
}

/* 日期徽章（左下角毛玻璃半透明层） */
.loopes-card--post .loopes-card__date-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    line-height: 1.2;
    min-width: 48px;
}

.loopes-card--post .loopes-card__date-day {
    font-size: 18px;
    font-weight: 800;
    color: var(--loopes-primary);
}

.loopes-card--post .loopes-card__date-month {
    font-size: 11px;
    font-weight: 600;
    color: var(--loopes-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 分类标签（左上角） */
.loopes-card--post .loopes-card__cat-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--loopes-primary);
    line-height: 1.4;
    text-decoration: none;
}

.loopes-card--post .loopes-card__body {
    padding: 22px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.loopes-card--post .loopes-card__post-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--loopes-text-muted);
    margin-bottom: 8px;
}

.loopes-card--post .loopes-card__post-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--loopes-text);
    margin: 0 0 10px;
    line-height: 1.45;
}

.loopes-card--post .loopes-card__post-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

.loopes-card--post .loopes-card__post-title a:hover {
    color: var(--loopes-primary);
}

.loopes-card--post .loopes-card__post-excerpt {
    font-size: 14px;
    color: var(--loopes-text-secondary);
    line-height: 1.7;
    margin: 0 0 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.loopes-card--post .loopes-card__post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--loopes-border-light);
}

.loopes-card--post .loopes-card__post-views {
    font-size: 13px;
    color: var(--loopes-text-muted);
}

.loopes-card--post .loopes-card__post-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--loopes-primary);
    text-decoration: none;
    transition: gap 0.25s ease;
}

.loopes-card--post:hover .loopes-card__post-more {
    gap: 8px;
}

.loopes-card--post .loopes-card__post-more-arrow {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.loopes-card--post:hover .loopes-card__post-more-arrow {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .loopes-card--post .loopes-card__body {
        padding: 18px 20px 20px;
    }

    .loopes-card--post .loopes-card__post-title {
        font-size: 16px;
    }
}

/* ====== Card Product 变体（商品卡片，适合电商/产品展示） ====== */
.loopes-card--product {
    display: flex;
    flex-direction: column;
    background: var(--loopes-bg);
    border-radius: 12px;
    border: 1px solid var(--loopes-border);
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.loopes-card--product:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--loopes-border);
}

/* 商品图片 */
.loopes-card--product .loopes-card__product-image-wrap {
    position: relative;
    overflow: hidden;
    background: var(--loopes-bg-secondary);
    aspect-ratio: 1 / 1;
}

.loopes-card--product .loopes-card__product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.loopes-card--product:hover .loopes-card__product-image {
    transform: scale(1.06);
}

/* 商品标签（右上角） */
.loopes-card--product .loopes-card__product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    line-height: 1.4;
    z-index: 2;
}

.loopes-card--product .loopes-card__product-badge--sale {
    background: var(--loopes-error);
    color: #fff;
}

.loopes-card--product .loopes-card__product-badge--new {
    background: var(--loopes-success);
    color: #fff;
}

.loopes-card--product .loopes-card__product-badge--hot {
    background: var(--loopes-warning);
    color: #fff;
}

/* 商品操作按钮（hover 显示） */
.loopes-card--product .loopes-card__product-actions {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateX(8px);
    transition: all 0.3s ease;
    z-index: 2;
}

.loopes-card--product:hover .loopes-card__product-actions {
    opacity: 1;
    transform: translateX(0);
}

.loopes-card--product .loopes-card__product-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: var(--loopes-text-secondary);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.loopes-card--product .loopes-card__product-action-btn:hover {
    background: var(--loopes-primary);
    color: #fff;
}

/* 商品信息 */
.loopes-card--product .loopes-card__product-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loopes-card--product .loopes-card__product-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--loopes-text);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.loopes-card--product .loopes-card__product-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.loopes-card--product .loopes-card__product-name a:hover {
    color: var(--loopes-primary);
}

/* 商品描述 */
.loopes-card--product .loopes-card__product-desc {
    font-size: 13px;
    color: var(--loopes-text-muted);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 评分 */
.loopes-card--product .loopes-card__product-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.loopes-card--product .loopes-card__product-stars {
    display: flex;
    align-items: center;
    gap: 1px;
    color: #f59e0b;
    font-size: 13px;
}

.loopes-card--product .loopes-card__product-stars .star-empty {
    color: var(--loopes-border);
}

.loopes-card--product .loopes-card__product-rate {
    font-size: 12px;
    color: var(--loopes-text-muted);
}

.loopes-card--product .loopes-card__product-sold {
    font-size: 12px;
    color: var(--loopes-text-muted);
    margin-left: auto;
}

/* 价格 */
.loopes-card--product .loopes-card__product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.loopes-card--product .loopes-card__product-price-current {
    font-size: 20px;
    font-weight: 800;
    color: var(--loopes-error);
    line-height: 1;
}

.loopes-card--product .loopes-card__product-price-current .currency {
    font-size: 13px;
    font-weight: 700;
}

.loopes-card--product .loopes-card__product-price-original {
    font-size: 13px;
    color: var(--loopes-text-muted);
    text-decoration: line-through;
}

/* 底部操作栏 */
.loopes-card--product .loopes-card__product-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--loopes-border-light);
}

.loopes-card--product .loopes-card__product-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.25s ease;
    text-decoration: none;
}

.loopes-card--product .loopes-card__product-btn--primary {
    background: var(--loopes-primary);
    color: #fff;
}

.loopes-card--product .loopes-card__product-btn--primary:hover {
    background: var(--loopes-primary-hover, #1557b0);
}

.loopes-card--product .loopes-card__product-btn--outline {
    background: transparent;
    color: var(--loopes-text-secondary);
    border: 1px solid var(--loopes-border);
}

.loopes-card--product .loopes-card__product-btn--outline:hover {
    border-color: var(--loopes-primary);
    color: var(--loopes-primary);
}

/* 横向商品卡片 */
.loopes-card--product-horizontal {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--loopes-bg);
    border-radius: 12px;
    border: 1px solid var(--loopes-border);
    overflow: hidden;
    transition: all 0.35s ease;
}

.loopes-card--product-horizontal:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
    border-color: var(--loopes-border);
}

.loopes-card--product-horizontal .loopes-card__product-image-wrap {
    width: 180px;
    flex-shrink: 0;
    aspect-ratio: auto;
    background: var(--loopes-bg-secondary);
}

.loopes-card--product-horizontal .loopes-card__product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.loopes-card--product-horizontal .loopes-card__product-body {
    flex: 1;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loopes-card--product-horizontal .loopes-card__product-footer {
    padding: 0 20px 18px;
    border-top: none;
}

@media (max-width: 768px) {
    .loopes-card--product-horizontal {
        flex-direction: column;
    }

    .loopes-card--product-horizontal .loopes-card__product-image-wrap {
        width: 100%;
        aspect-ratio: 16 / 10;
    }
}


/* badge */
/* ====== 徽标/徽章 ====== */
.loopes-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--loopes-font);
    line-height: 1.5;
    color: var(--loopes-text);
    background: var(--loopes-bg-secondary);
    border-radius: 20px;
    white-space: nowrap;
}

.loopes-badge--primary {
    color: var(--loopes-primary);
    background: var(--loopes-primary-light);
}

.loopes-badge--success {
    color: var(--loopes-success-text);
    background: var(--loopes-success-light);
}

.loopes-badge--error {
    color: var(--loopes-error-text);
    background: var(--loopes-error-light);
}

.loopes-badge--warning {
    color: var(--loopes-warning-text);
    background: var(--loopes-warning-light);
}

.loopes-badge--dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
}

.loopes-badge--dot.loopes-badge--primary { background: var(--loopes-primary); }
.loopes-badge--dot.loopes-badge--success { background: var(--loopes-success); }
.loopes-badge--dot.loopes-badge--error   { background: var(--loopes-error); }
.loopes-badge--dot.loopes-badge--warning { background: var(--loopes-warning); }


/* avatar */
/* ====== 头像 ====== */
.loopes-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--loopes-radius-full);
    background: var(--loopes-primary-light);
    color: var(--loopes-primary);
    font-size: 16px;
    font-weight: 600;
    font-family: var(--loopes-font);
    flex-shrink: 0;
    overflow: hidden;
    object-fit: cover;
}

.loopes-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.loopes-avatar--sm {
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.loopes-avatar--lg {
    width: 56px;
    height: 56px;
    font-size: 22px;
}

.loopes-avatar--xl {
    width: 80px;
    height: 80px;
    font-size: 32px;
}

.loopes-avatar--rounded {
    border-radius: var(--loopes-radius);
}

.loopes-avatar--bordered {
    border: 2px solid var(--loopes-bg);
    box-shadow: 0 0 0 2px var(--loopes-primary-light);
}

.loopes-avatar-group {
    display: inline-flex;
    align-items: center;
}

.loopes-avatar-group .loopes-avatar {
    border: 2px solid var(--loopes-bg);
    margin-left: -8px;
}

.loopes-avatar-group .loopes-avatar:first-child {
    margin-left: 0;
}

.loopes-avatar-group .loopes-avatar--sm {
    margin-left: -6px;
}


/* progress */
/* ====== 进度条 ====== */
.loopes-progress {
    width: 100%;
    height: 8px;
    background: var(--loopes-bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.loopes-progress__bar {
    height: 100%;
    background: var(--loopes-primary);
    border-radius: 4px;
    transition: width 0.5s ease;
    min-width: 0;
}

.loopes-progress__bar--success { background: var(--loopes-success); }
.loopes-progress__bar--error   { background: var(--loopes-error); }
.loopes-progress__bar--warning { background: var(--loopes-warning); }

.loopes-progress--sm {
    height: 4px;
}

.loopes-progress--sm .loopes-progress__bar {
    border-radius: 2px;
}

.loopes-progress--lg {
    height: 12px;
    border-radius: 6px;
}

.loopes-progress--lg .loopes-progress__bar {
    border-radius: 6px;
}

.loopes-progress--striped .loopes-progress__bar {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

.loopes-progress--animated .loopes-progress__bar {
    animation: loopes-progress-stripes 1s linear infinite;
}

@keyframes loopes-progress-stripes {
    from { background-position: 1rem 0; }
    to   { background-position: 0 0; }
}

/* 带标签的进度条容器 */
.loopes-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.loopes-progress-wrap__label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-family: var(--loopes-font);
    color: var(--loopes-text-secondary);
}


/* tooltip */
/* ====== 工具提示 ====== */
.loopes-tooltip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.loopes-tooltip__content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    font-size: 13px;
    font-family: var(--loopes-font);
    line-height: 1.4;
    color: #fff;
    background: #1e293b;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
}

.loopes-tooltip__content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
}

.loopes-tooltip:hover .loopes-tooltip__content,
.loopes-tooltip--visible .loopes-tooltip__content {
    opacity: 1;
    visibility: visible;
}

/* 方向变体 */
.loopes-tooltip--top .loopes-tooltip__content {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.loopes-tooltip--top .loopes-tooltip__content::after {
    top: 100%;
    border-top-color: #1e293b;
    border-bottom-color: transparent;
}

.loopes-tooltip--bottom .loopes-tooltip__content {
    top: calc(100% + 8px);
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
}

.loopes-tooltip--bottom .loopes-tooltip__content::after {
    top: auto;
    bottom: 100%;
    border-bottom-color: #1e293b;
    border-top-color: transparent;
}

.loopes-tooltip--left .loopes-tooltip__content {
    top: 50%;
    right: calc(100% + 8px);
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
}

.loopes-tooltip--left .loopes-tooltip__content::after {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-left-color: #1e293b;
    border-top-color: transparent;
}

.loopes-tooltip--right .loopes-tooltip__content {
    top: 50%;
    left: calc(100% + 8px);
    bottom: auto;
    transform: translateY(-50%);
}

.loopes-tooltip--right .loopes-tooltip__content::after {
    top: 50%;
    left: auto;
    right: 100%;
    transform: translateY(-50%);
    border-right-color: #1e293b;
    border-top-color: transparent;
}


/* skeleton */
/* ====== Skeleton 骨架屏 ====== */
.loopes-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.loopes-skeleton__line {
    height: 14px;
    border-radius: 4px;
    background: var(--loopes-bg-tertiary);
    background-image: linear-gradient(
        90deg,
        var(--loopes-bg-tertiary) 25%,
        var(--loopes-bg-elevated) 37%,
        var(--loopes-bg-tertiary) 63%
    );
    background-size: 400% 100%;
    animation: loopes-skeleton-loading 1.4s ease infinite;
}

.loopes-skeleton__title {
    width: 60%;
    height: 20px;
    border-radius: 4px;
    background: var(--loopes-bg-tertiary);
    background-image: linear-gradient(
        90deg,
        var(--loopes-bg-tertiary) 25%,
        var(--loopes-bg-elevated) 37%,
        var(--loopes-bg-tertiary) 63%
    );
    background-size: 400% 100%;
    animation: loopes-skeleton-loading 1.4s ease infinite;
}

.loopes-skeleton__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--loopes-bg-tertiary);
    background-image: linear-gradient(
        90deg,
        var(--loopes-bg-tertiary) 25%,
        var(--loopes-bg-elevated) 37%,
        var(--loopes-bg-tertiary) 63%
    );
    background-size: 400% 100%;
    animation: loopes-skeleton-loading 1.4s ease infinite;
}

.loopes-skeleton__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--loopes-radius);
    background: var(--loopes-bg-tertiary);
    background-image: linear-gradient(
        90deg,
        var(--loopes-bg-tertiary) 25%,
        var(--loopes-bg-elevated) 37%,
        var(--loopes-bg-tertiary) 63%
    );
    background-size: 400% 100%;
    animation: loopes-skeleton-loading 1.4s ease infinite;
}

.loopes-skeleton__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--loopes-bg);
    border-radius: var(--loopes-radius);
    border: 1px solid var(--loopes-border);
}

.loopes-skeleton--inline {
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.loopes-skeleton--inline .loopes-skeleton__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@keyframes loopes-skeleton-loading {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}


/* loopes-image */
/* ====== Loopes Image 图片组件（懒加载 + 占位 + 加载失败回退） ====== */
.loopes-image {
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: 0;
}

.loopes-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

.loopes-image__img--loading {
    opacity: 0;
}

.loopes-image__img--loaded {
    opacity: 1;
}

.loopes-image__img--error {
    opacity: 0;
}

/* 占位符骨架 */
.loopes-image__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--loopes-bg-tertiary);
    color: var(--loopes-text-light);
    transition: opacity 0.3s ease;
}

.loopes-image__placeholder--hidden {
    opacity: 0;
    pointer-events: none;
}

.loopes-image__placeholder-icon {
    width: 32px;
    height: 32px;
    opacity: 0.4;
}

/* 加载失败回退 */
.loopes-image__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--loopes-bg-secondary);
    color: var(--loopes-text-light);
    font-size: 13px;
}

.loopes-image__fallback-icon {
    width: 36px;
    height: 36px;
    opacity: 0.5;
}

/* 比例变体 */
.loopes-image--16x9 {
    aspect-ratio: 16 / 9;
}

.loopes-image--4x3 {
    aspect-ratio: 4 / 3;
}

.loopes-image--1x1 {
    aspect-ratio: 1 / 1;
}

.loopes-image--3x4 {
    aspect-ratio: 3 / 4;
}

/* 圆角变体 */
.loopes-image--rounded {
    border-radius: var(--loopes-radius);
}

.loopes-image--circle {
    border-radius: 50%;
}

.loopes-image--rounded-lg {
    border-radius: var(--loopes-radius-lg);
}

/* 缩放模式 */
.loopes-image--contain .loopes-image__img {
    object-fit: contain;
}

.loopes-image--cover .loopes-image__img {
    object-fit: cover;
}


/* empty-state */
/* ====== 空状态 ====== */
.loopes-empty-state,
.loopes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    text-align: center;
}

.loopes-empty-state__icon,
.loopes-empty__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--loopes-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

/* 大图标变体 */
.loopes-empty-state__icon--lg {
    width: 100px;
    height: 100px;
    margin-bottom: 24px;
    font-size: 44px;
}

.loopes-empty-state__icon--lg svg {
    width: 48px;
    height: 48px;
}

.loopes-empty-state__title,
.loopes-empty__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--loopes-text);
    margin-bottom: 8px;
}

/* 大标题变体 */
.loopes-empty-state__title--lg {
    font-size: 24px;
    font-weight: 700;
}

.loopes-empty-state__desc,
.loopes-empty__desc {
    font-size: 14px;
    color: var(--loopes-text-light);
    margin-bottom: 24px;
    max-width: 320px;
}

/* 大描述变体 */
.loopes-empty-state__desc--lg {
    font-size: 15px;
    max-width: 400px;
}

.loopes-empty-state__btn,
.loopes-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: var(--loopes-primary);
    color: #fff;
    border-radius: var(--loopes-radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.loopes-empty-state__btn:hover,
.loopes-empty__btn:hover {
    background: var(--loopes-primary-hover);
    color: #fff;
    text-decoration: none;
}


/* spinner */
/* ====== Spinner 加载动画 ====== */
.loopes-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--loopes-border);
    border-top-color: var(--loopes-primary);
    border-radius: var(--loopes-radius-full);
    animation: loopesSpin 0.7s linear infinite;
}

.loopes-spinner--lg {
    width: 40px;
    height: 40px;
    border-width: 3px;
}


/* carousel */
.loopes-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.loopes-carousel__track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.loopes-carousel__slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;
}

.loopes-carousel__slide img {
    width: 100%;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.loopes-carousel__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 30px 30px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    color: #fff;
    pointer-events: none;
}

.loopes-carousel__caption h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
}

.loopes-carousel__caption p {
    margin: 0;
    font-size: 14px;
    opacity: 0.85;
}

.loopes-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(0, 0, 0, 0.35);
    border-radius: var(--loopes-radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--loopes-shadow);
    transition: all 0.2s ease;
    z-index: 2;
    opacity: 0.85;
}

.loopes-carousel__btn:hover,
.loopes-carousel__btn:focus-visible {
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    opacity: 1;
}

.loopes-carousel__btn svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.loopes-carousel__btn--prev {
    left: 16px;
}

.loopes-carousel__btn--next {
    right: 16px;
}

.loopes-carousel__btn--hidden {
    display: none;
}

.loopes-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 0;
}

.loopes-carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--loopes-radius-full);
    border: 2px solid var(--loopes-border);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.loopes-carousel__dot.active {
    background: var(--loopes-primary);
    border-color: var(--loopes-primary);
    width: 28px;
    border-radius: 5px;
}

.loopes-carousel__dot:hover,
.loopes-carousel__dot:focus-visible {
    border-color: var(--loopes-primary);
}

.loopes-carousel--dragging .loopes-carousel__track {
    transition-duration: 0s;
    cursor: grabbing;
}

.loopes-carousel--fade .loopes-carousel__slide {
    opacity: 0;
    transition: opacity 0.6s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.loopes-carousel--fade .loopes-carousel__slide.active {
    opacity: 1;
    position: relative;
}


/* accordion */
.loopes-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loopes-accordion__item {
    border: 1px solid var(--loopes-border);
    border-radius: var(--loopes-radius-lg);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.loopes-accordion__item:hover {
    box-shadow: var(--loopes-shadow-sm);
}

.loopes-accordion__item.active {
    box-shadow: var(--loopes-shadow);
    border-color: var(--loopes-primary);
}

.loopes-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 22px;
    border: none;
    background: var(--loopes-bg);
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--loopes-text);
    font-family: var(--loopes-font);
    text-align: left;
    gap: 12px;
    transition: background 0.2s ease;
}

.loopes-accordion__header:hover {
    background: var(--loopes-bg-secondary);
}

.loopes-accordion__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.loopes-accordion__icon svg {
    width: 16px;
    height: 16px;
    fill: var(--loopes-text-muted);
    transition: fill 0.2s ease;
}

.loopes-accordion__item.active .loopes-accordion__icon {
    transform: rotate(180deg);
}

.loopes-accordion__item.active .loopes-accordion__icon svg {
    fill: var(--loopes-primary);
}

.loopes-accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
    padding: 0 22px;
}

.loopes-accordion__body-inner {
    padding-bottom: 20px;
    font-size: 14px;
    color: var(--loopes-text-secondary);
    line-height: 1.7;
}

.loopes-accordion__body p {
    margin: 0 0 8px;
}

.loopes-accordion__body p:last-child {
    margin-bottom: 0;
}

.loopes-accordion__item.active .loopes-accordion__body {
    padding: 0 22px;
}


/* grid */
/* ========================================
 * LoopesUI 栅格系统（Grid & Layout）
 *
 * 两种模式：
 *   1. Container / Row / Col 体系（类似 Bootstrap 栅格）
 *   2. loopes-grid--* 快捷 CSS Grid（保留原有）
 *
 * 响应式断点：
 *   xs: <576px
 *   sm: >=576px
 *   md: >=768px
 *   lg: >=992px
 *   xl: >=1200px
 * ======================================== */

/* ===== Container ===== */
.loopes-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--loopes-space);
    padding-right: var(--loopes-space);
    box-sizing: border-box;
}

.loopes-container--fluid {
    max-width: none;
}

/* Container 尺寸变体 */
.loopes-container--xs {
    max-width: 580px;
}

.loopes-container--sm {
    max-width: 780px;
}

.loopes-container--md {
    max-width: 980px;
}

.loopes-container--lg {
    max-width: 1200px;
}

.loopes-container--xl {
    max-width: 1400px;
}

@media (min-width: 576px) {
    .loopes-container { max-width: 540px; }
}
@media (min-width: 768px) {
    .loopes-container { max-width: 720px; }
}
@media (min-width: 992px) {
    .loopes-container { max-width: 960px; }
}
@media (min-width: 1200px) {
    .loopes-container { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .loopes-container { max-width: 1320px; }
}

/* ===== Row ===== */
.loopes-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--loopes-space));
    margin-right: calc(-1 * var(--loopes-space));
    box-sizing: border-box;
}

.loopes-row--no-gutters {
    margin-left: 0;
    margin-right: 0;
}
.loopes-row--no-gutters > [class*="loopes-col"] {
    padding-left: 0;
    padding-right: 0;
}

.loopes-row--gap-sm {
    margin-left: calc(-1 * var(--loopes-space-sm));
    margin-right: calc(-1 * var(--loopes-space-sm));
}
.loopes-row--gap-sm > [class*="loopes-col"] {
    padding-left: var(--loopes-space-sm);
    padding-right: var(--loopes-space-sm);
}

.loopes-row--gap-lg {
    margin-left: calc(-1 * var(--loopes-space-lg));
    margin-right: calc(-1 * var(--loopes-space-lg));
}
.loopes-row--gap-lg > [class*="loopes-col"] {
    padding-left: var(--loopes-space-lg);
    padding-right: var(--loopes-space-lg);
}

/* ===== Col 基础 ===== */
[class*="loopes-col"] {
    box-sizing: border-box;
    padding-left: var(--loopes-space);
    padding-right: var(--loopes-space);
    min-width: 0;
}

.loopes-col { flex: 1 0 0%; }
.loopes-col-auto { flex: 0 0 auto; width: auto; }

/* ===== 固定列宽 (1-12) ===== */
.loopes-col-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
.loopes-col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.loopes-col-3  { flex: 0 0 25%; max-width: 25%; }
.loopes-col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.loopes-col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.loopes-col-6  { flex: 0 0 50%; max-width: 50%; }
.loopes-col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.loopes-col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.loopes-col-9  { flex: 0 0 75%; max-width: 75%; }
.loopes-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.loopes-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.loopes-col-12 { flex: 0 0 100%; max-width: 100%; }

/* ===== 响应式列 ===== */
@media (min-width: 576px) {
    .loopes-col-sm { flex: 1 0 0%; }
    .loopes-col-sm-auto { flex: 0 0 auto; width: auto; }
    .loopes-col-sm-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .loopes-col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .loopes-col-sm-3  { flex: 0 0 25%; max-width: 25%; }
    .loopes-col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .loopes-col-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .loopes-col-sm-6  { flex: 0 0 50%; max-width: 50%; }
    .loopes-col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .loopes-col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .loopes-col-sm-9  { flex: 0 0 75%; max-width: 75%; }
    .loopes-col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .loopes-col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .loopes-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
    .loopes-col-md { flex: 1 0 0%; }
    .loopes-col-md-auto { flex: 0 0 auto; width: auto; }
    .loopes-col-md-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .loopes-col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .loopes-col-md-3  { flex: 0 0 25%; max-width: 25%; }
    .loopes-col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .loopes-col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .loopes-col-md-6  { flex: 0 0 50%; max-width: 50%; }
    .loopes-col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .loopes-col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .loopes-col-md-9  { flex: 0 0 75%; max-width: 75%; }
    .loopes-col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .loopes-col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .loopes-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
    .loopes-col-lg { flex: 1 0 0%; }
    .loopes-col-lg-auto { flex: 0 0 auto; width: auto; }
    .loopes-col-lg-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .loopes-col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .loopes-col-lg-3  { flex: 0 0 25%; max-width: 25%; }
    .loopes-col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .loopes-col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .loopes-col-lg-6  { flex: 0 0 50%; max-width: 50%; }
    .loopes-col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .loopes-col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .loopes-col-lg-9  { flex: 0 0 75%; max-width: 75%; }
    .loopes-col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .loopes-col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .loopes-col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1200px) {
    .loopes-col-xl { flex: 1 0 0%; }
    .loopes-col-xl-auto { flex: 0 0 auto; width: auto; }
    .loopes-col-xl-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .loopes-col-xl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .loopes-col-xl-3  { flex: 0 0 25%; max-width: 25%; }
    .loopes-col-xl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .loopes-col-xl-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .loopes-col-xl-6  { flex: 0 0 50%; max-width: 50%; }
    .loopes-col-xl-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .loopes-col-xl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .loopes-col-xl-9  { flex: 0 0 75%; max-width: 75%; }
    .loopes-col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .loopes-col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .loopes-col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ===== Row 对齐工具 ===== */
.loopes-row--top { align-items: flex-start; }
.loopes-row--middle { align-items: center; }
.loopes-row--bottom { align-items: flex-end; }
.loopes-row--stretch { align-items: stretch; }

.loopes-row--start { justify-content: flex-start; }
.loopes-row--center { justify-content: center; }
.loopes-row--end { justify-content: flex-end; }
.loopes-row--around { justify-content: space-around; }
.loopes-row--between { justify-content: space-between; }

/* ===== Col 偏移 ===== */
.loopes-offset-1  { margin-left: 8.333333%; }
.loopes-offset-2  { margin-left: 16.666667%; }
.loopes-offset-3  { margin-left: 25%; }
.loopes-offset-4  { margin-left: 33.333333%; }
.loopes-offset-5  { margin-left: 41.666667%; }
.loopes-offset-6  { margin-left: 50%; }
.loopes-offset-7  { margin-left: 58.333333%; }
.loopes-offset-8  { margin-left: 66.666667%; }
.loopes-offset-9  { margin-left: 75%; }
.loopes-offset-10 { margin-left: 83.333333%; }
.loopes-offset-11 { margin-left: 91.666667%; }

/* ===== 原有 loopes-grid--* 快捷模式（保留兼容） ===== */
.loopes-grid {
    display: grid;
    gap: var(--loopes-grid-gap);
}

.loopes-grid--2 { grid-template-columns: repeat(2, 1fr); }
.loopes-grid--3 { grid-template-columns: repeat(3, 1fr); }
.loopes-grid--4 { grid-template-columns: repeat(4, 1fr); }
.loopes-grid--5 { grid-template-columns: repeat(5, 1fr); }
.loopes-grid--6 { grid-template-columns: repeat(6, 1fr); }

.loopes-grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.loopes-grid--auto-sm {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.loopes-grid--auto-lg {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.loopes-grid--narrow { gap: 16px; }
.loopes-grid--wide { gap: 40px; }

.loopes-grid__item { min-width: 0; }

.loopes-grid--center { justify-items: center; }
.loopes-grid--top { align-items: start; }
.loopes-grid--middle { align-items: center; }
.loopes-grid--bottom { align-items: end; }

@media (max-width: 768px) {
    .loopes-grid--2,
    .loopes-grid--3,
    .loopes-grid--4,
    .loopes-grid--5,
    .loopes-grid--6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .loopes-grid--2,
    .loopes-grid--3,
    .loopes-grid--4,
    .loopes-grid--5,
    .loopes-grid--6 {
        grid-template-columns: 1fr;
    }
}

/* ===== 通用区块容器（来自主题项目） ===== */
.loopes-section-block {
    position: relative;
    padding: 80px 0;
}

@media (max-width: 768px) {
    .loopes-section-block {
        padding: 50px 0;
    }
}

/* ===== 响应式可见性（覆盖 utilities 中的 display 控制） ===== */
.loopes-hidden-sm { display: none; }
@media (min-width: 576px) {
    .loopes-hidden-sm { display: revert; }
    .loopes-visible-sm { display: none !important; }
}
@media (min-width: 768px) {
    .loopes-hidden-md { display: none; }
    .loopes-visible-md { display: none !important; }
}
@media (min-width: 992px) {
    .loopes-hidden-lg { display: none; }
    .loopes-visible-lg { display: none !important; }
}


/* pagination */
/* ====== Pagination 分页 ====== */

.loopes-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--loopes-text);
    flex-wrap: wrap;
}

.loopes-pagination--center {
    justify-content: center;
}

.loopes-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--loopes-text);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    user-select: none;
}

.loopes-pagination__item:hover {
    background: var(--loopes-primary-light);
    color: var(--loopes-primary);
    text-decoration: none;
}

.loopes-pagination__item--active {
    background: var(--loopes-primary);
    color: #fff;
    font-weight: 600;
}

.loopes-pagination__item--active:hover {
    background: var(--loopes-primary-hover);
    color: #fff;
}

.loopes-pagination__item--prev,
.loopes-pagination__item--next {
    font-size: 14px;
}

.loopes-pagination__item--disabled {
    color: var(--loopes-text-light);
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
}

.loopes-pagination__item--disabled:hover {
    background: transparent;
    color: var(--loopes-text-light);
}

.loopes-pagination__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    color: var(--loopes-text-light);
    font-size: 14px;
    letter-spacing: 2px;
}

.loopes-pagination__total {
    font-size: 13px;
    color: var(--loopes-text-light);
    margin-right: 8px;
    white-space: nowrap;
}

.loopes-pagination__sizes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    font-size: 13px;
    color: var(--loopes-text-light);
}

.loopes-pagination__sizes select {
    padding: 2px 6px;
    border: 1px solid var(--loopes-border);
    border-radius: 4px;
    font-size: 13px;
    background: var(--loopes-bg);
    color: var(--loopes-text);
    outline: none;
    cursor: pointer;
}

.loopes-pagination__sizes select:focus {
    border-color: var(--loopes-primary);
}

.loopes-pagination__jumper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    font-size: 13px;
    color: var(--loopes-text-light);
}

.loopes-pagination__jumper input {
    width: 44px;
    padding: 4px 6px;
    border: 1px solid var(--loopes-border);
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
    background: var(--loopes-bg);
    color: var(--loopes-text);
    outline: none;
}

.loopes-pagination__jumper input:focus {
    border-color: var(--loopes-primary);
}

.loopes-pagination--background .loopes-pagination__item {
    min-width: 34px;
    height: 34px;
    background: var(--loopes-bg-secondary);
    border: 1px solid var(--loopes-border);
}

.loopes-pagination--background .loopes-pagination__item:hover {
    background: var(--loopes-primary-light);
    border-color: var(--loopes-primary-light);
    color: var(--loopes-primary);
}

.loopes-pagination--background .loopes-pagination__item--active {
    background: var(--loopes-primary);
    border-color: var(--loopes-primary);
    color: #fff;
}

.loopes-pagination--background .loopes-pagination__item--active:hover {
    background: var(--loopes-primary-hover);
    border-color: var(--loopes-primary-hover);
}

.loopes-pagination--small .loopes-pagination__item {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
    border-radius: 4px;
}

.loopes-pagination--small .loopes-pagination__dots {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
}

.loopes-pagination--small .loopes-pagination__total {
    font-size: 12px;
}

.loopes-pagination--small .loopes-pagination__sizes {
    font-size: 12px;
}

.loopes-pagination--small .loopes-pagination__jumper {
    font-size: 12px;
}

.loopes-pagination--small .loopes-pagination__jumper input {
    width: 38px;
    padding: 2px 4px;
    font-size: 12px;
}

@media (max-width: 576px) {
    .loopes-pagination {
        justify-content: center;
        gap: 3px;
    }

    .loopes-pagination__item {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .loopes-pagination__total,
    .loopes-pagination__sizes,
    .loopes-pagination__jumper {
        display: none;
    }
}


/* breadcrumb */
.loopes-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    list-style: none;
    margin: 0;
    font-size: 13px;
}

.loopes-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    color: var(--loopes-text-light, #64748B);
    font-weight: 500;
    line-height: 1.4;
}

.loopes-breadcrumb__item a {
    color: var(--loopes-text-secondary, #475569);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.loopes-breadcrumb__item a:hover {
    color: var(--loopes-primary, #1A73E8);
    text-decoration: none;
}

.loopes-breadcrumb__sep {
    display: inline-flex;
    align-items: center;
    color: var(--loopes-text-light, #64748B);
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    margin: 0 2px;
}

.loopes-breadcrumb__sep::before {
    content: '>';
}

.loopes-breadcrumb__item--current {
    color: var(--loopes-primary, #1A73E8);
    font-weight: 600;
}


/* list-group */
.loopes-list-group {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--loopes-border);
    border-radius: var(--loopes-radius-lg);
    overflow: hidden;
}

.loopes-list-group__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    font-size: 14px;
    color: var(--loopes-text);
    background: var(--loopes-bg);
    border-bottom: 1px solid var(--loopes-border-light);
    transition: background 0.2s ease;
    text-decoration: none;
}

.loopes-list-group__item:last-child {
    border-bottom: none;
}

.loopes-list-group__item:hover {
    background: var(--loopes-bg-secondary);
    text-decoration: none;
}

.loopes-list-group__item--active {
    background: var(--loopes-primary-light);
    color: var(--loopes-primary);
    font-weight: 600;
    border-left: 3px solid var(--loopes-primary);
}

.loopes-list-group__item--link {
    cursor: pointer;
}

.loopes-list-group__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--loopes-text-muted);
}

.loopes-list-group__item:hover .loopes-list-group__icon {
    color: var(--loopes-primary);
}

.loopes-list-group__badge {
    margin-left: auto;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    background: var(--loopes-bg-tertiary);
    color: var(--loopes-text-secondary);
}


/* table */
.loopes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--loopes-text);
}

.loopes-table thead {
    background: var(--loopes-bg-tertiary);
}

.loopes-table th {
    padding: 14px 18px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--loopes-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--loopes-border);
}

.loopes-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--loopes-border-light);
    line-height: 1.5;
}

.loopes-table tbody tr {
    transition: background 0.2s ease;
}

.loopes-table tbody tr:hover {
    background: var(--loopes-bg-secondary);
}

.loopes-table--striped tbody tr:nth-child(even) {
    background: var(--loopes-bg-secondary);
}

.loopes-table--bordered th,
.loopes-table--bordered td {
    border: 1px solid var(--loopes-border);
}

.loopes-table--compact th,
.loopes-table--compact td {
    padding: 10px 14px;
}

.loopes-table--responsive {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* tags */
/* ====== 通用标签 (Tag) ====== */
.loopes-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--loopes-font);
    line-height: 1.5;
    color: var(--loopes-text-secondary);
    background: var(--loopes-bg-secondary);
    border: 1px solid var(--loopes-border);
    border-radius: var(--loopes-radius-sm);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.loopes-tag--primary {
    color: var(--loopes-primary);
    background: var(--loopes-primary-light);
    border-color: transparent;
}

.loopes-tag--success {
    color: var(--loopes-success-text);
    background: var(--loopes-success-light);
    border-color: transparent;
}

.loopes-tag--warning {
    color: var(--loopes-warning-text);
    background: var(--loopes-warning-light);
    border-color: transparent;
}

.loopes-tag--error {
    color: var(--loopes-error-text);
    background: var(--loopes-error-light);
    border-color: transparent;
}

.loopes-tag--info {
    color: #1e3a5f;
    background: #dbeafe;
    border-color: transparent;
}

.loopes-tag--outline {
    background: transparent;
    border-color: var(--loopes-border);
    color: var(--loopes-text);
}

.loopes-tag--outline.loopes-tag--primary {
    border-color: var(--loopes-primary);
    color: var(--loopes-primary);
}

.loopes-tag--outline.loopes-tag--success {
    border-color: var(--loopes-success);
    color: var(--loopes-success);
}

.loopes-tag--outline.loopes-tag--warning {
    border-color: var(--loopes-warning);
    color: var(--loopes-warning);
}

.loopes-tag--outline.loopes-tag--error {
    border-color: var(--loopes-error);
    color: var(--loopes-error);
}

.loopes-tag--outline.loopes-tag--info {
    border-color: #93c5fd;
    color: #1e40af;
}

/* ===== 可关闭标签 ===== */
.loopes-tag__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: background 0.2s ease;
}

.loopes-tag__close:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* ===== 标签尺寸 ===== */
.loopes-tag--sm {
    padding: 2px 8px;
    font-size: 11px;
}

.loopes-tag--lg {
    padding: 6px 16px;
    font-size: 13px;
}

/* ====== 文章标签云（向后兼容） ====== */
.loopes-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--loopes-border);
}

.loopes-tags__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--loopes-text-light);
    margin-right: 4px;
}

.loopes-tags__link {
    display: inline-block;
    padding: 4px 14px;
    font-size: 13px;
    color: var(--loopes-text-light);
    background: var(--loopes-bg-secondary);
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.loopes-tags__link:hover {
    background: var(--loopes-primary);
    color: #fff;
    text-decoration: none;
}


/* divider */
/* ====== 分割线 ====== */
.loopes-divider {
    display: flex;
    align-items: center;
    margin: var(--loopes-space-lg) 0;
    color: var(--loopes-text-muted);
    font-size: 12px;
    font-family: var(--loopes-font);
    gap: 16px;
    white-space: nowrap;
}

.loopes-divider::before,
.loopes-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--loopes-border);
}

.loopes-divider:not(:empty)::before {
    flex: 0 0 0;
    min-width: 24px;
}

.loopes-divider:not(:empty)::after {
    flex: 1;
}

.loopes-divider--dashed::before,
.loopes-divider--dashed::after {
    height: 0;
    border-top: 1px dashed var(--loopes-border);
    background: none;
}

.loopes-divider--dotted::before,
.loopes-divider--dotted::after {
    height: 0;
    border-top: 1px dotted var(--loopes-border);
    background: none;
}

.loopes-divider--primary {
    color: var(--loopes-primary);
}

.loopes-divider--primary::before,
.loopes-divider--primary::after {
    background: var(--loopes-primary);
}

.loopes-divider--spacing-sm {
    margin: var(--loopes-space-sm) 0;
}

.loopes-divider--spacing-lg {
    margin: var(--loopes-space-2xl) 0;
}


/* drawer */
/* ====== 侧边抽屉 ====== */
.loopes-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: calc(var(--loopes-z-modal) - 1);
}

.loopes-drawer-overlay--visible {
    opacity: 1;
    visibility: visible;
}

.loopes-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 90vw;
    height: 100vh;
    background: var(--loopes-bg);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: var(--loopes-z-modal);
}

.loopes-drawer--visible {
    transform: translateX(0);
}

.loopes-drawer--left {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.1);
}

.loopes-drawer--left.loopes-drawer--visible {
    transform: translateX(0);
}

.loopes-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--loopes-border);
    flex-shrink: 0;
}

.loopes-drawer__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--loopes-text);
    margin: 0;
    line-height: 1.4;
}

.loopes-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--loopes-bg-secondary);
    border-radius: 8px;
    cursor: pointer;
    color: var(--loopes-text-muted);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.loopes-drawer__close:hover {
    background: var(--loopes-bg-tertiary);
    color: var(--loopes-text);
}

.loopes-drawer__body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    font-size: 14px;
    color: var(--loopes-text-secondary);
    line-height: 1.7;
}

.loopes-drawer__footer {
    padding: 16px 24px;
    border-top: 1px solid var(--loopes-border);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-shrink: 0;
}


/* popover */
/* ====== 弹出卡片 ====== */
.loopes-popover {
    position: relative;
    display: inline-flex;
}

.loopes-popover__panel {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    padding: 16px;
    min-width: 200px;
    background: var(--loopes-bg);
    border: 1px solid var(--loopes-border);
    border-radius: var(--loopes-radius);
    box-shadow: var(--loopes-shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 1000;
}

.loopes-popover--visible .loopes-popover__panel,
.loopes-popover:hover .loopes-popover__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

.loopes-popover__panel::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--loopes-bg);
}

.loopes-popover__panel::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--loopes-border);
}

/* 方向变体 */
.loopes-popover--bottom .loopes-popover__panel {
    top: calc(100% + 10px);
    bottom: auto;
}

.loopes-popover--bottom .loopes-popover__panel::after,
.loopes-popover--bottom .loopes-popover__panel::before {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--loopes-bg);
}

.loopes-popover--bottom .loopes-popover__panel::before {
    border-bottom-color: var(--loopes-border);
}

.loopes-popover--left .loopes-popover__panel {
    top: 50%;
    right: calc(100% + 10px);
    bottom: auto;
    left: auto;
    transform: translateY(-50%) scale(0.95);
}

.loopes-popover--left.loopes-popover--visible .loopes-popover__panel,
.loopes-popover--left:hover .loopes-popover__panel {
    transform: translateY(-50%) scale(1);
}

.loopes-popover--left .loopes-popover__panel::after,
.loopes-popover--left .loopes-popover__panel::before {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-top-color: transparent;
    border-left-color: var(--loopes-bg);
}

.loopes-popover--left .loopes-popover__panel::before {
    border-left-color: var(--loopes-border);
}

.loopes-popover--right .loopes-popover__panel {
    top: 50%;
    left: calc(100% + 10px);
    bottom: auto;
    transform: translateY(-50%) scale(0.95);
}

.loopes-popover--right.loopes-popover--visible .loopes-popover__panel,
.loopes-popover--right:hover .loopes-popover__panel {
    transform: translateY(-50%) scale(1);
}

.loopes-popover--right .loopes-popover__panel::after,
.loopes-popover--right .loopes-popover__panel::before {
    top: 50%;
    left: auto;
    right: 100%;
    transform: translateY(-50%);
    border-top-color: transparent;
    border-right-color: var(--loopes-bg);
}

.loopes-popover--right .loopes-popover__panel::before {
    border-right-color: var(--loopes-border);
}

.loopes-popover__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--loopes-text);
    margin: 0 0 8px;
}

.loopes-popover__content {
    font-size: var(--loopes-font-size);
    color: var(--loopes-text-secondary);
    line-height: 1.6;
    margin: 0;
}


/* notification */
/* ====== 通知消息（堆叠式） ====== */
.loopes-notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: calc(var(--loopes-z-toast) + 1);
    pointer-events: none;
    max-width: 380px;
}

.loopes-notification {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: var(--loopes-bg);
    border: 1px solid var(--loopes-border);
    border-radius: var(--loopes-radius);
    box-shadow: var(--loopes-shadow-lg);
    pointer-events: auto;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.loopes-notification--enter {
    transform: translateX(0);
    opacity: 1;
}

.loopes-notification--leave {
    transform: translateX(120%);
    opacity: 0;
}

.loopes-notification__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 14px;
    margin-top: 1px;
}

.loopes-notification--success .loopes-notification__icon {
    background: var(--loopes-success-light);
    color: var(--loopes-success);
}

.loopes-notification--error .loopes-notification__icon {
    background: var(--loopes-error-light);
    color: var(--loopes-error);
}

.loopes-notification--warning .loopes-notification__icon {
    background: var(--loopes-warning-light);
    color: var(--loopes-warning);
}

.loopes-notification--info .loopes-notification__icon {
    background: var(--loopes-info-light);
    color: var(--loopes-info);
}

.loopes-notification__body {
    flex: 1;
    min-width: 0;
}

.loopes-notification__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--loopes-text);
    margin: 0 0 2px;
}

.loopes-notification__text {
    font-size: 13px;
    color: var(--loopes-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.loopes-notification__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--loopes-text-muted);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.loopes-notification__close:hover {
    background: var(--loopes-bg-secondary);
    color: var(--loopes-text);
}

@media (max-width: 480px) {
    .loopes-notification-container {
        left: 12px;
        right: 12px;
        top: 12px;
        max-width: none;
    }
}


/* navbar */
/* =========================================
   LoopesUI — Navbar 导航栏（主题通用版）
   ========================================= */

:root {
    --navbar-height: 76px;
    --navbar-bg: rgba(255,255,255,0.92);
    --navbar-border: rgba(0,0,0,0.06);
    --navbar-shadow: 0 1px 3px rgba(0,0,0,0.04);
    --navbar-scrolled-bg: rgba(255,255,255,0.97);
    --navbar-scrolled-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

.loopes-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--navbar-height);
    background: var(--navbar-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--navbar-border);
    box-shadow: var(--navbar-shadow);
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.loopes-navbar.is-scrolled {
    background: var(--navbar-scrolled-bg);
    box-shadow: var(--navbar-scrolled-shadow);
    border-bottom-color: transparent;
    backdrop-filter: blur(24px);
}

.loopes-navbar__inner {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    gap: 24px;
}

.loopes-navbar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.loopes-navbar__logo-wrap {
    display: flex;
    align-items: center;
    height: 40px;
}

.loopes-navbar__logo {
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.loopes-navbar__logo--light {
    display: none;
}

.loopes-navbar.is-banner .loopes-navbar__logo--dark {
    display: none;
}
.loopes-navbar.is-banner .loopes-navbar__logo--light {
    display: block;
}
.loopes-navbar.is-banner.is-scrolled .loopes-navbar__logo--light {
    display: none;
}
.loopes-navbar.is-banner.is-scrolled .loopes-navbar__logo--dark {
    display: block;
}

.loopes-navbar__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.loopes-navbar__brand-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--loopes-text-dark);
    letter-spacing: -0.3px;
}

.loopes-navbar__brand-tagline {
    font-size: 11px;
    color: var(--loopes-text-light);
    letter-spacing: 0.5px;
}

.loopes-navbar__collapse {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: flex-end;
}

.loopes-navbar__menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.loopes-navbar__menu > li {
    position: relative;
}

.loopes-navbar__menu > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--loopes-text);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.25s ease;
    position: relative;
    white-space: nowrap;
}

.loopes-navbar__menu > li > a:hover,
.loopes-navbar__menu > li > a:focus {
    color: var(--loopes-primary);
}

.loopes-navbar__menu > li.current-menu-item > a,
.loopes-navbar__menu > li.current_page_item > a,
.loopes-navbar__menu > li.current-menu-ancestor > a {
    color: var(--loopes-primary);
}

.loopes-navbar__menu li.menu-item-has-children {
    position: relative;
}

.loopes-navbar__menu .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--loopes-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    padding: 6px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 100;
}

.loopes-navbar__menu > li.menu-item-has-children:hover > .sub-menu,
.loopes-navbar__menu > li.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.loopes-navbar__menu > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 4px;
    transition: transform 0.25s ease;
}

.loopes-navbar__menu > li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

.loopes-navbar__menu .sub-menu .sub-menu {
    top: -7px;
    left: calc(100% + 6px);
}

.loopes-navbar__menu .sub-menu li {
    position: relative;
}

.loopes-navbar__menu .sub-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--loopes-text);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.loopes-navbar__menu .sub-menu a:hover {
    color: var(--loopes-primary);
    background: var(--loopes-primary-light);
}

.loopes-navbar__menu .sub-menu li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid currentColor;
    margin-left: auto;
    margin-right: 4px;
    transition: transform 0.25s ease;
}

.loopes-navbar__menu .sub-menu li:not(:last-child) {
    border-bottom: 1px solid var(--loopes-border-light);
}

.loopes-navbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.loopes-navbar__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: var(--loopes-text);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.loopes-navbar__search-btn:hover {
    background: var(--loopes-primary-light);
    color: var(--loopes-primary);
}

.loopes-navbar__theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: var(--loopes-text);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.loopes-navbar__theme-btn:hover {
    background: var(--loopes-primary-light);
    color: var(--loopes-primary);
}

.loopes-navbar__theme-icon--sun {
    display: none;
}
.loopes-navbar__theme-icon--moon {
    display: block;
}
[data-theme="dark"] .loopes-navbar__theme-icon--sun {
    display: block;
}
[data-theme="dark"] .loopes-navbar__theme-icon--moon {
    display: none;
}

.loopes-navbar__cta {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--loopes-primary);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.loopes-navbar__cta:hover {
    background: var(--loopes-primary-active);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--loopes-shadow-color);
}

.loopes-navbar__cta--register {
    background: transparent;
    color: var(--loopes-primary);
    border: 1.5px solid var(--loopes-primary);
}

.loopes-navbar__cta--register:hover {
    background: var(--loopes-primary);
    color: #fff;
    box-shadow: 0 4px 12px var(--loopes-shadow-color);
}

.loopes-navbar__user {
    position: relative;
    display: flex;
    align-items: center;
}

.loopes-navbar__user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 22px;
    text-decoration: none;
    color: var(--loopes-text);
    transition: all 0.25s ease;
    cursor: pointer;
}

.loopes-navbar__user-btn:hover {
    background: var(--loopes-primary-light);
    color: var(--loopes-primary);
}

.loopes-navbar__avatar {
    border-radius: 50%;
    width: 28px;
    height: 28px;
    object-fit: cover;
    flex-shrink: 0;
}

.loopes-navbar__user-name {
    font-size: 13px;
    font-weight: 500;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loopes-navbar__user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 150px;
    background: var(--loopes-bg-elevated);
    border: 1px solid var(--loopes-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 100;
}

.loopes-navbar__user:hover .loopes-navbar__user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.loopes-navbar__user-dropdown a {
    display: block;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--loopes-text);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.loopes-navbar__user-dropdown a:hover {
    color: var(--loopes-primary);
    background: var(--loopes-primary-light);
}

.loopes-navbar__user-dropdown a:not(:last-child) {
    border-bottom: 1px solid var(--loopes-border-light);
}

.loopes-navbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1100;
}

.loopes-navbar__toggle span {
    display: block;
    width: 22px;
    height: 2.5px;
    background: var(--loopes-text-dark);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.loopes-navbar__toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.loopes-navbar__toggle.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.loopes-navbar__toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

@media (min-width: 993px) {
    .loopes-navbar__toggle {
        display: none;
    }
}

@media (max-width: 992px) {
    .loopes-navbar__toggle {
        display: flex;
        margin-left: auto;
        flex-shrink: 0;
    }

    .navbar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        display: none;
        z-index: 999;
        opacity: 0;
        transition: opacity 0.35s ease;
    }

    .navbar-overlay.is-visible {
        display: block;
        opacity: 1;
    }

    .loopes-navbar__collapse {
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        background: #fff;
        box-shadow: -4px 0 20px rgba(0,0,0,0.08);
        padding: calc(var(--navbar-height) + 10px) 0 24px;
        overflow-y: auto;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1001;
        transform: translateX(100%);
    }

    .loopes-navbar__collapse.is-open {
        transform: translateX(0);
    }

    .loopes-navbar__menu {
        flex-direction: column;
        gap: 2px;
        width: 100%;
        padding: 0 12px;
    }

    .loopes-navbar__menu > li {
        width: 100%;
    }

    .loopes-navbar__menu > li > a {
        padding: 13px 16px;
        font-size: 15px;
        font-weight: 500;
        border-radius: 10px;
        transition: all 0.2s ease;
    }

    .loopes-navbar__menu > li > a:hover,
    .loopes-navbar__menu > li > a:focus {
        background: var(--loopes-primary-light);
    }

    .loopes-navbar__menu > li.current-menu-item > a,
    .loopes-navbar__menu > li.current_page_item > a,
    .loopes-navbar__menu > li.current-menu-ancestor > a {
        background: var(--loopes-primary-light);
        color: var(--loopes-primary);
        font-weight: 600;
    }

    .loopes-navbar__menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: var(--loopes-bg);
        border-radius: 10px;
        margin: 2px 0 2px 12px;
        padding: 4px;
        display: none;
        transition: none;
    }

    .loopes-navbar__menu .sub-menu.is-open {
        display: block;
    }

    .loopes-navbar__menu .sub-menu .sub-menu {
        margin-left: 16px;
    }

    .loopes-navbar__menu .sub-menu a {
        padding: 12px 14px;
        font-size: 14px;
    }

    .loopes-navbar__menu > li.menu-item-has-children > a::after,
    .loopes-navbar__menu .sub-menu li.menu-item-has-children > a::after {
        display: none;
    }

    .loopes-navbar__menu .menu-item-has-children > .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: transparent;
        cursor: pointer;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 8px;
        color: var(--loopes-text-light);
        transition: background 0.2s;
    }

    .loopes-navbar__menu .menu-item-has-children > .dropdown-toggle:hover {
        background: var(--loopes-primary-light);
        color: var(--loopes-primary);
    }

    .loopes-navbar__menu .menu-item-has-children > .dropdown-toggle.is-active {
        top: 50%;
        transform: translateY(-50%) rotate(180deg);
    }

    .loopes-navbar__actions {
        flex-direction: row;
        justify-content: center;
        padding: 16px 12px;
        margin: 8px 12px 0;
        border-top: 1px solid var(--loopes-border);
        gap: 12px;
    }

    .loopes-navbar__cta {
        flex: 1;
        justify-content: center;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .loopes-navbar__inner {
        padding: 0 16px;
    }

    .loopes-navbar__brand-text {
        display: none;
    }

    .loopes-navbar__collapse {
        width: 100%;
        transform: translateX(100%);
    }
}

.loopes-search-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    visibility: hidden;
}

.loopes-search-modal.is-active {
    visibility: visible;
}

.loopes-search-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.loopes-search-modal.is-active .loopes-search-modal__backdrop {
    opacity: 1;
}

.loopes-search-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: var(--loopes-bg-elevated);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
    padding: 36px 36px 28px;
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.loopes-search-modal.is-active .loopes-search-modal__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.loopes-search-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--loopes-bg-secondary);
    border-radius: 10px;
    color: var(--loopes-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.loopes-search-modal__close:hover {
    background: var(--loopes-bg);
    color: var(--loopes-text);
}

.loopes-search-modal__header {
    text-align: center;
    margin-bottom: 28px;
}

.loopes-search-modal__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--loopes-text);
    margin: 0 0 8px;
}

.loopes-search-modal__subtitle {
    font-size: 14px;
    color: var(--loopes-text-muted);
    margin: 0;
}

.loopes-search-modal__form {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.loopes-search-modal__input-group {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.loopes-search-modal__input-icon {
    position: absolute;
    left: 16px;
    color: var(--loopes-text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.loopes-search-modal__input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 48px;
    border: 2px solid var(--loopes-border);
    border-radius: 12px;
    font-size: 16px;
    font-family: inherit;
    color: var(--loopes-text);
    background: var(--loopes-bg);
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.loopes-search-modal__input:focus {
    border-color: var(--loopes-primary);
}

.loopes-search-modal__input::placeholder {
    color: var(--loopes-text-muted);
}

.loopes-search-modal__submit {
    height: 52px;
    padding: 0 28px;
    border: none;
    background: var(--loopes-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.loopes-search-modal__submit:hover {
    background: var(--loopes-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--loopes-shadow-color);
}

.loopes-search-modal__footer {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--loopes-text-muted);
}

.loopes-search-modal__footer kbd {
    display: inline-block;
    padding: 2px 7px;
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
    color: var(--loopes-text-secondary);
    background: var(--loopes-bg-secondary);
    border: 1px solid var(--loopes-border);
    border-radius: 5px;
    box-shadow: 0 1px 0 var(--loopes-border);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .loopes-search-modal {
        padding-top: 10vh;
        padding-left: 16px;
        padding-right: 16px;
    }

    .loopes-search-modal__dialog {
        padding: 28px 20px 24px;
    }

    .loopes-search-modal__form {
        flex-direction: column;
    }

    .loopes-search-modal__submit {
        width: 100%;
    }

    .loopes-search-modal__footer {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}


/* section-block */
/* ========================================
 * LoopesUI Section Block 区块容器
 *
 * 通用页面区块容器，提供垂直间距和布局结构。
 *
 * 修饰符：
 *   --sm:  小间距（约 40px）
 *   --md:  中间距（约 60px，默认）
 *   --lg:  大间距（约 100px）
 *   --xl:  超大间距（约 140px）
 *
 * 配色修饰符：
 *   --alt:  交替背景色（配合 --loopes-bg-secondary）
 * ======================================== */

.loopes-section-block {
    position: relative;
    padding: 60px 0;
}

.loopes-section-block--sm {
    padding: 40px 0;
}

.loopes-section-block--md {
    padding: 60px 0;
}

.loopes-section-block--lg {
    padding: 100px 0;
}

.loopes-section-block--xl {
    padding: 140px 0;
}

.loopes-section-block--alt {
    background: var(--loopes-bg-secondary);
}

.loopes-section-block__inner {
    width: 100%;
    max-width: var(--loopes-container-max, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--loopes-space);
    padding-right: var(--loopes-space);
    box-sizing: border-box;
}

.loopes-section-block__header {
    margin-bottom: 40px;
    text-align: center;
}

.loopes-section-block__title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--loopes-text);
}

.loopes-section-block__subtitle {
    font-size: 16px;
    color: var(--loopes-text-secondary);
    margin: 0;
    line-height: 1.6;
}

.loopes-section-block__title--left {
    text-align: left;
}

@media (max-width: 768px) {
    .loopes-section-block {
        padding: 40px 0;
    }

    .loopes-section-block--sm {
        padding: 28px 0;
    }

    .loopes-section-block--md {
        padding: 40px 0;
    }

    .loopes-section-block--lg {
        padding: 60px 0;
    }

    .loopes-section-block--xl {
        padding: 80px 0;
    }

    .loopes-section-block__header {
        margin-bottom: 28px;
    }

    .loopes-section-block__title {
        font-size: 22px;
    }
}


/* prose */
/* ========================================
 * LoopesUI Prose 富文本内容
 *
 * 为文章/文档等富文本内容区域提供排版样式。
 * 用法：在内容容器上添加 .loopes-prose 类。
 *
 * 基于 WordPress 主题的 .loopes-article__body 提取。
 * ======================================== */

.loopes-prose {
    font-size: 16px;
    line-height: 1.85;
    color: var(--loopes-text);
    word-wrap: break-word;
}

.loopes-prose h1,
.loopes-prose h2,
.loopes-prose h3,
.loopes-prose h4,
.loopes-prose h5,
.loopes-prose h6 {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-weight: 700;
    line-height: 1.35;
    color: var(--loopes-text);
}

.loopes-prose h1 { font-size: 2em; }
.loopes-prose h2 { font-size: 1.5em; }
.loopes-prose h3 { font-size: 1.25em; }
.loopes-prose h4 { font-size: 1.1em; }

.loopes-prose p {
    margin: 0 0 1.2em;
}

.loopes-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--loopes-radius);
}

.loopes-prose a {
    color: var(--loopes-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.loopes-prose a:hover {
    opacity: 0.85;
}

.loopes-prose ul,
.loopes-prose ol {
    padding-left: 1.5em;
    margin-bottom: 1.2em;
}

.loopes-prose li {
    margin-bottom: 0.4em;
}

.loopes-prose blockquote {
    margin: 1.5em 0;
    padding: 16px 20px;
    border-left: 4px solid var(--loopes-primary);
    background: var(--loopes-bg-secondary);
    border-radius: 0 var(--loopes-radius) var(--loopes-radius) 0;
    font-style: italic;
    color: var(--loopes-text-secondary);
}

.loopes-prose blockquote p:last-child {
    margin-bottom: 0;
}

.loopes-prose pre {
    margin: 1.5em 0;
    padding: 16px 20px;
    background: #1e293b;
    border-radius: var(--loopes-radius);
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.6;
}

.loopes-prose code {
    font-size: 0.9em;
    padding: 2px 6px;
    background: var(--loopes-bg-secondary);
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.loopes-prose pre code {
    background: transparent;
    padding: 0;
    color: #e2e8f0;
    font-size: inherit;
}

.loopes-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.loopes-prose th,
.loopes-prose td {
    padding: 10px 14px;
    border: 1px solid var(--loopes-border);
    text-align: left;
}

.loopes-prose th {
    background: var(--loopes-bg-secondary);
    font-weight: 600;
}

.loopes-prose hr {
    margin: 2em 0;
    border: none;
    border-top: 1px solid var(--loopes-border);
}

/* ===== 小号排版 ===== */
.loopes-prose--sm {
    font-size: 14px;
    line-height: 1.75;
}

.loopes-prose--sm h1 { font-size: 1.6em; }
.loopes-prose--sm h2 { font-size: 1.3em; }
.loopes-prose--sm h3 { font-size: 1.1em; }

/* ===== 大号排版 ===== */
.loopes-prose--lg {
    font-size: 17px;
    line-height: 1.9;
}

.loopes-prose--lg h1 { font-size: 2.2em; }
.loopes-prose--lg h2 { font-size: 1.7em; }
.loopes-prose--lg h3 { font-size: 1.4em; }


/* steps */
/* ====== Steps 步骤条 ====== */
.loopes-steps {
    display: flex;
    gap: 0;
    width: 100%;
}

.loopes-steps--vertical {
    flex-direction: column;
}

.loopes-steps__item {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-start;
}

.loopes-steps--vertical .loopes-steps__item {
    flex: none;
}

.loopes-steps__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.loopes-steps__circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    background: var(--loopes-bg-secondary);
    color: var(--loopes-text-light);
    border: 2px solid var(--loopes-border);
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.loopes-steps__icon {
    width: 16px;
    height: 16px;
}

.loopes-steps__line {
    flex: 1;
    height: 2px;
    background: var(--loopes-border);
    align-self: center;
    transition: background 0.3s ease;
}

.loopes-steps--vertical .loopes-steps__line {
    width: 2px;
    height: 40px;
    flex: none;
    margin-left: 15px;
}

.loopes-steps__content {
    padding: 4px 0 0 12px;
    min-width: 0;
}

.loopes-steps--vertical .loopes-steps__content {
    padding: 2px 0 24px 12px;
}

.loopes-steps__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--loopes-text);
    margin-bottom: 2px;
    transition: color 0.3s ease;
}

.loopes-steps__desc {
    font-size: 13px;
    color: var(--loopes-text-light);
    line-height: 1.5;
}

/* 完成状态 */
.loopes-steps__item--completed .loopes-steps__circle {
    background: var(--loopes-primary);
    color: #fff;
    border-color: var(--loopes-primary);
}

.loopes-steps__item--completed .loopes-steps__line {
    background: var(--loopes-primary);
}

.loopes-steps__item--completed .loopes-steps__title {
    color: var(--loopes-text);
}

/* 激活状态 */
.loopes-steps__item--active .loopes-steps__circle {
    background: var(--loopes-primary);
    color: #fff;
    border-color: var(--loopes-primary);
    box-shadow: 0 0 0 4px var(--loopes-primary-light);
}

.loopes-steps__item--active .loopes-steps__title {
    color: var(--loopes-primary);
    font-weight: 700;
}

/* 等待状态（默认） */
.loopes-steps__item--waiting .loopes-steps__circle {
    background: var(--loopes-bg-secondary);
    color: var(--loopes-text-light);
    border-color: var(--loopes-border);
}

.loopes-steps__item--waiting .loopes-steps__title {
    color: var(--loopes-text-muted);
}

/* 错误状态 */
.loopes-steps__item--error .loopes-steps__circle {
    background: var(--loopes-error);
    color: #fff;
    border-color: var(--loopes-error);
}

.loopes-steps__item--error .loopes-steps__title {
    color: var(--loopes-error);
}

/* 小尺寸 */
.loopes-steps--sm .loopes-steps__circle {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

.loopes-steps--sm .loopes-steps__title {
    font-size: 13px;
}

.loopes-steps--sm .loopes-steps__desc {
    font-size: 12px;
}

.loopes-steps--sm.loopes-steps--vertical .loopes-steps__line {
    margin-left: 11px;
}

/* 点状步骤条 */
.loopes-steps--dot .loopes-steps__circle {
    width: 12px;
    height: 12px;
    font-size: 0;
    border-width: 3px;
}

.loopes-steps--dot .loopes-steps__item--completed .loopes-steps__circle,
.loopes-steps--dot .loopes-steps__item--active .loopes-steps__circle {
    border-color: var(--loopes-primary);
    background: var(--loopes-primary);
    box-shadow: none;
}

/* 居中水平步骤条文字 */
.loopes-steps--center .loopes-steps__item {
    text-align: center;
}

.loopes-steps--center .loopes-steps__content {
    padding-left: 0;
    text-align: center;
}

/* 标题和文字间距 */
.loopes-steps--compact .loopes-steps__content {
    padding-top: 0;
}

.loopes-steps--compact.loopes-steps--vertical .loopes-steps__content {
    padding-bottom: 16px;
}


/* alert */
/* ====== Alert 提示条 ====== */
.loopes-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--loopes-radius);
    background: var(--loopes-bg-secondary);
    border: 1px solid var(--loopes-border);
    font-size: 14px;
    color: var(--loopes-text);
    line-height: 1.6;
    position: relative;
    transition: all 0.3s ease;
}

.loopes-alert__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.loopes-alert__icon svg {
    width: 18px;
    height: 18px;
}

.loopes-alert__body {
    flex: 1;
    min-width: 0;
}

.loopes-alert__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--loopes-text);
    margin-bottom: 2px;
}

.loopes-alert__message {
    font-size: 13px;
    color: var(--loopes-text-secondary);
}

.loopes-alert__close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    border-radius: 6px;
    background: transparent;
    border: none;
    padding: 0;
    transition: all 0.15s ease;
}

.loopes-alert__close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

/* 类型变体 */
.loopes-alert--info {
    background: var(--loopes-primary-light);
    border-color: rgba(var(--loopes-primary-rgb), 0.15);
    color: var(--loopes-primary-deeper);
}

.loopes-alert--info .loopes-alert__title {
    color: var(--loopes-primary-deeper);
}

.loopes-alert--info .loopes-alert__message {
    color: var(--loopes-primary);
}

.loopes-alert--info .loopes-alert__icon {
    color: var(--loopes-primary);
}

.loopes-alert--success {
    background: #ECFDF5;
    border-color: rgba(16, 185, 129, 0.15);
    color: #065F46;
}

.loopes-alert--success .loopes-alert__title {
    color: #065F46;
}

.loopes-alert--success .loopes-alert__message {
    color: #059669;
}

.loopes-alert--success .loopes-alert__icon {
    color: #10B981;
}

.loopes-alert--warning {
    background: #FFFBEB;
    border-color: rgba(245, 158, 11, 0.15);
    color: #92400E;
}

.loopes-alert--warning .loopes-alert__title {
    color: #92400E;
}

.loopes-alert--warning .loopes-alert__message {
    color: #D97706;
}

.loopes-alert--warning .loopes-alert__icon {
    color: #F59E0B;
}

.loopes-alert--error {
    background: #FEF2F2;
    border-color: rgba(239, 68, 68, 0.15);
    color: #991B1B;
}

.loopes-alert--error .loopes-alert__title {
    color: #991B1B;
}

.loopes-alert--error .loopes-alert__message {
    color: #DC2626;
}

.loopes-alert--error .loopes-alert__icon {
    color: #EF4444;
}

/* 简洁模式（无标题，仅图标+文字） */
.loopes-alert--simple .loopes-alert__title {
    display: none;
}

/* 无图标 */
.loopes-alert--no-icon .loopes-alert__icon {
    display: none;
}

/* 大尺寸 */
.loopes-alert--lg {
    padding: 16px 20px;
}

.loopes-alert--lg .loopes-alert__icon {
    width: 24px;
    height: 24px;
}

.loopes-alert--lg .loopes-alert__icon svg {
    width: 22px;
    height: 22px;
}

.loopes-alert--lg .loopes-alert__title {
    font-size: 16px;
    margin-bottom: 4px;
}

.loopes-alert--lg .loopes-alert__message {
    font-size: 14px;
}

/* 可关闭动画 */
.loopes-alert--dismissing {
    opacity: 0;
    transform: translateX(20px);
    max-height: 0;
    padding: 0 16px;
    margin: 0;
    overflow: hidden;
    border-width: 0;
}


/* timeline */
/* ====== Timeline 时间线 ====== */
.loopes-timeline {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
}

.loopes-timeline::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 15px;
    width: 2px;
    background: var(--loopes-border);
}

.loopes-timeline__item {
    position: relative;
    padding: 0 0 32px 44px;
}

.loopes-timeline__item:last-child {
    padding-bottom: 0;
}

.loopes-timeline__dot {
    position: absolute;
    left: 8px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--loopes-bg);
    border: 3px solid var(--loopes-border);
    z-index: 1;
    transition: all 0.3s ease;
}

.loopes-timeline__item--primary .loopes-timeline__dot {
    border-color: var(--loopes-primary);
    background: var(--loopes-primary);
}

.loopes-timeline__item--success .loopes-timeline__dot {
    border-color: var(--loopes-success);
    background: var(--loopes-success);
}

.loopes-timeline__item--warning .loopes-timeline__dot {
    border-color: var(--loopes-warning);
    background: var(--loopes-warning);
}

.loopes-timeline__item--error .loopes-timeline__dot {
    border-color: var(--loopes-error);
    background: var(--loopes-error);
}

.loopes-timeline__item--info .loopes-timeline__dot {
    border-color: var(--loopes-info);
    background: var(--loopes-info);
}

.loopes-timeline__meta {
    font-size: 12px;
    font-weight: 700;
    color: var(--loopes-text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.loopes-timeline__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--loopes-text);
    margin: 0 0 4px;
    line-height: 1.5;
}

.loopes-timeline__desc {
    font-size: 13px;
    color: var(--loopes-text-light);
    line-height: 1.6;
    margin: 0;
}

/* 交替时间线（左右交替） */
.loopes-timeline--alternate .loopes-timeline__item:nth-child(odd) {
    padding-left: 0;
    padding-right: calc(50% + 44px);
    text-align: right;
}

.loopes-timeline--alternate .loopes-timeline__item:nth-child(even) {
    padding-left: calc(50% + 44px);
    padding-right: 0;
}

.loopes-timeline--alternate .loopes-timeline__item:nth-child(odd) .loopes-timeline__dot {
    left: auto;
    right: calc(50% - 8px);
}

.loopes-timeline--alternate .loopes-timeline__item:nth-child(even) .loopes-timeline__dot {
    left: calc(50% - 8px);
}

.loopes-timeline--alternate::before {
    left: 50%;
    transform: translateX(-50%);
}

/* 紧凑时间线 */
.loopes-timeline--compact .loopes-timeline__item {
    padding-bottom: 20px;
}

.loopes-timeline--compact .loopes-timeline__title {
    font-size: 14px;
}

.loopes-timeline--compact .loopes-timeline__desc {
    font-size: 12px;
}

/* 卡片式时间线 */
.loopes-timeline--card .loopes-timeline__item {
    padding-bottom: 24px;
}

.loopes-timeline--card .loopes-timeline__content {
    background: var(--loopes-bg);
    border: 1px solid var(--loopes-border-light);
    border-radius: var(--loopes-radius);
    padding: 16px 20px;
    box-shadow: var(--loopes-shadow-sm);
}

.loopes-timeline--card .loopes-timeline__content:hover {
    border-color: var(--loopes-primary-light);
    box-shadow: 0 4px 12px rgba(var(--loopes-primary-rgb), 0.08);
}

/* 响应式 */
@media (max-width: 768px) {
    .loopes-timeline--alternate .loopes-timeline__item {
        padding-left: 44px !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    .loopes-timeline--alternate .loopes-timeline__item .loopes-timeline__dot {
        left: 8px !important;
        right: auto !important;
    }

    .loopes-timeline--alternate::before {
        left: 15px;
        transform: none;
    }
}


/* dark-mode */
/* ========================================
 * 暗色模式（Dark Mode）— 组件适配
 * 需要覆盖硬编码颜色的组件
 * ======================================== */

/* ===== Navbar 导航栏 ===== */
[data-theme="dark"] .loopes-navbar {
    background: #1E293B !important;
    border-bottom-color: #334155;
}

[data-theme="dark"] .loopes-navbar--scrolled {
    background: rgba(30, 41, 59, 0.98) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .loopes-navbar__menu .loopes-navbar__item--active > .loopes-navbar__link::after {
    background: var(--loopes-primary);
}

[data-theme="dark"] .loopes-navbar__menu--mobile {
    background: #1E293B;
    border-color: #334155;
}

[data-theme="dark"] .loopes-navbar__menu--mobile .loopes-navbar__item {
    border-bottom-color: #334155;
}

[data-theme="dark"] .loopes-navbar__toggle span {
    background: var(--loopes-text);
}

/* ===== Navbar 暗色 Logo 切换 ===== */
[data-theme="dark"] .loopes-navbar__logo--dark {
    display: none;
}
[data-theme="dark"] .loopes-navbar__logo--light {
    display: block;
}

/* ===== Footer 页脚 ===== */
[data-theme="dark"] .loopes-footer {
    background: #0F172A !important;
}

[data-theme="dark"] .loopes-footer__widget-title {
    color: var(--loopes-text);
}

[data-theme="dark"] .loopes-footer__widget p,
[data-theme="dark"] .loopes-footer__widget li a,
[data-theme="dark"] .loopes-footer__menu li a,
[data-theme="dark"] .loopes-footer__contact li {
    color: #94A3B8 !important;
}

[data-theme="dark"] .loopes-footer__widget li a:hover,
[data-theme="dark"] .loopes-footer__menu li a:hover {
    color: var(--loopes-primary) !important;
}

[data-theme="dark"] .loopes-footer__social a {
    background: #334155;
    color: #94A3B8;
}

[data-theme="dark"] .loopes-footer__social a:hover {
    background: var(--loopes-primary);
    color: #fff;
}

[data-theme="dark"] .loopes-footer__bottom {
    background: #0B1121 !important;
    border-top-color: #334155;
}

[data-theme="dark"] .loopes-footer__copyright,
[data-theme="dark"] .loopes-footer__links a {
    color: #64748B !important;
}

[data-theme="dark"] .loopes-footer__links a:hover {
    color: var(--loopes-primary) !important;
}

[data-theme="dark"] .loopes-footer__qrcode {
    background: #1E293B;
    border-color: #334155;
}

[data-theme="dark"] .loopes-back-to-top {
    background: #1E293B;
    color: #94A3B8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .loopes-back-to-top:hover {
    background: var(--loopes-primary);
    color: #fff;
}

/* ===== Card 卡片 ===== */
[data-theme="dark"] .loopes-card {
    background: var(--loopes-bg-elevated);
    border-color: var(--loopes-border);
}

[data-theme="dark"] .loopes-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* ===== Button 按钮阴影 ===== */
[data-theme="dark"] .loopes-btn--primary:hover {
    box-shadow: 0 4px 14px rgba(96, 165, 250, 0.25);
}

[data-theme="dark"] .loopes-btn--success:hover {
    box-shadow: 0 4px 14px rgba(52, 211, 153, 0.25);
}

[data-theme="dark"] .loopes-btn--warning:hover {
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.25);
}

[data-theme="dark"] .loopes-btn--error:hover {
    box-shadow: 0 4px 14px rgba(248, 113, 113, 0.25);
}

[data-theme="dark"] .loopes-btn--info:hover {
    box-shadow: 0 4px 14px rgba(96, 165, 250, 0.25);
}

/* ===== Switch 开关 ===== */
[data-theme="dark"] .loopes-switch__slider {
    background: #475569;
}

/* ===== Breadcrumb ===== */
[data-theme="dark"] .loopes-breadcrumb--light .loopes-breadcrumb__item,
[data-theme="dark"] .loopes-breadcrumb--light .loopes-breadcrumb__item a {
    color: rgba(255, 255, 255, 0.65);
}

[data-theme="dark"] .loopes-breadcrumb--light .loopes-breadcrumb__item--active {
    color: #fff;
}

/* ===== Toast ===== */
[data-theme="dark"] .loopes-toast {
    background: #1E293B;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* ===== Modal ===== */
[data-theme="dark"] .loopes-modal__content {
    background: #1E293B;
}

[data-theme="dark"] .loopes-modal__close {
    color: #94A3B8;
}

[data-theme="dark"] .loopes-modal__close:hover {
    color: var(--loopes-text);
}

/* ===== Pagination ===== */
[data-theme="dark"] .loopes-pagination__item {
    background: #1E293B;
    border-color: #334155;
    color: #94A3B8;
}

[data-theme="dark"] .loopes-pagination__item:hover {
    background: #334155;
    border-color: var(--loopes-primary);
}

[data-theme="dark"] .loopes-pagination__item--active {
    background: var(--loopes-primary) !important;
    border-color: var(--loopes-primary) !important;
    color: #fff !important;
}

[data-theme="dark"] .loopes-pagination__item--dots {
    background: transparent !important;
    border-color: transparent !important;
    color: #64748B;
}

[data-theme="dark"] .loopes-pagination__item--disabled {
    opacity: 0.3;
}

[data-theme="dark"] .loopes-pagination__jumper {
    color: #94A3B8;
}

[data-theme="dark"] .loopes-pagination__jumper input {
    background: #1E293B;
    border-color: #334155;
    color: var(--loopes-text);
}

/* ===== Toolbar ===== */
[data-theme="dark"] .loopes-toolbar {
    background: #1E293B;
    border-color: #334155;
}

/* ===== Tabs ===== */
[data-theme="dark"] .loopes-tabs__nav {
    border-bottom-color: #334155;
}

[data-theme="dark"] .loopes-tabs__item {
    color: #94A3B8;
}

[data-theme="dark"] .loopes-tabs__item--active {
    color: var(--loopes-primary);
}

/* ===== Input / Select / Textarea ===== */
[data-theme="dark"] .loopes-input,
[data-theme="dark"] .loopes-select,
[data-theme="dark"] .loopes-textarea {
    background: #1E293B;
    border-color: #334155;
    color: var(--loopes-text);
}

[data-theme="dark"] .loopes-input:focus,
[data-theme="dark"] .loopes-select:focus,
[data-theme="dark"] .loopes-textarea:focus {
    border-color: var(--loopes-primary);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .loopes-input::placeholder,
[data-theme="dark"] .loopes-textarea::placeholder {
    color: #475569;
}

/* ===== Toolbar Search ===== */
[data-theme="dark"] .loopes-toolbar-search__input {
    background: #1E293B;
    border-color: #334155;
    color: var(--loopes-text);
}

[data-theme="dark"] .loopes-toolbar-search__input:focus {
    border-color: var(--loopes-primary);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .loopes-toolbar-search__input::placeholder {
    color: #475569;
}

[data-theme="dark"] .loopes-toolbar-search--inline .loopes-toolbar-search__input {
    background: #1E293B;
    border-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .loopes-toolbar-search--inline .loopes-toolbar-search__input:focus {
    background: #0F172A;
    border-color: var(--loopes-primary);
}

[data-theme="dark"] .loopes-toolbar-search--pill .loopes-toolbar-search__input {
    background: #1E293B;
    border-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .loopes-toolbar-search--pill .loopes-toolbar-search__input:focus {
    background: #0F172A;
    border-color: var(--loopes-primary);
}

[data-theme="dark"] .loopes-toolbar-search--pill .loopes-toolbar-search__icon {
    color: #64748B;
}

[data-theme="dark"] .loopes-toolbar-search--pill .loopes-toolbar-search__input::placeholder {
    color: #64748B;
}

/* ===== Comment ===== */
[data-theme="dark"] .loopes-comment-system {
    border-color: #334155;
}

[data-theme="dark"] .loopes-comment-form textarea {
    background: #1E293B;
    border-color: #334155;
    color: var(--loopes-text);
}

[data-theme="dark"] .loopes-comment-item {
    border-bottom-color: #334155;
}

[data-theme="dark"] .loopes-comment-author {
    color: var(--loopes-text);
}

[data-theme="dark"] .loopes-comment-content {
    color: #94A3B8;
}

/* ===== Accordion ===== */
[data-theme="dark"] .loopes-accordion__header {
    background: #1E293B;
    border-color: #334155;
}

[data-theme="dark"] .loopes-accordion__content {
    background: #0F172A;
    border-color: #334155;
}

/* ===== Drawer ===== */
[data-theme="dark"] .loopes-drawer__content {
    background: #1E293B;
}

/* ===== Table ===== */
[data-theme="dark"] .loopes-table {
    border-color: #334155;
}

[data-theme="dark"] .loopes-table th {
    background: #1E293B;
    color: var(--loopes-text);
}

[data-theme="dark"] .loopes-table td {
    border-bottom-color: #334155;
}

[data-theme="dark"] .loopes-table tr:hover td {
    background: rgba(96, 165, 250, 0.04);
}

/* ===== Tags ===== */
[data-theme="dark"] .loopes-tag {
    background: #334155;
    color: #94A3B8;
}

[data-theme="dark"] .loopes-tag:hover {
    background: var(--loopes-primary-light);
    color: var(--loopes-primary);
}

/* ===== Badge ===== */
[data-theme="dark"] .loopes-badge {
    color: var(--loopes-text);
}

/* ===== Progress ===== */
[data-theme="dark"] .loopes-progress {
    background: #334155;
}

/* ===== Toast 自动适配 ===== */
[data-theme="dark"] .loopes-toast--success,
[data-theme="dark"] .loopes-toast--error,
[data-theme="dark"] .loopes-toast--warning,
[data-theme="dark"] .loopes-toast--info {
    color: var(--loopes-text);
}

/* ===== User Avatar ===== */
[data-theme="dark"] .loopes-avatar img {
    border-color: #334155;
}

/* ===== Divider ===== */
[data-theme="dark"] .loopes-divider {
    border-color: #334155;
}

/* ===== 暗色模式切换动效 ===== */
/* View Transition API — 从点击位置圆形发散 */
@keyframes loopes-view-old {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes loopes-view-new {
    from {
        clip-path: circle(0 at var(--loopes-reveal-x, 50%) var(--loopes-reveal-y, 50%));
    }
    to {
        clip-path: circle(141.4% at var(--loopes-reveal-x, 50%) var(--loopes-reveal-y, 50%));
    }
}
::view-transition-old(root) {
    animation: 0.35s ease both loopes-view-old;
}
::view-transition-new(root) {
    animation: 0.4s ease both loopes-view-new;
}

/* 降级：不支持 View Transition API 的浏览器使用平滑过渡 */
html.loopes-theme-transitioning,
html.loopes-theme-transitioning *,
html.loopes-theme-transitioning *::before,
html.loopes-theme-transitioning *::after {
    transition: background-color 0.25s ease !important,
                color 0.25s ease !important,
                border-color 0.25s ease !important,
                box-shadow 0.25s ease !important;
}

/* tabs */
/* ====== Tabs 标签页 ====== */
/* 通用的标签页导航系统，支持水平和垂直两种方向 */

.loopes-tabs {
    display: flex;
    flex-direction: column;
}

/* Tab 导航栏 */
.loopes-tabs__nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--loopes-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.loopes-tabs__nav::-webkit-scrollbar {
    display: none;
}

.loopes-tabs__tab {
    flex-shrink: 0;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--loopes-text-light);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    white-space: nowrap;
}

.loopes-tabs__tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--loopes-primary);
    transition: all 0.25s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.loopes-tabs__tab:hover {
    color: var(--loopes-primary);
}

.loopes-tabs__tab--active {
    color: var(--loopes-primary);
    font-weight: 600;
}

.loopes-tabs__tab--active::after {
    width: 60%;
}

/* Tab 内容面板 */
.loopes-tabs__panel {
    display: none;
    padding-top: 24px;
}

.loopes-tabs__panel--active {
    display: block;
}

/* 居中变体 */
.loopes-tabs--center .loopes-tabs__nav {
    justify-content: center;
}

/* 填充变体（平分宽度） */
.loopes-tabs--fill .loopes-tabs__tab {
    flex: 1;
    text-align: center;
}

/* 卡片式变体 */
.loopes-tabs--card .loopes-tabs__nav {
    border-bottom: none;
    gap: 4px;
    background: var(--loopes-bg-tertiary);
    padding: 4px;
    border-radius: var(--loopes-radius);
}

.loopes-tabs--card .loopes-tabs__tab {
    border-radius: var(--loopes-radius-sm);
    padding: 10px 20px;
}

.loopes-tabs--card .loopes-tabs__tab::after {
    display: none;
}

.loopes-tabs--card .loopes-tabs__tab--active {
    background: var(--loopes-bg);
    color: var(--loopes-primary);
    box-shadow: 0 2px 8px var(--loopes-shadow-color);
}

/* 小型标签 */
.loopes-tabs--sm .loopes-tabs__tab {
    padding: 8px 16px;
    font-size: 13px;
}

@media (max-width: 768px) {
    .loopes-tabs__tab {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* 药丸变体（分类页筛选框风格） */
.loopes-tabs--pills .loopes-tabs__nav {
    border-bottom: none;
    gap: 4px;
    flex-wrap: nowrap;
}

.loopes-tabs--pills .loopes-tabs__tab {
    padding: 7px 16px;
    font-size: 14px;
    color: var(--loopes-text-secondary);
    border-radius: 8px;
}

.loopes-tabs--pills .loopes-tabs__tab::after {
    display: none;
}

.loopes-tabs--pills .loopes-tabs__tab:hover {
    color: var(--loopes-primary);
    background: var(--loopes-primary-light);
}

.loopes-tabs--pills .loopes-tabs__tab--active,
.loopes-tabs--pills .loopes-tabs__tab--active:hover {
    color: #fff;
    background: var(--loopes-primary);
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.25);
    font-weight: 500;
}

.loopes-tabs--pills .loopes-tabs__count {
    font-size: 12px;
    opacity: 0.65;
    margin-left: 4px;
}

.loopes-tabs--pills .loopes-tabs__tab--active .loopes-tabs__count {
    opacity: 0.85;
}

/* 分段控制变体（Segment Control） */
.loopes-tabs--segment .loopes-tabs__nav {
    border-bottom: none;
    gap: 0;
    background: var(--loopes-bg-secondary);
    border-radius: 10px;
    padding: 3px;
}

.loopes-tabs--segment .loopes-tabs__tab {
    padding: 6px 14px;
    font-size: 13px;
    color: var(--loopes-text-secondary);
    border-radius: 8px;
}

.loopes-tabs--segment .loopes-tabs__tab::after {
    display: none;
}

.loopes-tabs--segment .loopes-tabs__tab:hover {
    color: var(--loopes-primary);
}

.loopes-tabs--segment .loopes-tabs__tab--active {
    background: var(--loopes-bg);
    color: var(--loopes-text);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ====== 全局布局 - Sticky Footer ====== */

.loopes-site-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.loopes-site-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 76px;
}

.loopes-site-wrapper > *:first-child {
    flex: 1;
}

.loopes-site-footer {
    flex-shrink: 0;
}

@supports (padding-top: env(safe-area-inset-top)) {
    .loopes-site-wrapper {
        padding-top: calc(76px + env(safe-area-inset-top));
    }
}

/* ====== Footer 页脚 ====== */

.loopes-site-footer {
    background: #0f172a;
    color: #cbd5e1;
    position: relative;
}

.loopes-footer__main {
    padding: 60px 0 40px;
}

.loopes-footer__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.loopes-footer__grid > * {
    min-width: 0;
}

.loopes-footer__brand {
    margin-bottom: 20px;
}

.loopes-footer__logo {
    max-height: 36px;
    width: auto;
    display: block;
    margin-bottom: 16px;
}

.loopes-footer__desc {
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0;
    max-width: 300px;
}

.loopes-footer__widget {
    margin-bottom: 10px;
}

.loopes-footer__widget-title {
    font-size: 15px;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    position: relative;
}

.loopes-footer__widget-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 28px;
    height: 2px;
    background: var(--loopes-primary);
    border-radius: 1px;
}

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

.loopes-footer__menu li {
    list-style: none;
    margin: 0;
}

.loopes-footer__menu li a {
    display: block;
    padding: 5px 0;
    font-size: 14px;
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    padding-left: 14px;
}

.loopes-footer__menu li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #475569;
    transition: all 0.2s ease;
}

.loopes-footer__menu li a:hover {
    color: var(--loopes-primary-hover);
    padding-left: 18px;
}

.loopes-footer__menu li a:hover::before {
    background: var(--loopes-primary-hover);
    width: 6px;
    height: 6px;
}

.loopes-footer__contacts {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.loopes-footer__contacts li {
    list-style: none;
    margin: 0 0 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.6;
}

.loopes-footer__contacts li a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s;
}

.loopes-footer__contacts li a:hover {
    color: var(--loopes-primary-hover);
}

.loopes-footer__contacts .contact-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: #475569;
}

.loopes-footer__social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
}

.loopes-footer__social li {
    list-style: none;
    margin: 0;
}

.loopes-footer__social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.25s ease;
    font-size: 15px;
}

.loopes-footer__social li a:hover {
    background: var(--loopes-primary);
    color: #fff;
    transform: translateY(-2px);
}

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

.loopes-footer__qrcode-img {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 10px;
    border-radius: 8px;
    border: 2px solid rgba(148, 163, 184, 0.15);
    object-fit: cover;
}

.loopes-footer__qrcode-tip {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

.loopes-footer__bottom {
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    padding: 0 40px;
}

.loopes-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

.loopes-footer__copyright {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

.loopes-footer__copyright a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s;
}

.loopes-footer__copyright a:hover {
    color: var(--loopes-primary-hover);
}

.loopes-footer__theme-by {
    font-size: 13px;
    color: #475569;
    margin: 0;
}

.loopes-footer__theme-by a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
}

.loopes-footer__theme-by a:hover {
    color: var(--loopes-primary-hover);
}

@media (max-width: 1200px) {
    .loopes-footer__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .loopes-footer__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .loopes-footer__main {
        padding: 50px 0 30px;
    }
}

@media (max-width: 768px) {
    .loopes-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding: 0 16px;
    }

    .loopes-footer__main {
        padding: 40px 0 20px;
    }

    .loopes-footer__bottom {
        padding: 0 16px;
    }

    .loopes-footer__bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    .loopes-footer__desc {
        max-width: none;
    }

    .loopes-footer__social {
        justify-content: center;
    }

    .loopes-footer__qrcode-img {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 480px) {
    .loopes-footer__grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 12px;
    }

    .loopes-footer__widget {
        margin-bottom: 0;
    }

    .loopes-footer__qrcode-img {
        width: 100px;
        height: 100px;
    }
}

/* ====== 回到顶部 ====== */

.loopes-back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: var(--loopes-primary);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 16px var(--loopes-shadow-color);
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: visibility 0.25s ease, opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.loopes-back-to-top.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.loopes-back-to-top:hover {
    background: var(--loopes-primary-active);
    transform: translateY(-3px);
    box-shadow: 0 6px 24px var(--loopes-shadow-color-strong);
}

.loopes-back-to-top svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 768px) {
    .loopes-back-to-top {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
    }
}

/* ====== 在线客服 ====== */

.loopes-cs-widget {
    position: fixed;
    right: 30px;
    bottom: 84px;
    z-index: 998;
}

.loopes-cs-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 50px;
    background: var(--loopes-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 16px var(--loopes-shadow-color);
    transition: all 0.25s ease;
}

.loopes-cs-toggle:hover {
    background: var(--loopes-primary-active);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px var(--loopes-shadow-color-strong);
}

.loopes-cs-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.loopes-cs-popup {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: 320px;
    background: var(--loopes-bg-elevated);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    overflow: hidden;
}

.loopes-cs-popup.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.loopes-cs-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.loopes-cs-popup__title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.loopes-cs-popup__title svg {
    width: 18px;
    height: 18px;
}

.loopes-cs-popup__close {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.loopes-cs-popup__close:hover {
    background: #e2e8f0;
    color: #475569;
}

.loopes-cs-popup__body {
    padding: 16px 20px 20px;
}

.loopes-cs-working-hours {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 14px;
}

.loopes-cs-working-hours svg {
    width: 16px;
    height: 16px;
    color: var(--loopes-primary);
    flex-shrink: 0;
}

.loopes-cs-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.loopes-cs-action-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.loopes-cs-action-item:hover {
    background: #e2e8f0;
    color: #1e293b;
    text-decoration: none;
}

.loopes-cs-action-item svg {
    width: 16px;
    height: 16px;
}

.loopes-cs-info {
    margin-bottom: 14px;
}

.loopes-cs-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    padding: 5px 0;
}

.loopes-cs-info-item svg {
    width: 15px;
    height: 15px;
    color: #64748b;
    flex-shrink: 0;
}

.loopes-cs-qrcode-section {
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.loopes-cs-qrcode-section h5 {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.loopes-cs-qrcode-section h5 svg {
    width: 16px;
    height: 16px;
}

.loopes-cs-qrcode-img {
    width: 110px;
    height: 110px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    object-fit: cover;
}

/* ====== 客服响应式 ====== */

@media (max-width: 768px) {
    .loopes-cs-widget {
        right: 16px;
        bottom: 66px;
    }

    .loopes-cs-popup {
        width: 300px;
        right: 0;
    }
}

@media (max-width: 480px) {
    .loopes-cs-popup {
        width: 280px;
    }

    .loopes-cs-toggle span {
        display: none;
    }

    .loopes-cs-toggle {
        padding: 12px;
        border-radius: 50%;
    }

    .loopes-cs-toggle svg {
        margin: 0;
    }
}

/* ====== 客服脉冲动画 ====== */

@keyframes loopes-cs-pulse {
    0% {
        box-shadow: 0 4px 16px var(--loopes-shadow-color), 0 0 0 0 rgba(26, 115, 232, 0.5);
    }
    50% {
        box-shadow: 0 4px 16px var(--loopes-shadow-color), 0 0 0 12px rgba(26, 115, 232, 0);
    }
    100% {
        box-shadow: 0 4px 16px var(--loopes-shadow-color), 0 0 0 0 rgba(26, 115, 232, 0);
    }
}

.loopes-cs-toggle {
    animation: loopes-cs-pulse 2s ease-in-out infinite;
}

.loopes-cs-toggle:hover {
    animation: none;
}

.loopes-cs-toggle.is-active {
    animation: none;
    background: var(--loopes-primary-active, #1557B0);
    transform: scale(0.95);
}