/**
 * 灵休 · 液态玻璃 —— 新增组件（lg-*）
 * 旧类名里没有的组件放这里。类名一律 lg- 开头；完整示例见 ui/liquid-glass/index.html。
 *
 * 目录：分段控件 · 分组列表 · 状态标签 · 小节标题 · 进度环 · 步骤条 · 精度条 · 任务卡 · 取景框 · 底部操作条
 */

/* ============================================================
   分段控件 .lg-segment（旧的 .mobile-view-tabs 同样适用）
   激活项由 glass.js 插入的镜片 .lg-segment__lens 滑动指示。
   ============================================================ */
.lg-segment,
body.lg .mobile-view-tabs {
    position: relative;
    display: flex;
    padding: 4px;
    border-radius: var(--lg-r-pill);
    background: var(--lg-fill);
    box-shadow: inset 0 1px 2px rgba(12, 50, 36, 0.08);
}

.lg-segment__item {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--lg-r-pill);
    background: transparent;
    color: var(--lg-text-2);
    font-size: var(--lg-fs-call);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--lg-dur-2) var(--lg-ease), transform var(--lg-dur-1) var(--lg-spring);
}

.lg-segment__item:active {
    transform: scale(0.95);
}

.lg-segment__item.active {
    color: var(--lg-brand-ink);
}

.lg-segment__lens {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: var(--seg-w, 0);
    transform: translateX(var(--seg-x, 0));
    border-radius: var(--lg-r-pill);
    background: var(--lg-lens);
    box-shadow: var(--lg-edge), 0 3px 10px rgba(12, 50, 36, 0.14);
    opacity: 0;
    pointer-events: none;
    transition:
        transform var(--lg-dur-3) var(--lg-spring),
        width var(--lg-dur-3) var(--lg-spring),
        opacity var(--lg-dur-2);
}

.is-ready > .lg-segment__lens {
    opacity: 1;
}

.is-init > .lg-segment__lens {
    transition: none;
}

/* 镜片接管后，激活项自己不再画底色（避免双层） */
body.lg .mobile-view-tabs > .mobile-view-tab {
    position: relative;
    z-index: 1;
}

body.lg .mobile-view-tabs.is-ready > .mobile-view-tab.active {
    background: transparent;
    box-shadow: none;
}

/* ============================================================
   分组列表 .lg-list / .lg-row（iOS “inset grouped” 风格）
   <div class="lg-list"><a class="lg-row">…</a></div>
   ============================================================ */
.lg-list {
    border-radius: var(--lg-r-lg);
    background: var(--lg-surface);
    border: 1px solid var(--lg-rim);
    box-shadow: var(--lg-edge-soft), var(--lg-shadow-1);
    overflow: hidden;
}

.lg-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 10px 16px;
    color: var(--lg-text);
    text-decoration: none;
    position: relative;
}

/* 分隔线从图标右侧开始，不通到最左边（iOS 习惯） */
.lg-row + .lg-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 66px;
    right: 0;
    height: 1px;
    background: var(--lg-hairline);
}

.lg-row__icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    background: linear-gradient(150deg, var(--lg-brand-hi), var(--lg-brand-lo));
}

