/* ================================
   my.css
   Vision Glass UI · Dopamine (Enhanced)
   ================================ */

/* ===== 设计变量 ===== */
:root {
    /* 背景基底 */
    --vp-bg-main: #F7F9FC;
    --vp-bg-deep: #EEF2F7;

    /* 文字 */
    --vp-text-main: #1F2937;
    --vp-text-muted: #6B7280;

    /* 多巴胺强调色 */
    --vp-accent-pink: #FF6EC7;
    --vp-accent-orange: #FFB703;
    --vp-accent-blue: #5AC8FA;
    --vp-accent-green: #34D399;
    --vp-accent-purple: #A78BFA;

    /* ===== 玻璃参数（重点增强） ===== */
    --vp-glass-bg-strong: rgba(255, 255, 255, 0.31);
    --vp-glass-bg-weak: rgba(255, 255, 255, 0.37);
    --vp-glass-border: rgba(255, 255, 255, .55);
    --vp-glass-highlight: rgba(255, 255, 255, .95);

    /* 色雾（毛玻璃灵魂） */
    --vp-glass-tint-pink: rgba(255, 110, 199, .18);
    --vp-glass-tint-blue: rgba(90, 200, 250, .18);
}

/* ================================
   背景（更明显的多巴胺色块）
   ================================ */
body {
    background:
        radial-gradient(1100px 600px at 8% 8%, rgba(255, 110, 199, .28), transparent 55%),
        radial-gradient(1000px 600px at 92% 18%, rgba(90, 200, 250, .30), transparent 58%),
        radial-gradient(900px 500px at 50% 92%, rgba(52, 211, 153, .26), transparent 60%),
        linear-gradient(180deg, var(--vp-bg-main), var(--vp-bg-deep));
    color: var(--vp-text-main);
    letter-spacing: .2px;
}

/* ================================
   Glass System（重点）
   ================================ */
.vp-glass {
    background:
        linear-gradient(180deg,
            var(--vp-glass-bg-strong),
            var(--vp-glass-bg-weak));
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border-radius: 22px;
    border: 1px solid var(--vp-glass-border);
    box-shadow:
        0 30px 80px rgba(31, 41, 55, .18),
        inset 0 1px 0 var(--vp-glass-highlight),
        inset 0 -1px 0 rgba(255, 255, 255, .35);
    position: relative;
    overflow: hidden;
}

/* ✅ 色雾层（让玻璃“浑一点”） */
.vp-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(500px 300px at 20% 10%,
            var(--vp-glass-tint-pink),
            transparent 60%),
        radial-gradient(500px 300px at 80% 30%,
            var(--vp-glass-tint-blue),
            transparent 65%);
    pointer-events: none;
}

/* 顶部高光 */
.vp-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 140px at 50% -50px,
            rgba(255, 255, 255, .75),
            transparent 60%);
    pointer-events: none;
}

/* ================================
   卡片
   ================================ */
.vp-card {
    padding: 30px;
}

/* ================================
   图标
   ================================ */
.vp-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    background:
        linear-gradient(135deg,
            var(--vp-accent-pink),
            var(--vp-accent-purple));
    box-shadow:
        0 16px 40px rgba(167, 139, 250, .45);
}

/* ================================
   按钮（略增强）
   ================================ */

.btn {
    border-radius: 14px;
    padding: 8px 18px;
    font-weight: 500;
    font-size: 13px;
    border: none;
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    transition: all .2s ease;
}

/* 悬停通用效果 */
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .15);
}

/* ================================
   Primary
   ================================ */
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg,
            #60A5FA,
            #818CF8);
    box-shadow: 0 8px 24px rgba(99, 102, 241, .45);
}

/* ================================
   Success
   ================================ */
