/**
 * 灵休 · 液态玻璃 —— 基础组件
 *
 * 这里把旧类名（card / btn / badge / alert / form-* / stat-card …）整体玻璃化，
 * 所以沿用这些类名的页面不用改标记。新写的页面照样使用这些类名，不要另起炉灶。
 * 选择器统一以 body.lg 开头（比旧样式的特异性高一级），不要用 !important。
 */

/* ============================================================
   卡片
   ============================================================ */
body.lg .card,
body.lg .stat-card,
body.lg .list-group,
body.lg .group-card,
body.lg .notice-card {
    background: var(--lg-surface);
    border: 1px solid var(--lg-rim);
    border-radius: var(--lg-r-lg);
    box-shadow: var(--lg-edge-soft), var(--lg-shadow-1);
}

body.lg .card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--lg-hairline);
    background: transparent;
}

body.lg .card-title {
    font-size: var(--lg-fs-head);
    font-weight: 700;
    color: var(--lg-text);
}

body.lg .card-subtitle {
    color: var(--lg-text-3);
}

body.lg .section-title {
    font-weight: 700;
    color: var(--lg-text);
}

body.lg .section-link {
    color: var(--lg-brand-ink);
}

/* ============================================================
   按钮：胶囊形。主按钮是着色玻璃，其余是清透玻璃。
   ============================================================ */
body.lg .btn {
    padding: 11px 22px;
    border-radius: var(--lg-r-pill);
    border: 1px solid var(--lg-rim);
    background: var(--lg-surface);
    color: var(--lg-text);
    font-weight: 600;
    box-shadow: var(--lg-edge-soft), 0 1px 2px rgba(12, 50, 36, 0.06);
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--lg-dur-1) var(--lg-spring),
        box-shadow var(--lg-dur-2) var(--lg-ease),
        background var(--lg-dur-2) var(--lg-ease),
        border-color var(--lg-dur-2) var(--lg-ease),
        opacity var(--lg-dur-2);
}

body.lg .btn:active {
    transform: scale(0.96);
}

body.lg .btn:disabled,
body.lg .btn[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

body.lg .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--lg-brand-soft);
}

body.lg .btn-sm {
    padding: 7px 14px;
    font-size: 13px;
}

body.lg .btn-lg {
    padding: 15px 30px;
    font-size: 16px;
}

body.lg .btn-primary,
body.lg .btn-primary:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 52%),
        linear-gradient(150deg, var(--lg-brand-hi), var(--lg-brand-lo));
    border-color: rgba(255, 255, 255, 0.34);
    color: var(--lg-text-on-tint);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10),
        var(--lg-shadow-tint);
}

body.lg .btn-danger,
body.lg .btn-danger:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 52%),
        linear-gradient(150deg, #f87171, #dc2626);
    border-color: rgba(255, 255, 255, 0.30);
    color: var(--lg-text-on-tint);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10),
        0 6px 18px rgba(239, 68, 68, 0.30);
}

body.lg .btn-warning,
body.lg .btn-warning:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 52%),
        linear-gradient(150deg, #fbbf24, #d97706);
    border-color: rgba(255, 255, 255, 0.30);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10),
        0 6px 18px rgba(245, 158, 11, 0.30);
}

body.lg .btn-success,
body.lg .btn-success:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 52%),
        linear-gradient(150deg, var(--lg-brand-hi), var(--lg-brand-lo));
    border-color: rgba(255, 255, 255, 0.34);
    color: var(--lg-text-on-tint);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), var(--lg-shadow-tint);
}

body.lg .btn-secondary {
    background: var(--lg-fill);
    color: var(--lg-text);
}

body.lg .btn-outline {
    background: transparent;
    border: 1.5px solid var(--lg-hairline);
    box-shadow: none;
    color: var(--lg-text);
}

@media (hover: hover) {
    body.lg .btn:not(.btn-primary):not(.btn-danger):not(.btn-warning):not(.btn-success):hover {
        background: var(--lg-surface-hi);
        border-color: var(--lg-brand);
        color: var(--lg-brand-ink);
    }

    body.lg .btn-primary:hover {
        filter: brightness(1.06);
    }
}