.lg-row__icon--blue { background: linear-gradient(150deg, #60a5fa, #2563eb); }
.lg-row__icon--orange { background: linear-gradient(150deg, #fbbf24, #d97706); }
.lg-row__icon--red { background: linear-gradient(150deg, #f87171, #dc2626); }
.lg-row__icon--violet { background: linear-gradient(150deg, #a78bfa, #7c3aed); }
.lg-row__icon--gray { background: linear-gradient(150deg, #94a3b8, #64748b); }

.lg-row__body {
    flex: 1 1 auto;
    min-width: 0;
}

.lg-row__title {
    font-size: var(--lg-fs-body);
    font-weight: 600;
}

.lg-row__sub {
    margin-top: 1px;
    font-size: var(--lg-fs-foot);
    color: var(--lg-text-3);
}

.lg-row__value {
    flex: none;
    font-size: var(--lg-fs-call);
    color: var(--lg-text-3);
}

a.lg-row::after {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--lg-text-3);
    opacity: 0.7;
}

/* ============================================================
   小节标题（列表/卡片组上方的小字标签）
   ============================================================ */
.lg-section-title {
    margin: 22px 8px 8px;
    font-size: var(--lg-fs-foot);
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--lg-text-3);
}

/* ============================================================
   状态标签 .lg-chip：带圆点的小胶囊，用于“待打卡/已打卡/已截止…”
   颜色类：--ok --wait --warn --danger --info --mute
   ============================================================ */
.lg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 9px;
    border-radius: var(--lg-r-pill);
    font-size: 12px;
    font-weight: 700;
    background: var(--lg-fill-2);
    color: var(--lg-text-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.lg-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.lg-chip--ok { background: var(--lg-brand-soft); color: var(--lg-brand-ink); }
.lg-chip--wait { background: var(--lg-info-soft); color: var(--lg-info-ink); }
.lg-chip--warn { background: var(--lg-warn-soft); color: var(--lg-warn-ink); }
.lg-chip--danger { background: var(--lg-danger-soft); color: var(--lg-danger-ink); }
.lg-chip--info { background: var(--lg-violet-soft); color: var(--lg-violet-ink); }

/* “进行中”的圆点轻轻呼吸，提示需要现在处理（同屏最多 1 个） */
.lg-chip--live::before {
    animation: lg-pulse 1.8s ease-in-out infinite;
}

@keyframes lg-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.7); }
}

/* ============================================================
   进度环 .lg-ring（SVG：r=40，周长 251.33；用 stroke-dashoffset 表示进度）
   <div class="lg-ring"><svg viewBox="0 0 100 100"><circle class="lg-ring__track" …/><circle class="lg-ring__bar" … style="--p:0.75"/></svg><div class="lg-ring__label">…</div></div>
   ============================================================ */
.lg-ring {
    position: relative;
    width: var(--ring-size, 92px);
    height: var(--ring-size, 92px);
    flex: none;
}

.lg-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.lg-ring__track,
.lg-ring__bar {
    fill: none;
    stroke-width: 9;
}

.lg-ring__track {
    stroke: var(--lg-fill-2);
}

.lg-ring__bar {
    stroke: url(#lg-ring-grad) var(--lg-brand);
    stroke-linecap: round;
    stroke-dasharray: 251.33;
    stroke-dashoffset: calc(251.33 * (1 - var(--p, 0)));
    animation: lg-ring-in 1.1s var(--lg-ease) 0.2s backwards;
}

@keyframes lg-ring-in {
    from { stroke-dashoffset: 251.33; }
}

.lg-ring__label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    text-align: center;
}

.lg-ring__label b {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.lg-ring__label span {
    margin-top: 2px;
    font-size: 11px;
    opacity: 0.8;
}

/* ============================================================
   步骤条 .lg-steps：打卡流程“定位 → 人脸 → 拍照 → 提交”
   每个 .lg-step 状态：is-done / is-current / 默认待办
   ============================================================ */
.lg-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.lg-step {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lg-text-3);
    text-align: center;
}

.lg-step__dot {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--lg-fill-2);
    color: var(--lg-text-3);
    box-shadow: var(--lg-edge-soft);
    transition: background var(--lg-dur-3) var(--lg-ease), color var(--lg-dur-2), transform var(--lg-dur-3) var(--lg-spring);
}

/* 步骤之间的连接线 */
.lg-step + .lg-step::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 50%;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: var(--lg-fill-2);
}

.lg-step.is-done + .lg-step::before,
.lg-step.is-current::before {
    background: linear-gradient(90deg, var(--lg-brand-hi), var(--lg-brand));
}

.lg-step.is-done .lg-step__dot {
    background: linear-gradient(150deg, var(--lg-brand-hi), var(--lg-brand-lo));
    color: #fff;
}

.lg-step.is-current {
    color: var(--lg-text);
}

.lg-step.is-current .lg-step__dot {
    background: var(--lg-surface-hi);
    color: var(--lg-brand-ink);
    box-shadow: 0 0 0 4px var(--lg-brand-soft), var(--lg-edge);
    transform: scale(1.12);
}

/* ============================================================
   精度条 .lg-meter：定位精度“当前 ±N 米 / 需优于 M 米”
   --v：0~1 的当前精度达标度；--ok 达标时加 is-ok，不达标加 is-bad
   ============================================================ */
.lg-meter {
    padding: 14px 16px;
    border-radius: var(--lg-r-md);
    background: var(--lg-fill);
    box-shadow: inset 0 1px 2px rgba(12, 50, 36, 0.06);
}

.lg-meter__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: var(--lg-fs-call);
    color: var(--lg-text-2);
}

.lg-meter__head b {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--lg-text);
}

.lg-meter__track {
    position: relative;
    height: 8px;
    border-radius: var(--lg-r-pill);
    background: var(--lg-fill-2);
    overflow: hidden;
}

.lg-meter__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--v, 0) * 100%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--lg-warn), #fbbf24);
    transition: width var(--lg-dur-3) var(--lg-spring), background var(--lg-dur-2);
}