.btn-success {
    color: #fff;
    background: linear-gradient(135deg,
            #34D399,
            #22C55E);
    box-shadow: 0 8px 24px rgba(34, 197, 94, .45);
}

/* ================================
   Warning（编辑类操作）
   ================================ */
.btn-warning {
    color: #fff;
    background: linear-gradient(135deg,
            #38BDF8,
            #818CF8);
    box-shadow: 0 8px 24px rgba(56, 189, 248, .45);
}

/* ================================
   Danger（删除 / 危险操作）
   ================================ */
.btn-danger {
    color: #fff;
    background: linear-gradient(135deg,
            #FB7185,
            #F43F5E);
    box-shadow: 0 8px 26px rgba(244, 63, 94, .45);
}

.btn-danger:hover {
    box-shadow: 0 12px 32px rgba(244, 63, 94, .55);
}

/* ================================
   Secondary
   ================================ */
.btn-secondary {
    color: #374151;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, .8),
            rgba(255, 255, 255, .6));
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

/* ================================
   Info
   ================================ */
.btn-info {
    color: #fff;
    background: linear-gradient(135deg,
            #22D3EE,
            #38BDF8);
    box-shadow: 0 8px 24px rgba(34, 211, 238, .45);
}

/* ================================
   Light
   ================================ */
.btn-light {
    color: #374151;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

/* ================================
   Dark
   ================================ */
.btn-dark {
    color: #fff;
    background: linear-gradient(135deg,
            #374151,
            #111827);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

/* ================================
   Link
   ================================ */
.btn-link {
    color: #6366F1;
    padding: 6px 8px;
    box-shadow: none;
}

.btn-link:hover {
    text-decoration: underline;
    transform: none;
}

/* ================================
   Global Alert System
   Vision Glass · Dopamine
   ================================ */

.alert {
    position: relative;
    border-radius: 18px;
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, .45);
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .75),
            rgba(255, 255, 255, .45));
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow:
        0 20px 50px rgba(31, 41, 55, .18),
        inset 0 1px 0 rgba(255, 255, 255, .85);
    color: var(--vp-text-main);
}

/* 左侧色条（统一结构） */
.alert::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .1);
}

/* ================================
   Primary
   ================================ */
.alert-primary {
    color: #1E3A8A;
}

.alert-primary::before {
    background: linear-gradient(180deg,
            #60A5FA,
            #818CF8);
}

/* ================================
   Secondary
   ================================ */
.alert-secondary {
    color: #374151;
}

.alert-secondary::before {
    background: linear-gradient(180deg,
            rgba(107, 114, 128, .8),
            rgba(75, 85, 99, .8));
}

/* ================================
   Success
   ================================ */
.alert-success {
    color: #065F46;
}

.alert-success::before {
    background: linear-gradient(180deg,
            #34D399,
            #22C55E);
}

/* ================================
   Danger / Error
   ================================ */
.alert-danger {
    color: #7F1D1D;
}

.alert-danger::before {
    background: linear-gradient(180deg,
            #FB7185,
            #F43F5E);
}

/* ================================
   Warning
   ================================ */
.alert-warning {
    color: #78350F;
}

.alert-warning::before {
    background: linear-gradient(180deg,
            #FBBF24,
            #F59E0B);
}

/* ================================
   Info
   ================================ */
.alert-info {
    color: #0C4A6E;
}

.alert-info::before {
    background: linear-gradient(180deg,
            #22D3EE,
            #38BDF8);
}

/* ================================
   Light
   ================================ */
.alert-light {
    color: #374151;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .85),
            rgba(255, 255, 255, .65));
}

.alert-light::before {
    background: rgba(209, 213, 219, .8);
}

/* ================================
   Dark
   ================================ */
.alert-dark {
    color: #F9FAFB;
    background:
        linear-gradient(180deg,
            rgba(31, 41, 55, .85),
            rgba(17, 24, 39, .85));
}

.alert-dark::before {
    background: linear-gradient(180deg,
            #6B7280,
            #111827);
}

/* ================================
   Button Loading Spinner
   ================================ */

.btn.is-loading {
    pointer-events: none;
    opacity: .9;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn.is-loading::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .6);
    border-top-color: rgba(255, 255, 255, 1);
    animation: vp-spin .8s linear infinite;
}

/* 浅色按钮适配 */
.btn-secondary.is-loading::before,
.btn-light.is-loading::before {
    border-color: rgba(0, 0, 0, .35);
    border-top-color: rgba(0, 0, 0, .7);
}


/* 深色按钮适配 */
.btn-secondary.is-loading::after,
.btn-light.is-loading::after {
    border-color: rgba(0, 0, 0, .3);
    border-top-color: rgba(0, 0, 0, .6);
}

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

/* ================================
   Center Alert Animation
   ================================ */

.vp-alert-container {
    position: fixed;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    animation: vp-alert-in .35s ease;
}

.vp-alert-container.hide {
    animation: vp-alert-out .4s ease forwards;
}

@keyframes vp-alert-in {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes vp-alert-out {
    to {
        opacity: 0;
        transform: translate(-50%, -20%);
    }
}

/* Alert 内部结构增强 */
.vp-alert-container .alert {
    padding: 22px 50px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
}

/* Alert 图标 */
.vp-alert-icon {
    font-size: 20px;
    line-height: 1;
}

/* ================================
   Form Controls (Input, Select, Switch)
   Vision Glass · Dopamine
   ================================ */

/* 1. 输入框 & 下拉框通用 */
.form-control,
.form-select {
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.6);
    /* gray-300 */
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 16px;
    font-size: 14px;
    color: var(--vp-text-main);
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

/* 悬停状态 */
.form-control:hover,
.form-select:hover {
    border-color: rgba(156, 163, 175, 0.8);
    /* gray-400 */
    background-color: rgba(255, 255, 255, 0.95);
}

/* 聚焦状态（光晕效果） */
.form-control:focus,
.form-select:focus {
    background-color: #fff;
    border-color: #818CF8;
    /* primary-light */
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
    /* primary ring */
    outline: none;
}

/* 2. Checkbox & Radio */
.form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.15em;
    border: 1.5px solid rgba(209, 213, 219, 0.8);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    cursor: pointer;
}

/* 选中状态 - 使用渐变 */
.form-check-input:checked {
    background-color: #6366F1;
    /* Fallback */
    background-image: linear-gradient(135deg, #60A5FA, #818CF8);
    border-color: transparent;
}

/* Radio 圆形 */
.form-check-input[type="radio"] {
    border-radius: 50%;
}

/* 聚焦去除默认蓝色阴影，改用自定义 */
.form-check-input:focus {
    border-color: #818CF8;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

/* 3. Switch 开关 (增强版) */
.form-switch .form-check-input {
    width: 2.8em;
    height: 1.5em;
    border-radius: 2em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-position: left center;
    border: 1px solid rgba(209, 213, 219, 0.6);
}

/* Switch 选中 */
.form-switch .form-check-input:checked {
    background-color: #6366F1;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right center;
    border-color: transparent;
}

/* Hover 效果 */
.form-switch .form-check-input:hover {
    background-color: #6366F1;
}

/* ================================
   新增颜色类
   ================================ */
.text-pink {
    color: var(--vp-accent-pink) !important;
}

.text-blue {
    color: var(--vp-accent-blue) !important;
}

.text-green {
    color: var(--vp-accent-green) !important;
}

.text-purple {
    color: var(--vp-accent-purple) !important;
}

.text-orange {
    color: var(--vp-accent-orange) !important;
}

/* 背景色透明度类 */
.bg-pink {
    background-color: var(--vp-accent-pink) !important;
}

.bg-blue {
    background-color: var(--vp-accent-blue) !important;
}

.bg-green {
    background-color: var(--vp-accent-green) !important;
}

.bg-purple {
    background-color: var(--vp-accent-purple) !important;
}

.bg-orange {
    background-color: var(--vp-accent-orange) !important;
}

/* 背景透明度类 */
.bg-pink-opacity-10 {
    background-color: rgba(255, 110, 199, 0.1) !important;
}

.bg-blue-opacity-10 {
    background-color: rgba(90, 200, 250, 0.1) !important;
}

.bg-green-opacity-10 {
    background-color: rgba(52, 211, 153, 0.1) !important;
}

.bg-purple-opacity-10 {
    background-color: rgba(167, 139, 250, 0.1) !important;
}

.bg-orange-opacity-10 {
    background-color: rgba(255, 183, 3, 0.1) !important;
}