/* ============================================================
   徽章：半透明着色胶囊
   ============================================================ */
body.lg .badge {
    padding: 3px 11px;
    border-radius: var(--lg-r-pill);
    font-size: 12px;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body.lg .badge-primary,
body.lg .badge-success { background: var(--lg-brand-soft); color: var(--lg-brand-ink); }
body.lg .badge-danger { background: var(--lg-danger-soft); color: var(--lg-danger-ink); }
body.lg .badge-warning { background: var(--lg-warn-soft); color: var(--lg-warn-ink); }
body.lg .badge-info { background: var(--lg-info-soft); color: var(--lg-info-ink); }
body.lg .badge-secondary { background: var(--lg-fill-2); color: var(--lg-text-2); }
body.lg .badge-purple { background: var(--lg-violet-soft); color: var(--lg-violet-ink); }

body.lg .avatar {
    background: var(--lg-fill-2);
    color: var(--lg-text-2);
    box-shadow: var(--lg-edge-soft);
}

/* ============================================================
   表单：凹陷的清透输入框，聚焦时亮起品牌色光环
   ============================================================ */
body.lg .form-label {
    color: var(--lg-text-2);
    font-weight: 600;
}

body.lg .form-input,
body.lg .form-select,
body.lg .form-control,
body.lg textarea.form-input {
    background: var(--lg-fill);
    border: 1px solid var(--lg-hairline);
    border-radius: var(--lg-r-md);
    color: var(--lg-text);
    box-shadow: inset 0 1px 2px rgba(12, 50, 36, 0.07);
    transition: border-color var(--lg-dur-2) var(--lg-ease), background var(--lg-dur-2) var(--lg-ease), box-shadow var(--lg-dur-2) var(--lg-ease);
}

body.lg .form-input:focus,
body.lg .form-select:focus,
body.lg .form-control:focus {
    outline: none;
    background: var(--lg-surface-hi);
    border-color: var(--lg-brand);
    box-shadow: 0 0 0 4px var(--lg-brand-soft);
}

body.lg .form-input::placeholder,
body.lg .form-control::placeholder {
    color: var(--lg-text-3);
}

body.lg .form-hint {
    color: var(--lg-text-3);
}

body.lg input[type="checkbox"],
body.lg input[type="radio"] {
    accent-color: var(--lg-brand);
}

/* 移动端输入框字号 ≥ 16px，否则 iOS Safari 聚焦时会自动放大页面 */
@media (max-width: 991.98px) {
    body.lg .form-input,
    body.lg .form-select,
    body.lg .form-control,
    body.lg textarea.form-input {
        font-size: 16px;
    }
}

/* ============================================================
   提示框：着色玻璃
   ============================================================ */
body.lg .alert {
    border: 1px solid var(--lg-rim);
    border-radius: var(--lg-r-md);
    background: var(--lg-surface);
    box-shadow: var(--lg-edge-soft);
}

body.lg .alert-info { background: linear-gradient(var(--lg-info-soft), var(--lg-info-soft)), var(--lg-surface); }
body.lg .alert-success { background: linear-gradient(var(--lg-brand-soft), var(--lg-brand-soft)), var(--lg-surface); }
body.lg .alert-warning { background: linear-gradient(var(--lg-warn-soft), var(--lg-warn-soft)), var(--lg-surface); }
body.lg .alert-danger { background: linear-gradient(var(--lg-danger-soft), var(--lg-danger-soft)), var(--lg-surface); }

body.lg .alert-title { color: var(--lg-text); }
body.lg .alert-text { color: var(--lg-text-2); }
body.lg .alert-info i { color: var(--lg-info); }
body.lg .alert-success i { color: var(--lg-brand); }
body.lg .alert-warning i { color: var(--lg-warn); }
body.lg .alert-danger i { color: var(--lg-danger); }

body.lg .alert-warning .alert-title { color: var(--lg-warn-ink); }
body.lg .alert-danger .alert-title { color: var(--lg-danger-ink); }
body.lg .alert-warning .alert-text,
body.lg .alert-danger .alert-text { color: var(--lg-text-2); }

/* ============================================================
   统计块 / 图标底
   ============================================================ */
body.lg .stat-card-label { color: var(--lg-text-3); }
body.lg .stat-card-value { color: var(--lg-text); letter-spacing: -0.3px; }

body.lg .stat-card-icon,
body.lg .quick-action-icon,
body.lg .list-item-icon {
    border-radius: var(--lg-r-md);
    box-shadow: var(--lg-edge-soft);
}

body.lg .stat-card-icon.green,
body.lg .quick-action-icon.green { background: var(--lg-brand-soft); color: var(--lg-brand-ink); }
body.lg .stat-card-icon.blue,
body.lg .quick-action-icon.blue { background: var(--lg-info-soft); color: var(--lg-info-ink); }
body.lg .stat-card-icon.orange,
body.lg .quick-action-icon.orange { background: var(--lg-warn-soft); color: var(--lg-warn-ink); }
body.lg .stat-card-icon.red,
body.lg .quick-action-icon.red { background: var(--lg-danger-soft); color: var(--lg-danger-ink); }
body.lg .stat-card-icon.purple,
body.lg .quick-action-icon.purple { background: var(--lg-violet-soft); color: var(--lg-violet-ink); }

/* ============================================================
   快捷入口
   ============================================================ */
body.lg .quick-action {
    background: var(--lg-surface);
    border: 1px solid var(--lg-rim);
    border-radius: var(--lg-r-lg);
    box-shadow: var(--lg-edge-soft), var(--lg-shadow-1);
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--lg-dur-1) var(--lg-spring), box-shadow var(--lg-dur-2) var(--lg-ease);
}