.lg-meter.is-ok .lg-meter__fill {
    background: linear-gradient(90deg, var(--lg-brand-hi), var(--lg-brand-lo));
}

.lg-meter.is-bad .lg-meter__fill {
    background: linear-gradient(90deg, #f87171, var(--lg-danger));
}

/* ============================================================
   任务卡 .lg-task：学生打卡页的一条打卡任务
   <article class="lg-task is-open"> 头部（标题+状态标签）/ 时间窗 / 所需步骤 / 操作按钮
   状态修饰类：is-open（可打卡，高亮边）is-done is-closed
   ============================================================ */
.lg-task {
    position: relative;
    padding: 18px 18px 16px;
    border-radius: var(--lg-r-lg);
    background: var(--lg-surface);
    border: 1px solid var(--lg-rim);
    box-shadow: var(--lg-edge-soft), var(--lg-shadow-1);
}

.lg-task + .lg-task {
    margin-top: 14px;
}

.lg-task.is-open {
    box-shadow:
        var(--lg-edge-soft),
        0 0 0 2px var(--lg-brand-soft),
        var(--lg-shadow-2);
}

.lg-task.is-closed {
    opacity: 0.72;
}

.lg-task__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.lg-task__title {
    font-size: var(--lg-fs-head);
    font-weight: 700;
    letter-spacing: -0.2px;
}

.lg-task__time {
    margin-top: 4px;
    font-size: var(--lg-fs-call);
    color: var(--lg-text-2);
    font-variant-numeric: tabular-nums;
}

.lg-task__time small {
    color: var(--lg-text-3);
    font-size: var(--lg-fs-foot);
}

.lg-task__needs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}

.lg-task__need {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--lg-r-pill);
    background: var(--lg-fill);
    color: var(--lg-text-2);
    font-size: 12px;
    font-weight: 600;
}

.lg-task__action {
    margin-top: 16px;
}

.lg-task__action .btn {
    width: 100%;
}

/* ============================================================
   取景框 .lg-camera：人脸/拍照取景，四角括号 + 底部提示胶囊
   ============================================================ */
.lg-camera {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--lg-r-xl);
    overflow: hidden;
    background: #0b1512;
    box-shadow: var(--lg-edge), var(--lg-shadow-2);
}

.lg-camera video,
.lg-camera img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lg-camera__frame {
    position: absolute;
    top: 14%;
    left: 14%;
    right: 14%;
    bottom: 22%;
    border-radius: 42%;
    box-shadow: 0 0 0 100vmax rgba(8, 20, 16, 0.42);
    border: 2px solid rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

.lg-camera__hint {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    padding: 9px 18px;
    border-radius: var(--lg-r-pill);
    background: rgba(14, 28, 22, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: var(--lg-fs-call);
    font-weight: 600;
    white-space: nowrap;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .lg-camera__hint {
        -webkit-backdrop-filter: var(--lg-blur-soft);
        backdrop-filter: var(--lg-blur-soft);
    }
}

/* ============================================================
   底部操作条 .lg-actionbar：表单页底部固定的主操作，浮在悬浮导航之上
   ============================================================ */
.lg-actionbar {
    position: sticky;
    bottom: calc(var(--lg-tabbar-h) + var(--lg-tabbar-gap) + var(--safe-bottom) + 12px);
    z-index: 5;
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding: 10px;
    border-radius: var(--lg-r-pill);
}

.lg-actionbar .btn {
    flex: 1 1 0;
}

@media (min-width: 992px) {
    .lg-actionbar {
        bottom: 20px;
    }
}

/* ============================================================
   开关 .lg-switch（iOS 风格）
   <label class="lg-switch"><input type="checkbox" checked><i></i></label>
   轨道 52×32；按下时旋钮横向拉长；选中变品牌绿。input 本身不可见但可聚焦、可读屏。
   （旧的 .toggle + .active 写法仍然保留给老页面，新页面一律用 lg-switch）
   ============================================================ */
.lg-switch {
    position: relative;
    display: inline-block;
    flex: none;
    width: 52px;
    height: 32px;
    vertical-align: middle;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lg-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.lg-switch i {
    position: absolute;
    inset: 0;
    border-radius: var(--lg-r-pill);
    background: var(--lg-fill-2);
    box-shadow: inset 0 1px 3px rgba(12, 50, 36, 0.18), inset 0 0 0 1px var(--lg-hairline);
    transition: background var(--lg-dur-2) var(--lg-ease), box-shadow var(--lg-dur-2) var(--lg-ease);
    pointer-events: none;
}

.lg-switch i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: linear-gradient(180deg, #ffffff, #f1f5f3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.06);
    transition: transform var(--lg-dur-3) var(--lg-spring), width var(--lg-dur-2) var(--lg-spring);
}

.lg-switch input:active + i::after {
    width: 32px;
}

.lg-switch input:checked + i {
    background: linear-gradient(150deg, var(--lg-brand-hi), var(--lg-brand-lo));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 4px 12px rgba(16, 185, 129, 0.3);
}

.lg-switch input:checked + i::after {
    transform: translateX(20px);
}

.lg-switch input:checked:active + i::after {
    transform: translateX(14px);
}

.lg-switch input:focus-visible + i {
    outline: 2px solid var(--lg-brand);
    outline-offset: 2px;
}

.lg-switch input:disabled + i {
    opacity: 0.45;
}

/* ============================================================
   滑块 .lg-range（原生 <input type="range"> 的玻璃版）
   <input class="lg-range" type="range" min="0" max="100" value="40" style="--v:40%">
   --v 由 glass-ui.js 自动同步为已选部分的百分比（填充色用）；不加脚本也能用，只是没有填充色。
   ============================================================ */
.lg-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 32px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    --v: 50%;
    -webkit-tap-highlight-color: transparent;
}

.lg-range:focus {
    outline: none;
}

.lg-range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: var(--lg-r-pill);
    background: linear-gradient(90deg, var(--lg-brand-hi), var(--lg-brand)) 0 / var(--v) 100% no-repeat, var(--lg-fill-2);
    box-shadow: inset 0 1px 2px rgba(12, 50, 36, 0.14);
}

.lg-range::-moz-range-track {
    height: 8px;
    border-radius: var(--lg-r-pill);
    background: var(--lg-fill-2);
    box-shadow: inset 0 1px 2px rgba(12, 50, 36, 0.14);
}

.lg-range::-moz-range-progress {
    height: 8px;
    border-radius: var(--lg-r-pill);
    background: linear-gradient(90deg, var(--lg-brand-hi), var(--lg-brand));
}

.lg-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    margin-top: -10px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff, #eef3f1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.06);
    transition: transform var(--lg-dur-2) var(--lg-spring), box-shadow var(--lg-dur-2) var(--lg-ease);
}