body.lg .quick-action:active {
    transform: scale(0.96);
}

@media (hover: hover) {
    body.lg .quick-action:hover {
        transform: translateY(-3px);
        box-shadow: var(--lg-edge-soft), var(--lg-shadow-2);
    }
}

/* ============================================================
   列表 / 表格 / 空状态 / 进度 / 开关
   ============================================================ */
body.lg .list-item {
    border-bottom: 1px solid var(--lg-hairline);
}

body.lg .list-item:hover {
    background: var(--lg-fill);
}

body.lg .list-item-icon {
    background: var(--lg-fill-2);
    color: var(--lg-text-2);
}

body.lg .table th {
    background: var(--lg-fill);
    color: var(--lg-text-2);
}

body.lg .table th,
body.lg .table td {
    border-color: var(--lg-hairline);
}

body.lg .empty-state {
    color: var(--lg-text-3);
}

body.lg .progress-bar {
    height: 8px;
    border-radius: var(--lg-r-pill);
    background: var(--lg-fill-2);
    box-shadow: inset 0 1px 2px rgba(12, 50, 36, 0.10);
    overflow: hidden;
}

body.lg .progress-fill {
    border-radius: var(--lg-r-pill);
    background: linear-gradient(90deg, var(--lg-brand-hi), var(--lg-brand-lo));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.lg .toggle {
    background: var(--lg-fill-2);
    box-shadow: inset 0 1px 2px rgba(12, 50, 36, 0.12);
}

body.lg .toggle.active {
    background: linear-gradient(150deg, var(--lg-brand-hi), var(--lg-brand-lo));
}

body.lg .search-bar {
    background: var(--lg-fill);
    border-radius: var(--lg-r-pill);
    box-shadow: inset 0 1px 2px rgba(12, 50, 36, 0.07);
}

body.lg .search-bar input {
    color: var(--lg-text);
}

body.lg .text-primary { color: var(--lg-brand-ink); }
body.lg .text-danger { color: var(--lg-danger-ink); }
body.lg .text-warning { color: var(--lg-warn-ink); }
body.lg .text-muted { color: var(--lg-text-3); }

/* [hidden] 属性要真的隐藏（组件的 display 设置不能盖掉它） */
body.lg .btn[hidden], body.lg .lg-chip[hidden], body.lg .lg-tip[hidden], body.lg .ck-tip[hidden], body.lg .lg-bulkbar[hidden] { display: none; }