.lg-range::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff, #eef3f1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.lg-range:active::-webkit-slider-thumb {
    transform: scale(1.18);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.36);
}

.lg-range:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--lg-brand);
    outline-offset: 2px;
}

/* 滑块旁边的数值：<span class="lg-range__val">80 m</span> */
.lg-range-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 220px;
}

.lg-range__val {
    flex: none;
    min-width: 56px;
    text-align: right;
    font-size: var(--lg-fs-call);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--lg-text);
}

/* ============================================================
   悬浮加号按钮 .lg-fab：手机上“新建”的主入口，固定在悬浮导航右上方
   <button class="lg-fab lg-tint" aria-label="新建"><i class="fas fa-plus"></i></button>
   桌面端不显示（桌面端页面标题行里已经有主按钮）。
   ============================================================ */
body.lg .lg-fab {
    position: fixed;
    right: 18px;
    bottom: calc(var(--lg-tabbar-h) + var(--lg-tabbar-gap) + var(--safe-bottom, 0px) + 16px);
    z-index: calc(var(--lg-z-tabbar) - 10);
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--lg-dur-3) var(--lg-spring);
    -webkit-tap-highlight-color: transparent;
}

body.lg .lg-fab i {
    transition: transform var(--lg-dur-3) var(--lg-spring);
}

body.lg .lg-fab:active {
    transform: scale(0.88);
}

body.lg .lg-fab:active i {
    transform: rotate(90deg);
}

@media (min-width: 992px) {
    body.lg .lg-fab {
        display: none;
    }
}

/* 提示条：警告 / 错误 / 成功（打卡流程、表单校验共用） */
.lg-tip { padding: 10px 12px; border-radius: var(--lg-r-sm); background: var(--lg-warn-soft); color: var(--lg-warn-ink); font-size: var(--lg-fs-call); }
.lg-tip.is-bad { background: var(--lg-danger-soft); color: var(--lg-danger-ink); }
.lg-tip.is-ok { background: var(--lg-brand-soft); color: var(--lg-brand-ink); }

/* 文字链接按钮（行内的次要操作，如“撤回说明”“查看明细”） */
.lg-link, .ck-link { border: 0; background: none; padding: 6px 2px; font: inherit; font-size: var(--lg-fs-call); color: var(--lg-brand-ink); cursor: pointer; }
.lg-link:disabled, .ck-link:disabled { color: var(--lg-text-3); cursor: default; }

/* ---------- 单行省略（表格里的长文本）与弹层底部按钮组 ---------- */
.lg-clamp {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lg-modal-actions {
    display: flex;
    gap: var(--lg-s-3);
    margin-top: var(--lg-s-5);
}
.lg-modal-actions > .btn { flex: 1; }
.lg-required { color: var(--lg-danger-ink); }
.modal-content.lg-modal-md { max-width: 600px; }
.lg-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--lg-s-4);
}
@media (max-width: 700px) {
    .lg-form-grid { grid-template-columns: 1fr; }
}
.lg-inline { display: flex; align-items: center; gap: var(--lg-s-2); }
.lg-inline > .form-input,
.lg-inline > .form-select { flex: 1; }
/* 一张卡片里分多段时，后面的标题行与上一段拉开距离 */
.lg-card > .lg-card__head:not(:first-child) { margin-top: var(--lg-s-6); }
.lg-form-grid--4 { grid-template-columns: repeat(4, 1fr); }
.lg-form-grid__end { align-self: end; }
@media (max-width: 992px) {
    .lg-form-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .lg-form-grid--4 { grid-template-columns: 1fr; }
}
.lg-modal-actions--wrap { flex-wrap: wrap; margin-top: 0; }
.lg-modal-actions--wrap > .btn { flex: none; }
.lg-toolbar__grow { flex: 1; min-width: 200px; margin-bottom: 0; }
.lg-profile-head {
    display: flex;
    align-items: center;
    gap: var(--lg-s-4);
    margin-bottom: var(--lg-s-4);
}
.lg-loadmore { padding: var(--lg-s-4); text-align: center; color: var(--lg-text-3); }

/* 通用进度条（下载、备份等）：<div class="lg-progress"><i style="width:40%"></i></div> */
.lg-progress {
    height: 10px;
    margin: var(--lg-s-3) 0;
    border-radius: var(--lg-r-pill);
    background: var(--lg-fill-2);
    overflow: hidden;
}
.lg-progress > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--lg-brand-hi), var(--lg-brand));
    transition: width var(--lg-dur-2) var(--lg-ease);
}
.lg-pager { display: flex; gap: var(--lg-s-3); align-items: center; margin-top: var(--lg-s-3); color: var(--lg-text-2); }
.lg-code-wrap { word-break: break-all; }
.lg-text-danger { color: var(--lg-danger-ink); }
.lg-text-ok { color: var(--lg-brand-ink); }
.lg-text-warn { color: var(--lg-warn-ink); }
.lg-pre { white-space: pre-wrap; max-width: 360px; font-family: inherit; margin: 0 0 var(--lg-s-3); }
.modal-content.lg-modal-sm { max-width: 480px; }
.modal-content.lg-modal-lg { max-width: 860px; }
.lg-modal-actions--end { justify-content: flex-end; }
.lg-modal-actions--end > .btn { flex: none; }
.lg-actions { display: flex; flex-wrap: wrap; gap: var(--lg-s-2); justify-content: flex-end; }
.lg-stack { display: flex; flex-direction: column; gap: var(--lg-s-4); }
.lg-actions--start { justify-content: flex-start; }
.lg-link { color: var(--lg-brand-ink); font-weight: 600; text-decoration: none; }
.lg-doc {
    max-height: 500px;
    overflow-y: auto;
    padding: var(--lg-s-5);
    background: var(--lg-fill);
    border-radius: var(--lg-r-sm);
    line-height: 1.8;
}
/* 表格操作列（桌面）：按钮不换行，整列按内容撑开；手机上表格变卡片，按钮可换行 */
@media (min-width: 701px) {
    .lg-table td.lg-col-end > .lg-actions { flex-wrap: nowrap; }
}

/* ============================================================
   玻璃下拉选择 .lg-select（assets/js/lx/glass-select.js 自动把 <select> 升级成它）
   触发器沿用原控件的 class（form-select 等）和内联样式，所以宽度、间距规则照旧生效。
   ============================================================ */
.lg-select {
    display: inline-flex;
    align-items: center;
    gap: var(--lg-s-2);
    position: relative;
    vertical-align: top;
    box-sizing: border-box;
    min-height: 44px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.lg-select.is-hidden { display: none; }
.lg-select__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lg-select.is-placeholder .lg-select__label { color: var(--lg-text-3); }
.lg-select__arrow {
    flex: none;
    font-size: 11px;
    color: var(--lg-text-3);
    transition: transform var(--lg-dur-2) var(--lg-ease);
}
.lg-select.is-open .lg-select__arrow { transform: rotate(180deg); }
.lg-select:focus { outline: none; }
.lg-select:focus-visible,
.lg-select.is-open {
    outline: none;
    background: var(--lg-surface-hi);
    border-color: var(--lg-brand);
    box-shadow: 0 0 0 4px var(--lg-brand-soft);
}
.lg-select.is-disabled { opacity: 0.55; cursor: not-allowed; }
.lg-select__native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* 侧栏 / 手机顶栏的班级切换：胶囊样式，沿用它们自带的箭头图标 */
.lg-select--plain {
    width: 100%;
    min-height: 0;
    padding: 10px 36px 10px 16px;
    border: 0;
    border-radius: var(--lg-r-pill);
    background: var(--lg-fill);
    color: var(--lg-text);
    box-shadow: var(--lg-edge-soft);
    font-size: 14px;
    font-weight: 500;
}
.mobile-class-switcher .lg-select--plain {
    width: auto;
    max-width: 200px;
    padding: 8px 28px 8px 14px;
    font-size: 15px;
    font-weight: 600;
}
.lg-select--plain .lg-select__arrow { display: none; }
.lg-select--plain:focus-visible,
.lg-select--plain.is-open { box-shadow: 0 0 0 3px var(--lg-brand-soft); }

/* 弹出列表（桌面：悬浮在触发器下方；手机：底部面板） */
.lg-select-pop {
    position: fixed;
    z-index: var(--lg-z-dropdown);
    box-sizing: border-box;
    border-radius: var(--lg-r-md);
    padding: 6px;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition: opacity var(--lg-dur-1) var(--lg-ease), transform var(--lg-dur-2) var(--lg-spring);
}
.lg-select-pop.is-up { transform: translateY(6px) scale(0.98); transform-origin: bottom center; }
.lg-select-pop.is-in { opacity: 1; transform: none; }
.lg-select-pop__list {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.lg-select__group {
    padding: 10px 12px 4px;
    font-size: var(--lg-fs-cap);
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--lg-text-3);
}
.lg-select__opt {
    display: flex;
    align-items: center;
    gap: var(--lg-s-3);
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--lg-r-xs);
    font-size: var(--lg-fs-call);
    color: var(--lg-text);
    cursor: pointer;
    transition: background var(--lg-dur-1) var(--lg-ease);
}
.lg-select__opt.is-grouped { padding-left: 20px; }
.lg-select__opt.is-empty .lg-select__optlabel { color: var(--lg-text-3); }
.lg-select__optlabel { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lg-select__check { flex: none; font-size: 12px; color: var(--lg-brand-ink); opacity: 0; }
.lg-select__opt.is-selected { font-weight: 600; }
.lg-select__opt.is-selected .lg-select__check { opacity: 1; }
.lg-select__opt.is-active { background: var(--lg-brand-soft); }
.lg-select__opt.is-disabled { opacity: 0.45; cursor: not-allowed; }

.lg-select-pop.is-sheet {
    left: var(--lg-s-3);
    right: var(--lg-s-3);
    top: auto;
    bottom: calc(var(--lg-s-3) + env(safe-area-inset-bottom, 0px));
    max-height: 62vh;
    border-radius: var(--lg-r-lg);
    padding: var(--lg-s-2) var(--lg-s-2) var(--lg-s-3);
    transform: translateY(24px);
    transform-origin: bottom center;
    z-index: calc(var(--lg-z-dropdown) + 1);
}
.lg-select-pop.is-sheet.is-in { transform: none; }
.lg-select-pop.is-sheet { background: var(--lg-glass-solid); }
.lg-select-pop.is-sheet .lg-select-pop__list { max-height: calc(62vh - 70px); }
.lg-select-pop.is-sheet .lg-select__opt { min-height: 48px; font-size: var(--lg-fs-body); }
.lg-select-pop__handle {
    width: 36px;
    height: 5px;
    margin: 4px auto 8px;
    border-radius: var(--lg-r-pill);
    background: var(--lg-fill-2);
}
.lg-select-pop__title {
    padding: 0 12px 8px;
    font-size: var(--lg-fs-foot);
    font-weight: 600;
    color: var(--lg-text-3);
    text-align: center;
}
.lg-select-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--lg-z-dropdown);
    background: var(--lg-scrim);
    opacity: 0;
    transition: opacity var(--lg-dur-2) var(--lg-ease);
}
.lg-select-scrim.is-in { opacity: 1; }