/* ============================================================
   课时云记 · 产品演示页（/demo）镜头专属样式
   命名规则：s0-* 为第 0 镜（开场），s1-* 为第 1 镜……以此类推；
   ph-* 为手机外壳，pc-* 为电脑窗口外壳，mp-* 为微信小程序通用组件
   所有坐标均按 1280×720 的舞台逻辑尺寸书写
   ============================================================ */

/* ============ S0 开场 ============ */
.s0-core {
    position: absolute;
    left: 610px;
    top: 146px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #a5b4fc 36%, rgba(99, 102, 241, 0) 70%);
    opacity: 0;
    visibility: hidden;
}

.s0-ring {
    position: absolute;
    left: 540px;
    top: 76px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid rgba(165, 180, 252, .85);
    box-shadow: 0 0 24px rgba(129, 140, 248, .6) inset;
    opacity: 0;
    visibility: hidden;
}

.s0-flash {
    position: absolute;
    left: 440px;
    top: -24px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(165, 180, 252, .55) 30%, rgba(99, 102, 241, 0) 68%);
    opacity: 0;
    visibility: hidden;
}

.s0-rays {
    position: absolute;
    left: 640px;
    top: 176px;
    width: 0;
    height: 0;
}

.s0-ray {
    position: absolute;
    left: -1px;
    top: -210px;
    width: 2px;
    height: 80px;
    border-radius: 2px;
    transform-origin: 1px 210px;
    background: linear-gradient(to top, rgba(165, 180, 252, 0), #c7d2fe);
    opacity: 0;
    visibility: hidden;
}

.s0-logo {
    position: absolute;
    left: 565px;
    top: 101px;
    width: 150px;
    height: 150px;
    opacity: 0;
    visibility: hidden;
}

.s0-logo::before {
    content: '';
    position: absolute;
    left: -60px;
    top: -60px;
    right: -60px;
    bottom: -60px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(99, 102, 241, .55), rgba(99, 102, 241, 0));
}

.s0-logo img {
    position: relative;
    display: block;
    width: 150px;
    height: 150px;
    filter: drop-shadow(0 16px 30px rgba(37, 99, 235, .55));
}

.s0-title {
    position: absolute;
    left: 0;
    top: 262px;
    width: 1280px;
    text-align: center;
    font-size: 92px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 12px;
    padding-left: 12px;
    color: #fff;
    text-shadow: 0 0 46px rgba(129, 140, 248, .85), 0 6px 30px rgba(8, 12, 48, .8);
}

.s0-title .ch {
    display: inline-block;
    opacity: 0;
    visibility: hidden;
}

.s0-line {
    position: absolute;
    left: 520px;
    top: 378px;
    width: 240px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0), #818cf8 30%, #22d3ee 70%, rgba(34, 211, 238, 0));
    transform: scaleX(0);
    opacity: 0;
    visibility: hidden;
}

.s0-tag {
    position: absolute;
    left: 0;
    top: 398px;
    width: 1280px;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 8px;
    padding-left: 8px;
    color: #c7d2fe;
}

.s0-chips {
    position: absolute;
    left: 0;
    top: 470px;
    width: 1280px;
    display: flex;
    justify-content: center;
    gap: 16px;
}

.s0-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    border-radius: 999px;
    font-size: 19px;
    font-weight: 600;
    color: #e0e7ff;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(165, 180, 252, .38);
    box-shadow: 0 10px 28px -10px rgba(2, 6, 40, .8);
}

.s0-chip i {
    font-size: 18px;
}

.s0-chip .c1 { color: #818cf8; }
.s0-chip .c2 { color: #34d399; }
.s0-chip .c3 { color: #22d3ee; }
.s0-chip .c4 { color: #c4b5fd; }

/* ============ S1 痛点：杂乱 → 井然有序 ============ */
.s1-card {
    position: absolute;
    background: #fff;
    color: #0f172a;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 26px 52px -14px rgba(2, 6, 40, .8), 0 0 0 1px rgba(255, 255, 255, .08);
    opacity: 0;
    visibility: hidden;
}

/* 痛点一：Excel 登记表 */
.s1-excel { left: 120px; top: 150px; width: 300px; }

.xl-bar {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: #1f7a45;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.xl-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.xl-tab th { height: 26px; background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b; font-weight: 600; text-align: center; }
.xl-tab td { height: 35px; border: 1px solid #e2e8f0; color: #334155; text-align: center; }
.xl-tab td:first-child { width: 30px; background: #f8fafc; color: #94a3b8; }
.xl-tab .bad { background: #fee2e2; color: #dc2626; font-weight: 700; }
.xl-tab .err { background: #fef3c7; color: #b45309; font-weight: 700; }

/* 痛点二：家长群聊 */
.s1-chat { left: 515px; top: 112px; width: 250px; background: #ededed; }

.ch-head {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: #f7f7f7;
    border-bottom: 1px solid #dcdcdc;
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

.ch-badge {
    margin-left: auto;
    min-width: 30px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #f43f5e;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.ch-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 10px 16px; }
.ch-msg { display: flex; align-items: flex-start; gap: 8px; }
.ch-msg.r { flex-direction: row-reverse; }

.ch-msg .av {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.av.a1 { background: #fb923c; }
.av.a2 { background: #38bdf8; }
.av.a3 { background: #a78bfa; }
.av.t { background: #4f46e5; }

.ch-msg p {
    margin: 0;
    max-width: 164px;
    padding: 7px 10px;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    line-height: 1.45;
    color: #111;
}

.ch-msg.r p { background: #95ec69; }

/* 痛点三：便签纸 */
.s1-notes { position: absolute; left: 860px; top: 128px; width: 310px; height: 310px; }

.note {
    position: absolute;
    width: 150px;
    padding: 16px 12px 14px;
    border-radius: 3px;
    font-family: "Kaiti SC", "KaiTi", "STKaiti", "Segoe Print", "Comic Sans MS", cursive;
    font-size: 20px;
    line-height: 1.35;
    color: #3b2f0b;
    box-shadow: 0 16px 28px -10px rgba(0, 0, 0, .65);
    opacity: 0;
    visibility: hidden;
}

.note::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    width: 46px;
    height: 16px;
    margin-left: -23px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .5);
}

.note.n1 { left: 4px; top: 8px; background: #fde68a; }
.note.n2 { left: 150px; top: 100px; background: #fda4af; color: #7f1d1d; }
.note.n3 { left: 26px; top: 188px; background: #bae6fd; color: #0c4a6e; }

/* 报警 / 正向标签 */
.s1-alert,
.s1-good {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: scale(.7);
}

.s1-alert {
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #f43f5e);
    box-shadow: 0 12px 26px -8px rgba(244, 63, 94, .85);
}

.s1-alert.amber {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    box-shadow: 0 12px 26px -8px rgba(245, 158, 11, .85);
}

.s1-good {
    color: #064e3b;
    background: #a7f3d0;
    box-shadow: 0 12px 26px -8px rgba(16, 185, 129, .75);
}

.s1-goodrow {
    position: absolute;
    top: 464px;
    display: flex;
    justify-content: center;
}

.s1-goodrow .s1-good { position: static; }

/* 整齐态一：学员课时档案卡 */
.s1-stu { left: 120px; top: 150px; width: 300px; height: 262px; padding: 18px 20px; }
.st-top { display: flex; align-items: center; gap: 12px; }

.st-av {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #22d3ee);
}

.st-name { font-size: 19px; font-weight: 800; line-height: 1.2; }
.st-sub { display: flex; gap: 6px; margin-top: 4px; }
.st-top .ok { margin-left: auto; font-size: 22px; color: #10b981; }
.st-big { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; }
.st-big em { font-style: normal; font-size: 68px; font-weight: 800; line-height: 1; color: #4f46e5; font-variant-numeric: tabular-nums; }
.st-big span { font-size: 16px; color: #64748b; }
.st-bar { height: 10px; margin-top: 14px; border-radius: 5px; background: #e2e8f0; overflow: hidden; }
.st-bar i { display: block; width: 40%; height: 100%; border-radius: 5px; transform-origin: 0 50%; background: linear-gradient(90deg, #6366f1, #22d3ee); }
.st-meta { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; color: #64748b; }
.st-meta b { color: #0f172a; }

/* 整齐态二：家长小程序课时流水 */
.s1-mini {
    left: 530px;
    top: 112px;
    width: 220px;
    height: 330px;
    border-radius: 30px;
    padding: 8px;
    background: #0b1020;
    box-shadow: 0 26px 52px -14px rgba(2, 6, 40, .85), 0 0 0 2px #27304f;
}

.mn-scr { height: 100%; border-radius: 23px; background: #f8fafc; overflow: hidden; }
.mn-head { padding: 12px 14px 10px; font-size: 14px; font-weight: 800; background: #fff; border-bottom: 1px solid #e2e8f0; }
.mn-head small { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; color: #94a3b8; }
.mn-row { display: flex; align-items: center; gap: 10px; margin: 8px 10px 0; padding: 9px 10px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
.mn-row b { min-width: 38px; font-size: 19px; font-weight: 800; text-align: center; }
.mn-row b.neg { color: #f43f5e; }
.mn-row b.pos { color: #10b981; }
.mn-row p { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.3; color: #0f172a; }
.mn-row small { font-size: 10px; color: #94a3b8; }

/* 整齐态三：排课日历 */
.s1-cal { left: 860px; top: 150px; width: 300px; height: 262px; padding: 14px 14px 12px; }
.cl-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 800; }
.cl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.cl-grid .wk { font-size: 12px; font-weight: 700; text-align: center; color: #94a3b8; }
.cl-grid .cell { height: 54px; border-radius: 8px; background: #f1f5f9; }

.cl-chip {
    height: 54px;
    padding: 6px 7px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.cl-chip small { display: block; font-size: 10px; font-weight: 500; opacity: .9; }
.cl-chip.c1 { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.cl-chip.c2 { background: linear-gradient(135deg, #059669, #10b981); }
.cl-chip.c3 { background: linear-gradient(135deg, #d97706, #f59e0b); }
.cl-chip.c4 { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.cl-chip.c5 { background: linear-gradient(135deg, #e11d48, #fb7185); }

/* ============ S2 四端协同总览 ============ */
.s2-svg { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: visible; }
.s2-link { fill: none; stroke: url(#s2g1); stroke-width: 3; stroke-linecap: round; }
.s2-flow { fill: none; stroke: #e0e7ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 15; opacity: 0; }
.s2-pk { opacity: 0; visibility: hidden; }

.s2-hub { position: absolute; left: 550px; top: 220px; width: 180px; height: 180px; opacity: 0; visibility: hidden; }

.s2-hub-ring {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 2px solid rgba(34, 211, 238, .7);
    opacity: 0;
    visibility: hidden;
}

.s2-hub-core {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 28%, #4338ca, #1e1b4b 78%);
    box-shadow: 0 0 0 2px rgba(165, 180, 252, .55), 0 0 64px rgba(99, 102, 241, .85), inset 0 0 30px rgba(34, 211, 238, .35);
}

.s2-hub-core img { width: 106px; height: 106px; }

.s2-hub-label {
    position: absolute;
    left: -40px;
    right: -40px;
    top: 196px;
    text-align: center;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #c7d2fe;
    opacity: 0;
    visibility: hidden;
}

.s2-node {
    position: absolute;
    width: 280px;
    height: 140px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
    border: 1px solid rgba(165, 180, 252, .42);
    box-shadow: 0 24px 48px -16px rgba(2, 6, 40, .85);
    opacity: 0;
    visibility: hidden;
}

.s2-node.pc { left: 110px; top: 120px; }
.s2-node.tc { left: 110px; top: 360px; }
.s2-node.ai { left: 890px; top: 120px; }
.s2-node.pa { left: 890px; top: 360px; }

.nd-top { display: flex; align-items: center; gap: 12px; }

.nd-ico {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.nd-ico.c1 { background: linear-gradient(135deg, #4f46e5, #818cf8); }
.nd-ico.c2 { background: linear-gradient(135deg, #059669, #34d399); }
.nd-ico.c3 { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.nd-ico.c4 { background: linear-gradient(135deg, #7c3aed, #c4b5fd); }

.nd-title { font-size: 22px; font-weight: 800; line-height: 1.2; color: #fff; }
.nd-role { margin-top: 3px; font-size: 14px; color: #a9b6dc; }
.nd-chips { display: flex; flex-wrap: nowrap; gap: 5px; margin-top: 14px; }

.nd-chip {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
    color: #dbe4ff;
    background: rgba(99, 102, 241, .24);
    border: 1px solid rgba(165, 180, 252, .3);
}

.nd-badge {
    position: absolute;
    right: -10px;
    top: -16px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    color: #052e1f;
    background: #6ee7b7;
    box-shadow: 0 10px 24px -6px rgba(16, 185, 129, .8);
    white-space: nowrap;
}

.s2-lab {
    position: absolute;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    background: rgba(15, 23, 42, .94);
    border: 1px solid rgba(34, 211, 238, .6);
    box-shadow: 0 8px 22px -6px rgba(2, 6, 40, .9);
    opacity: 0;
    visibility: hidden;
}

/* ============ S3 PC 管理后台 ============ */
/* 注意：窗口根节点类名用 pcw，不能叫 pc——S2 的四端节点已使用 .s2-node.pc，同名会互相污染样式 */
.pcw {
    position: absolute;
    left: 90px;
    top: 64px;
    width: 1100px;
    height: 520px;
    border-radius: 14px;
    overflow: hidden;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 40px 90px -24px rgba(2, 6, 40, .9), 0 0 0 1px rgba(255, 255, 255, .12);
    opacity: 0;
    visibility: hidden;
}

.pc-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #e2e8f0; }
.pc-bar .d { width: 11px; height: 11px; border-radius: 50%; }
.pc-bar .d.r { background: #ef4444; }
.pc-bar .d.y { background: #f59e0b; }
.pc-bar .d.g { background: #10b981; }

.pc-url {
    margin-left: 16px;
    width: 420px;
    height: 22px;
    padding: 0 12px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 22px;
    white-space: nowrap;
    color: #64748b;
    background: #f8fafc;
}

.pc-url i { margin-right: 6px; font-size: 11px; color: #10b981; }

.pc-body { display: flex; height: 486px; }

/* 侧边栏 */
.pc-side { display: flex; flex: 0 0 168px; flex-direction: column; width: 168px; color: #cbd5e1; background: #0f172a; }

.pc-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 52px;
    height: 52px;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.pc-brand img { width: 26px; height: 26px; }

.pc-menu { position: relative; flex: 0 0 auto; padding: 10px 0; }

.pc-act {
    position: absolute;
    left: 0;
    top: 10px;
    width: 100%;
    height: 42px;
    background: linear-gradient(90deg, rgba(99, 102, 241, .62), rgba(99, 102, 241, .08));
    border-left: 3px solid #a5b4fc;
}

.pc-mi { position: relative; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; font-size: 14px; color: #cbd5e1; }
.pc-mi.on { color: #fff; }
.pc-mi i { width: 18px; text-align: center; font-size: 14px; color: #a5b4fc; }

.pc-qr {
    margin: auto 14px 14px;
    padding: 9px 8px 10px;
    border-radius: 10px;
    text-align: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
}

.pc-qr b { display: block; font-size: 12px; font-weight: 700; color: #e2e8f0; }
.pc-qr img { display: block; width: 72px; height: 72px; margin: 7px auto 0; padding: 3px; border-radius: 6px; background: #fff; }
.pc-qr small { display: block; margin-top: 6px; font-size: 11px; color: #94a3b8; }

/* 主区域 */
.pc-main { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }

.pc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 44px;
    height: 44px;
    padding: 0 18px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

.pc-crumbs { position: relative; width: 360px; height: 44px; }
.pc-crumbs span { position: absolute; left: 0; top: 0; font-size: 15px; font-weight: 800; line-height: 44px; white-space: nowrap; }
.pc-crumbs span em { margin-right: 8px; font-size: 12px; font-style: normal; font-weight: 500; color: #94a3b8; }

.pc-user { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748b; }

.pc-user b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #22d3ee);
}

.pc-views { position: relative; flex: 1 1 auto; }
.pc-view { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 14px 16px; opacity: 0; visibility: hidden; }

/* 通用小按钮 */
.pbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    background: #4f46e5;
}

.pbtn.ghost { color: #475569; background: #fff; border: 1px solid #e2e8f0; }
.pbtn.green { background: #10b981; }
.pbtn.cyan { background: #0ea5e9; }
.pbtn.amber { background: #f59e0b; }
.pbtn.red { background: #dc2626; }
.pbtn.sm { height: 22px; padding: 0 9px; font-size: 12px; }

/* 统计卡片行（控制台 / 统计页共用） */
.ps-row { display: flex; gap: 10px; }

.ps-card {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    gap: 10px;
    height: 62px;
    padding: 0 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

.ps-ic { display: flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; font-size: 16px; color: #fff; }
.ps-ic.c1 { background: linear-gradient(135deg, #4f46e5, #818cf8); }
.ps-ic.c2 { background: linear-gradient(135deg, #059669, #34d399); }
.ps-ic.c3 { background: linear-gradient(135deg, #d97706, #fbbf24); }
.ps-ic.c4 { background: linear-gradient(135deg, #e11d48, #fb7185); }
.ps-ic.c5 { background: linear-gradient(135deg, #475569, #94a3b8); }

.ps-card b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; color: #0f172a; font-variant-numeric: tabular-nums; }
.ps-card b em { font-style: normal; }
.ps-card b small { margin-left: 3px; font-size: 12px; font-weight: 500; color: #64748b; }
.ps-card span { font-size: 12px; color: #64748b; }

/* 排课日历面板 */
.cal { position: relative; height: 338px; margin-top: 12px; overflow: hidden; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 14px; border-bottom: 1px solid #f1f5f9; font-size: 14px; font-weight: 800; }
.cal-head small { margin-left: 8px; font-size: 12px; font-weight: 500; color: #94a3b8; }
.cal-tools { display: flex; align-items: center; gap: 6px; }
.cal-tools .pbtn { height: 24px; padding: 0 9px; }

.cal-main { display: flex; gap: 12px; padding: 8px 12px 10px; }
.cal-left { flex: 0 0 628px; width: 628px; }

/* 防撞课提示条：三种状态叠放切换 */
.cal-bn { position: relative; height: 30px; margin-bottom: 6px; }

.cal-bn > div {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
}

.cal-bn b { font-weight: 800; }
.cal-bn .ok { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
.cal-bn .ok i { color: #16a34a; }
.cal-bn .bad { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
.cal-bn .bad i { color: #ef4444; }
.cal-bn .bad .pbtn { height: 22px; margin-left: auto; background: #dc2626; }
.cal-bn .bad .pbtn i { color: #fff; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 18px repeat(4, 52px); gap: 4px; }
.cal-wd { font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; color: #94a3b8; }

.cal-c {
    position: relative;
    padding: 3px 5px;
    overflow: hidden;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0);
}

.cal-c.sel { background: #eff6ff; box-shadow: inset 0 0 0 2px #3b82f6; }
.cal-c > b { display: inline-block; height: 14px; margin-left: -3px; padding: 0 4px; border-radius: 7px; font-size: 11px; font-weight: 700; line-height: 14px; color: #64748b; }
.cal-c.today > b { color: #fff; background: #10b981; }
.cal-c.dim > b { color: #cbd5e1; }
.cal-warn { position: absolute; right: 5px; top: 2px; font-size: 12px; color: #dc2626; }
.cal-add { position: absolute; right: 3px; top: 2px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; font-size: 9px; color: #2563eb; background: #dbeafe; }

.cal-ev {
    position: relative;
    display: block;
    height: 15px;
    margin-top: 1px;
    padding: 0 5px;
    overflow: hidden;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    white-space: nowrap;
    color: #fff;
}

.cal-ev .t1 { display: block; }
.cal-ev .t2 { position: absolute; left: 5px; top: 0; }
.ev-i { background: #6366f1; }
.ev-g { background: #10b981; }
.ev-a { background: #f59e0b; }
.ev-c { background: #06b6d4; }
.ev-r { background: #f43f5e; }
.ev-v { background: #8b5cf6; }

/* 右侧当日课程详情（两天的内容叠放切换） */
.cal-right { flex: 1 1 auto; min-width: 0; padding: 10px 11px; border-radius: 8px; background: #f8fafc; border: 1px solid #eef2f7; }
.cd-h { position: relative; height: 22px; font-size: 14px; font-weight: 800; line-height: 22px; }
.cd-h .dh { position: absolute; left: 0; top: 0; white-space: nowrap; }
.cd-h em { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 700; color: #fff; background: #10b981; }
.cd-body { position: relative; height: 230px; margin-top: 8px; }
.cd-g { position: absolute; left: 0; top: 0; width: 100%; }

.cd-item {
    position: relative;
    margin-bottom: 8px;
    padding: 8px 10px 8px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #8b5cf6;
}

.cd-item.n { border-left-color: #6366f1; }
.cd-item.g { border-left-color: #10b981; }
.cd-item b { display: block; font-size: 13px; font-weight: 800; }
.cd-item p { height: 16px; margin: 3px 0 0; font-size: 11px; line-height: 16px; color: #64748b; }
.cd-item p.tl { position: relative; }
.cd-item p.tl span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.cd-tag { position: absolute; right: 8px; top: 8px; width: 60px; height: 22px; }
.cd-tag .dm-tag { position: absolute; right: 0; top: 0; }

/* 遮罩与弹窗 */
.s3-mask { position: absolute; left: 90px; top: 64px; width: 1100px; height: 520px; border-radius: 14px; background: rgba(15, 23, 42, .52); z-index: 20; }

.s3-modal,
.s3-wiz,
.s3-rc {
    position: absolute;
    border-radius: 12px;
    font-size: 13px;
    color: #0f172a;
    background: #fff;
    box-shadow: 0 30px 70px -10px rgba(2, 6, 40, .88);
    z-index: 30;
}

.s3-modal { left: 444px; top: 118px; width: 560px; }
.s3-wiz { left: 394px; top: 132px; width: 660px; }
.s3-rc { left: 524px; top: 150px; width: 400px; }

.m-head { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 18px; border-bottom: 1px solid #eef2f7; font-size: 15px; font-weight: 800; }
.m-head i { color: #94a3b8; }
.m-body { padding: 14px 18px 4px; }
.m-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px 14px; }
.m-foot .pbtn { height: 30px; padding: 0 16px; font-size: 13px; }

/* 添加课程：模板卡片 */
.m-tpl { position: relative; margin-bottom: 12px; padding: 10px 12px; border-radius: 8px; background: #f0fdf4; border: 1px dashed #86efac; }
.m-tl { margin-bottom: 6px; font-size: 13px; font-weight: 800; color: #15803d; }
.m-sel { position: relative; height: 34px; padding: 0 12px; border-radius: 6px; background: #fff; border: 1px solid #cbd5e1; font-size: 13px; line-height: 32px; white-space: nowrap; }
.m-sel .m-ph { display: block; font-size: 12px; color: #94a3b8; }
.m-sel .val { position: absolute; left: 12px; top: 0; font-weight: 700; color: #0f172a; }
.m-sel .val em { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-style: normal; color: #4f46e5; background: #eef2ff; }
.m-hint { margin-top: 7px; font-size: 12px; line-height: 1.5; color: #15803d; }

.m-dd { position: absolute; left: 12px; right: 12px; top: 74px; z-index: 5; padding: 4px; border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 16px 30px -8px rgba(15, 23, 42, .4); }
.m-dd .o { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.m-dd .o small { font-size: 11px; font-weight: 500; color: #94a3b8; }
.m-dd .o.on { color: #4f46e5; background: #eef2ff; }

.m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; margin-bottom: 12px; }
.m-f > label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; color: #475569; }
.m-in { position: relative; height: 34px; padding: 0 12px; border-radius: 6px; background: #f8fafc; border: 1px solid #e2e8f0; line-height: 32px; }
.m-in .v { position: absolute; left: 12px; top: 0; font-weight: 700; white-space: nowrap; }
.m-stu { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; padding: 6px 8px; border-radius: 6px; background: #f8fafc; border: 1px dashed #cbd5e1; }

/* 冲突解决向导 */
.wz-h { padding: 14px 18px 10px; border-bottom: 1px solid #eef2f7; }
.wz-h b { display: block; font-size: 15px; font-weight: 800; color: #b91c1c; }
.wz-h span { display: block; margin-top: 3px; font-size: 12px; color: #94a3b8; }
.wz-c { margin: 14px 18px 18px; padding: 14px; border-radius: 8px; background: #fff; border: 1px solid #fecaca; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.wz-t { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wz-t b { font-size: 13px; font-weight: 700; color: #b91c1c; }
.wz-t span { font-size: 12px; color: #64748b; }
.wz-t em { margin-right: 6px; padding: 1px 8px; border-radius: 8px; font-size: 11px; font-style: normal; font-weight: 700; color: #fff; background: #ef4444; }
.wz-2 { display: flex; }
.wz-2 > div { flex: 1 1 0; padding: 0 4px 2px; }
.wz-2 > div + div { padding-left: 16px; border-left: 1px dashed #e2e8f0; }
.wz-2 b { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: #1e293b; }
.wz-2 p { margin: 0; font-size: 12px; line-height: 1.7; color: #64748b; }
.wz-2 p i { width: 14px; margin-right: 4px; color: #94a3b8; }
.wz-2 .pbtn { margin-top: 8px; height: 24px; border-radius: 12px; }

/* 充值课时弹窗 */
.rc-body { padding: 14px 18px 4px; }
.rc-cur { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; font-size: 12px; color: #64748b; background: #f8fafc; }
.rc-cur b { font-size: 20px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.rc-body label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: #475569; }
.rc-q { display: flex; gap: 8px; margin-bottom: 10px; }
.rc-q span { flex: 1 1 0; height: 30px; border-radius: 6px; font-size: 13px; font-weight: 700; line-height: 28px; text-align: center; color: #475569; background: #fff; border: 1px solid #cbd5e1; }
.rc-q span.on { color: #fff; background: #10b981; border-color: #10b981; }
.rc-in { position: relative; height: 40px; padding: 0 12px; border-radius: 8px; background: #fff; border: 2px solid #6366f1; font-size: 18px; font-weight: 800; line-height: 36px; }
.rc-in span { position: absolute; left: 12px; top: 0; white-space: nowrap; }
.rc-in .p0 { font-size: 13px; font-weight: 500; color: #94a3b8; }
.rc-in .p1 { color: #4f46e5; }
.rc-pv { position: relative; height: 22px; margin-top: 8px; font-size: 12px; color: #64748b; }
.rc-pv span { position: absolute; left: 0; top: 0; line-height: 22px; white-space: nowrap; }
.rc-pv b { color: #059669; }

/* 表格（点名 / 统计 / 学员共用） */
.pnl { position: relative; overflow: hidden; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; }
.pnl-h { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; border-bottom: 1px solid #f1f5f9; font-size: 14px; font-weight: 800; }
.pnl-h small { margin-left: 8px; font-size: 12px; font-weight: 500; color: #94a3b8; }
.pnl-h .tools { display: flex; gap: 8px; }
.tb { overflow: hidden; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; }
.pnl .tb { border: 0; border-radius: 0; }
.tb-row { position: relative; display: flex; align-items: center; height: 46px; padding: 0 14px; border-top: 1px solid #f1f5f9; font-size: 13px; }
.tb-row.th { height: 38px; border-top: 0; font-size: 12px; font-weight: 700; color: #64748b; background: #f8fafc; }
.tb-row > * { position: relative; }
.tb-row .rbg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #eef2ff; opacity: 0; }

.ck { position: relative; display: block; flex: 0 0 17px; box-sizing: border-box; width: 17px; height: 17px; border-radius: 4px; background: #fff; border: 2px solid #cbd5e1; }
.ck i { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 9px; color: #fff; opacity: 0; }

.pav { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; margin-right: 9px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; }
.pav.a1 { background: linear-gradient(135deg, #4f46e5, #818cf8); }
.pav.a2 { background: linear-gradient(135deg, #e11d48, #fb7185); }
.pav.a3 { background: linear-gradient(135deg, #059669, #34d399); }
.pav.a4 { background: linear-gradient(135deg, #d97706, #fbbf24); }
.pav.a5 { background: linear-gradient(135deg, #0891b2, #22d3ee); }

.cn { display: flex; align-items: center; font-weight: 700; }
.stk { position: relative; width: 80px; height: 22px; }
.stk > span { position: absolute; left: 0; top: 0; }
.num { font-weight: 800; font-variant-numeric: tabular-nums; }
.mut { color: #94a3b8; }
.dis { opacity: .4; }

/* 课程管理：左课程列表 + 右报名学员 */
.v2-wrap { display: flex; gap: 12px; height: 100%; }
.v2-l { flex: 0 0 440px; width: 440px; }
.v2-r { flex: 1 1 auto; min-width: 0; }
.lc-n { flex: 0 0 126px; font-weight: 700; }
.lc-t { flex: 0 0 56px; }
.lc-s { flex: 0 0 88px; color: #64748b; }
.lc-q { flex: 0 0 50px; color: #64748b; }
.lc-o { flex: 1 1 auto; text-align: right; }
.rk-ck { flex: 0 0 34px; }
.rk-n { flex: 0 0 104px; }
.rk-h { flex: 0 0 56px; }
.rk-t { flex: 0 0 100px; color: #94a3b8; }
.rk-s { flex: 1 1 auto; }
.empty-tip { position: absolute; left: 0; right: 0; top: 150px; text-align: center; font-size: 13px; color: #94a3b8; }
.empty-tip i { display: block; margin-bottom: 8px; font-size: 26px; color: #cbd5e1; }

/* 消课统计 */
.fbx { display: flex; align-items: center; gap: 10px; height: 42px; margin-bottom: 10px; padding: 0 12px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; }
.seg { display: inline-flex; overflow: hidden; border-radius: 6px; border: 1px solid #e2e8f0; }
.seg span { height: 26px; padding: 0 10px; font-size: 12px; line-height: 26px; color: #475569; background: #fff; white-space: nowrap; }
.seg span + span { border-left: 1px solid #e2e8f0; }
.seg span.on { color: #fff; background: #4f46e5; }
.seg span.ar { padding: 0 9px; color: #94a3b8; background: #f8fafc; }
.seg span.mo { min-width: 78px; text-align: center; font-weight: 700; color: #0f172a; }
.fbx .exp { margin-left: auto; height: 28px; }
.tb.t3 { margin-top: 12px; }
.t3-n { flex: 0 0 200px; }
.t3-b { flex: 0 0 250px; }
.t3-c { flex: 0 0 150px; }
.t3-d { flex: 0 0 170px; }
.t3-s { flex: 1 1 auto; }
.bar { position: relative; display: inline-block; width: 140px; height: 8px; margin-right: 10px; overflow: hidden; vertical-align: middle; border-radius: 4px; background: #e2e8f0; }
.bar u { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #6366f1, #22d3ee); transform-origin: 0 50%; }

/* 学员管理 */
.v4-top { display: flex; align-items: center; gap: 8px; height: 30px; margin-bottom: 12px; }
.v4-top .sch { display: inline-flex; align-items: center; gap: 6px; width: 220px; height: 28px; margin-left: auto; padding: 0 10px; border-radius: 6px; font-size: 12px; color: #94a3b8; background: #fff; border: 1px solid #e2e8f0; }
.t4-no { flex: 0 0 78px; color: #94a3b8; }
.t4-c { flex: 0 0 124px; }
.t4-n { flex: 0 0 92px; font-weight: 700; }
.t4-p { flex: 0 0 110px; color: #64748b; }
.t4-m { flex: 0 0 126px; color: #64748b; }
.t4-h { flex: 0 0 90px; }
.t4-s { flex: 0 0 84px; }
.t4-o { flex: 1 1 auto; }

/* ============ 手机外壳与微信小程序通用组件（S4 / S5 共用） ============ */
.ph {
    position: absolute;
    box-sizing: border-box;
    isolation: isolate;
    width: 262px;
    height: 536px;
    padding: 7px;
    border-radius: 40px;
    background: linear-gradient(150deg, #2e3764, #0c1126 52%, #1a2147);
    box-shadow: 0 46px 90px -24px rgba(2, 6, 40, .95), 0 0 0 1.5px rgba(165, 180, 252, .38), inset 0 0 0 1px rgba(255, 255, 255, .1);
    opacity: 0;
    visibility: hidden;
}

.ph-key { position: absolute; width: 3px; border-radius: 2px; background: #3b4575; }
.ph-key.k1 { left: -3px; top: 92px; height: 26px; }
.ph-key.k2 { left: -3px; top: 132px; height: 44px; }
.ph-key.k3 { right: -3px; top: 116px; height: 62px; }

.ph-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 248px;
    height: 522px;
    overflow: hidden;
    border-radius: 33px;
    background: #f4f6fb;
    color: #0f172a;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}

.ph-status {
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 5px 22px 0;
    font-size: 11px;
    font-weight: 800;
    color: #0f172a;
    background: #fff;
}

.ph-sig i { margin-left: 4px; font-size: 10px; }

.ph-notch {
    position: absolute;
    left: 50%;
    top: 7px;
    width: 84px;
    height: 20px;
    margin-left: -42px;
    border-radius: 0 0 14px 14px;
    background: #0c1126;
}

/* 手机变暗遮罩：双手机同屏时，把暂时不操作的那台压暗 */
.ph-dim {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: rgba(8, 12, 40, .5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mp-pages { position: relative; flex: 1 1 auto; overflow: hidden; }
.mp-page { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; background: #f4f6fb; }

.mp-nav { position: relative; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; background: #fff; }
.mp-title { font-size: 14px; font-weight: 800; color: #0f172a; }
.mp-back { position: absolute; left: 12px; top: 12px; font-size: 12px; color: #0f172a; }

.mp-cap {
    position: absolute;
    right: 8px;
    top: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    border: 1px solid #d5dae8;
    font-size: 11px;
    color: #334155;
    background: #fff;
}

.mp-cap u { width: 1px; height: 11px; background: #d5dae8; text-decoration: none; }

.mp-body { position: relative; flex: 1 1 auto; overflow: hidden; }
.mp-card { margin: 8px 8px 0; padding: 9px 10px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }

.mp-sec { display: flex; align-items: center; margin: 10px 12px 0; font-size: 12px; font-weight: 800; color: #0f172a; }
.mp-sec::before { content: ''; flex: 0 0 3px; width: 3px; height: 12px; margin-right: 6px; border-radius: 2px; background: #4f46e5; }
.mp-sec em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 600; color: #4f46e5; }

.mp-pill { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 16px; vertical-align: 1px; }
.mp-pill.indigo { color: #4f46e5; background: #eef2ff; }
.mp-pill.green { color: #15803d; background: #dcfce7; }
.mp-pill.red { color: #dc2626; background: #fee2e2; }
.mp-pill.gray { color: #64748b; background: #f1f5f9; }

.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    height: 24px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    background: #4f46e5;
}

.mp-btn.green { background: #10b981; }
.mp-btn.amber { background: #f59e0b; }
.mp-btn.gray { background: #64748b; }
.mp-btn.sm { height: 20px; padding: 0 9px; border-radius: 10px; font-size: 10px; }
.mp-btn.line { color: #475569; background: #fff; border: 1px solid #cbd5e1; }

.mp-tab { flex: 0 0 46px; display: flex; border-top: 1px solid #e8ebf3; background: #fff; }
.mp-tab span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; color: #94a3b8; }
.mp-tab span i { font-size: 15px; }
.mp-tab span.on { font-weight: 700; color: #4f46e5; }

/* 微信原生弹窗 / 轻提示 / 底部菜单 */
.mp-mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
}

.mp-mask.bt { align-items: flex-end; }
.mp-modal { width: 188px; overflow: hidden; border-radius: 12px; background: #fff; text-align: center; }
.mp-modal h6 { margin: 0; padding: 15px 14px 6px; font-size: 14px; font-weight: 800; color: #0f172a; }
.mp-modal p { margin: 0; padding: 0 14px 13px; font-size: 11.5px; line-height: 1.55; color: #64748b; }
.mp-modal div { display: flex; border-top: 1px solid #eceff5; }
.mp-modal div span { flex: 1; padding: 10px 0; font-size: 13px; font-weight: 700; color: #0f172a; }
.mp-modal div span + span { border-left: 1px solid #eceff5; color: #576b95; }

.mp-toastbox { position: absolute; left: 0; right: 0; top: 70px; z-index: 25; display: flex; justify-content: center; pointer-events: none; }

.mp-toast {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    background: rgba(15, 23, 42, .9);
    opacity: 0;
    visibility: hidden;
}

.mp-toast i { color: #4ade80; }

.mp-sheet { width: 100%; overflow: hidden; border-radius: 12px 12px 0 0; background: #f4f6fb; text-align: center; }
.mp-sheet .sh-tip { padding: 11px 0; font-size: 11px; color: #94a3b8; background: #fff; }
.mp-sheet .sh-it { padding: 12px 0; font-size: 14px; color: #0f172a; background: #fff; border-top: 1px solid #f1f5f9; }
.mp-sheet .sh-gap { height: 6px; }
.mp-sheet .sh-cancel { padding: 12px 0 18px; font-size: 14px; color: #0f172a; background: #fff; }

/* ============ S4 教师端小程序 ============ */
.s4-ph { left: 280px; top: 52px; }

.s4-orb { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(165, 180, 252, .28); opacity: 0; visibility: hidden; }
.s4-orb.o1 { left: 181px; top: 94px; width: 460px; height: 460px; }
.s4-orb.o2 { left: 131px; top: 44px; width: 560px; height: 560px; border-style: solid; border-color: rgba(52, 211, 153, .16); }
.s4-orb i { position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 16px 4px rgba(52, 211, 153, .75); }
.s4-orb.o1 i { background: #22d3ee; box-shadow: 0 0 16px 4px rgba(34, 211, 238, .75); }

/* 右侧：步骤进度轨 + 四张步骤卡 + 课时账本 */
.s4-rail, .s4-rail-fill { position: absolute; left: 621px; top: 104px; width: 2px; height: 276px; border-radius: 1px; opacity: 0; visibility: hidden; }
.s4-rail { background: rgba(165, 180, 252, .25); }
.s4-rail-fill { background: linear-gradient(180deg, #34d399, #22d3ee); box-shadow: 0 0 10px rgba(52, 211, 153, .7); }

.s4-dot { position: absolute; left: 614px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(165, 180, 252, .55); background: #1e2554; opacity: 0; visibility: hidden; }
.s4-dot.d0 { top: 96px; }
.s4-dot.d1 { top: 188px; }
.s4-dot.d2 { top: 280px; }
.s4-dot.d3 { top: 372px; }

.s4-step {
    position: absolute;
    left: 650px;
    width: 540px;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    border-radius: 18px;
    border: 1px solid rgba(165, 180, 252, .35);
    background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
    box-shadow: 0 22px 44px -16px rgba(2, 6, 40, .85);
    opacity: 0;
    visibility: hidden;
}

.s4-step.i0 { top: 64px; }
.s4-step.i1 { top: 156px; }
.s4-step.i2 { top: 248px; }
.s4-step.i3 { top: 340px; }

.s4-no { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; }
.s4-no.c1 { background: linear-gradient(135deg, #4f46e5, #818cf8); }
.s4-no.c2 { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.s4-no.c3 { background: linear-gradient(135deg, #059669, #34d399); }
.s4-no.c4 { background: linear-gradient(135deg, #d97706, #fbbf24); }

.s4-sx { flex: 1; min-width: 0; }
.s4-sx b { display: block; font-size: 21px; font-weight: 800; line-height: 1.25; color: #fff; }
.s4-sx span { display: block; margin-top: 3px; font-size: 14px; color: #aab6dd; }

.s4-res {
    flex: 0 0 auto;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    color: #052e1f;
    white-space: nowrap;
    background: #6ee7b7;
    box-shadow: 0 8px 20px -6px rgba(16, 185, 129, .7);
    opacity: 0;
    visibility: hidden;
}

.s4-res.am { color: #3b2a00; background: #fcd34d; box-shadow: 0 8px 20px -6px rgba(245, 158, 11, .7); }

.s4-led {
    position: absolute;
    left: 650px;
    top: 440px;
    width: 540px;
    height: 138px;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 18px;
    border: 1px solid rgba(34, 211, 238, .4);
    background: rgba(15, 23, 60, .74);
    box-shadow: 0 22px 44px -16px rgba(2, 6, 40, .85);
    opacity: 0;
    visibility: hidden;
}

.s4-lh { display: flex; align-items: center; justify-content: space-between; height: 22px; font-size: 15px; font-weight: 800; color: #e0e7ff; }
.s4-lh i { margin-right: 8px; color: #22d3ee; }
.s4-ls { position: relative; flex: 0 0 270px; height: 20px; }
.s4-ls small { position: absolute; right: 0; top: 0; font-size: 12.5px; font-weight: 700; line-height: 20px; white-space: nowrap; color: #8fa0d0; }
.s4-ls small.l1 { color: #6ee7b7; }
.s4-ls small.l2 { color: #fcd34d; }

.s4-lc { display: flex; gap: 12px; margin-top: 10px; }

.s4-lk {
    position: relative;
    flex: 0 0 92px;
    width: 92px;
    height: 76px;
    box-sizing: border-box;
    padding-top: 9px;
    border-radius: 12px;
    border: 1px solid rgba(165, 180, 252, .28);
    background: rgba(255, 255, 255, .08);
    text-align: center;
    opacity: 0;
    visibility: hidden;
}

.s4-lk span { display: block; font-size: 13px; color: #c7d2fe; }
.s4-lk b { display: block; margin-top: 2px; font-size: 28px; font-weight: 800; line-height: 1.15; color: #fff; }
.s4-lk b::after { content: '课时'; margin-left: 3px; font-size: 12px; font-weight: 600; color: #8fa0d0; }

/* 手机内：工作台页 */
.s4-who { display: flex; align-items: center; gap: 9px; }
.s4-av { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-style: normal; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f59e0b, #f97316); }
.s4-who b { font-size: 13px; font-weight: 800; }
.s4-who small { display: block; margin-top: 2px; font-size: 10px; color: #94a3b8; }
.s4-who .mp-btn { margin-left: auto; height: 22px; padding: 0 9px; font-size: 10px; }

.s4-stats { display: flex; gap: 6px; margin-top: 9px; }
.s4-stat { flex: 1; padding: 6px 0 7px; border-radius: 8px; text-align: center; background: #f8fafc; }
.s4-stat span { display: block; font-size: 10px; color: #94a3b8; }
.s4-stat b { display: block; margin-top: 1px; font-size: 11px; font-weight: 800; }
.s4-stat b em { font-style: normal; font-size: 17px; }
.s4-stat .c1 { color: #4f46e5; }
.s4-stat .c2 { color: #f59e0b; }
.s4-stat .c3 { color: #10b981; }

.s4-grid { display: flex; padding: 9px 2px 8px; }
.s4-gi { flex: 1; text-align: center; font-size: 10.5px; font-weight: 600; color: #334155; }
.s4-gi i { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 auto 4px; border-radius: 50%; font-size: 14px; }
.s4-gi i.c1 { color: #4f46e5; background: #eef2ff; }
.s4-gi i.c2 { color: #10b981; background: #ecfdf5; }
.s4-gi i.c3 { color: #f97316; background: #fff7ed; }
.s4-gi i.c4 { color: #06b6d4; background: #f0fdfa; }

.s4-course { padding: 10px 11px 9px; }
.s4-ct { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 800; }
.s4-hr { padding: 0 7px; border-radius: 9px; font-size: 10px; font-weight: 700; line-height: 18px; color: #4f46e5; background: #eef2ff; }
.s4-cm { margin-top: 5px; font-size: 10.5px; color: #64748b; }
.s4-cm i { width: 15px; color: #94a3b8; }
.s4-cf { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; font-size: 11px; color: #64748b; }
.s4-cf b { font-size: 13px; color: #0f172a; }
.s4-cf i { margin-right: 4px; color: #4f46e5; }

/* 手机内：课程详情页（教师核销工作台） */
.s4-bh1 { display: flex; align-items: center; justify-content: space-between; }
.s4-badge { padding: 0 8px; border-radius: 9px; font-size: 10px; font-weight: 700; line-height: 18px; color: #fff; background: #4f46e5; }
.s4-badge i { margin-right: 3px; font-size: 9px; }
.s4-share { font-size: 10px; color: #4f46e5; }
.s4-bt { margin-top: 6px; font-size: 15px; font-weight: 800; }
.s4-bm { display: flex; gap: 14px; margin-top: 4px; font-size: 10.5px; color: #64748b; }
.s4-bm i { margin-right: 4px; color: #94a3b8; }

.s4-bench { padding: 9px 10px 0; }
.s4-bhd { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 800; }
.s4-bhd > span:first-child::before { content: ''; display: inline-block; width: 3px; height: 12px; margin-right: 6px; vertical-align: -2px; border-radius: 2px; background: #4f46e5; }

.s4-chips { display: flex; flex-wrap: wrap; gap: 4px 5px; margin-top: 8px; }
.s4-chip { padding: 0 7px; border-radius: 9px; font-size: 10px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.s4-chip b { font-weight: 700; }
.s4-chip.t { color: #475569; background: #f1f5f9; }
.s4-chip.d { color: #15803d; background: #dcfce7; }
.s4-chip.p { color: #b45309; background: #fef3c7; }
.s4-chip.s { color: #4f46e5; background: #eef2ff; }

.s4-all { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 11px; font-weight: 700; }
.s4-all-l { display: flex; align-items: center; gap: 7px; }
.s4-all small { font-size: 9.5px; font-weight: 400; color: #94a3b8; }

.s4-cb { position: relative; flex: 0 0 16px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #cbd5e1; background: #fff; font-size: 8px; color: #fff; }
.s4-cb i { opacity: 0; }

.s4-rows { margin-top: 6px; }
.s4-row { display: flex; align-items: center; gap: 8px; height: 38px; border-top: 1px solid #f1f5f9; }
.s4-nm { flex: 1; min-width: 0; }
.s4-nm b { font-size: 12px; font-weight: 800; }
.s4-nm em.cate { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 7px; font-size: 9px; font-style: normal; line-height: 14px; color: #64748b; background: #f1f5f9; vertical-align: 1px; }
.s4-nm small { display: block; font-size: 10px; color: #94a3b8; }
.s4-nm small .lv { font-style: normal; font-weight: 700; color: #4f46e5; }
.s4-nm small .lv.low { color: #ef4444; }

.s4-st { position: relative; flex: 0 0 62px; height: 22px; }
.s4-sb { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 3px; box-sizing: border-box; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.s4-sb.p { color: #4f46e5; background: #eef2ff; }
.s4-sb.d { color: #15803d; background: #dcfce7; opacity: 0; visibility: hidden; }

.s4-foot { flex: 0 0 46px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-top: 1px solid #e8ebf3; background: #fff; }
.s4-foot .mp-btn { flex: 1; height: 28px; padding: 0 2px; border-radius: 14px; font-size: 10px; }
.s4-foot .mp-btn.gray { flex: .62; }

/* ============ S5 家长端小程序 ============ */
.s5-ph.l { left: 206px; top: 52px; }
.s5-ph.r { left: 516px; top: 52px; }

.s5-cap {
    position: absolute;
    left: 840px;
    width: 356px;
    height: 100px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    border-radius: 18px;
    border: 1px solid rgba(196, 181, 253, .35);
    background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
    box-shadow: 0 22px 44px -16px rgba(2, 6, 40, .85);
    opacity: 0;
    visibility: hidden;
}

.s5-cap.i0 { top: 102px; }
.s5-cap.i1 { top: 214px; }
.s5-cap.i2 { top: 326px; }
.s5-cap.i3 { top: 438px; }

.s5-cap-ic { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; }
.s5-cap-ic.c1 { background: linear-gradient(135deg, #7c3aed, #c4b5fd); }
.s5-cap-ic.c2 { background: linear-gradient(135deg, #d97706, #fbbf24); }
.s5-cap-ic.c3 { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.s5-cap-ic.c4 { background: linear-gradient(135deg, #059669, #34d399); }
.s5-cap b { display: block; font-size: 20px; font-weight: 800; line-height: 1.25; color: #fff; }
.s5-cap span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: #aab6dd; }

/* 手机旁的说明气泡（指向手机） */
.s5-call {
    position: absolute;
    left: 22px;
    width: 168px;
    box-sizing: border-box;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(34, 211, 238, .6);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    background: rgba(15, 23, 42, .94);
    box-shadow: 0 12px 28px -8px rgba(2, 6, 40, .9);
    opacity: 0;
    visibility: hidden;
}

.s5-call::after { content: ''; position: absolute; right: -8px; top: 50%; width: 0; height: 0; margin-top: -7px; border-left: 8px solid rgba(34, 211, 238, .6); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.s5-call b { color: #67e8f9; }
.s5-call.red { border-color: rgba(244, 63, 94, .75); }
.s5-call.red::after { border-left-color: rgba(244, 63, 94, .75); }
.s5-call.red b { color: #fda4af; }

/* 手机内：个人中心 */
.s5-prof { display: flex; align-items: center; gap: 9px; }
.s5-av { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-style: normal; font-weight: 800; color: #fff; background: linear-gradient(135deg, #8b5cf6, #c4b5fd); }
.s5-prof b { font-size: 13px; font-weight: 800; }
.s5-prof small { display: block; margin-top: 2px; font-size: 10px; color: #94a3b8; }
.s5-prof .ed { margin-left: auto; font-size: 10px; font-weight: 600; color: #4f46e5; }

.s5-stu { display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
.s5-stu .s5-av { flex-basis: 32px; width: 32px; height: 32px; font-size: 13px; }
.s5-stu.k2 .s5-av { background: linear-gradient(135deg, #f472b6, #fbcfe8); }
.s5-stu .nm b { font-size: 12.5px; font-weight: 800; }
.s5-stu .nm small { display: block; font-size: 10px; color: #94a3b8; }
.s5-stu .hr { margin-left: auto; text-align: right; }
.s5-stu .hr b { display: block; font-size: 14px; font-weight: 800; color: #4f46e5; }
.s5-stu .hr b.low { color: #ef4444; }
.s5-stu .hr small { display: block; margin-top: 1px; font-size: 9px; color: #94a3b8; }

.s5-cells { padding: 2px 10px; }
.s5-cell { display: flex; align-items: center; gap: 8px; height: 34px; border-top: 1px solid #f1f5f9; font-size: 11.5px; font-weight: 600; }
.s5-cell:first-child { border-top: 0; }
.s5-cell > i { width: 16px; text-align: center; font-size: 12px; color: #4f46e5; }
.s5-cell em { margin-left: auto; font-size: 10px; font-style: normal; color: #cbd5e1; }
.s5-cell em.bd { padding: 0 6px; border-radius: 8px; font-weight: 700; line-height: 16px; color: #fff; background: #4f46e5; }

/* 手机内：课时消耗流水 */
.s5-lr { display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
.s5-lic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; background: #f43f5e; }
.s5-lic.add { background: #10b981; }
.s5-lm { flex: 1; min-width: 0; }
.s5-lm .l1 { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; }
.s5-lm .l2 { margin-top: 2px; font-size: 11px; font-weight: 700; }
.s5-lm .l3 { margin-top: 1px; font-size: 9.5px; color: #94a3b8; }
.s5-lm .l3 i { margin-right: 3px; }
.s5-lv { text-align: right; }
.s5-lv b { display: block; font-size: 14px; font-weight: 800; color: #f43f5e; }
.s5-lv b.add { color: #10b981; }
.s5-lv small { display: block; margin-top: 2px; font-size: 9px; color: #94a3b8; }

/* 手机内：机构主页（选课大厅）与课程详情 */
.s5-hero { display: flex; align-items: center; gap: 9px; }
.s5-hero img { width: 36px; height: 36px; border-radius: 10px; }
.s5-hero b { font-size: 13px; font-weight: 800; }
.s5-hero small { display: block; margin-top: 2px; font-size: 10px; color: #94a3b8; }

.s5-cc { padding: 10px 11px 9px; }
.s5-cc .t { font-size: 13px; font-weight: 800; }
.s5-cc .m { margin-top: 5px; font-size: 10.5px; color: #64748b; }
.s5-cc .m b { color: #4f46e5; }
.s5-cc .f { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; font-size: 10.5px; color: #94a3b8; }

.s5-sc { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid #f1f5f9; }
.s5-sc:first-of-type { border-top: 0; }
.s5-sc .s5-av { flex-basis: 30px; width: 30px; height: 30px; font-size: 12px; }
.s5-sc.k2 .s5-av { background: linear-gradient(135deg, #f472b6, #fbcfe8); }
.s5-sc .nm b { font-size: 12px; font-weight: 800; }
.s5-sc .nm small { display: block; font-size: 10px; color: #94a3b8; }
.s5-tagbox { position: relative; flex: 0 0 76px; height: 18px; margin-left: auto; }
.s5-tag { position: absolute; right: 0; top: 0; padding: 0 8px; border-radius: 9px; font-size: 10px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.s5-tag.n { color: #64748b; background: #f1f5f9; }
.s5-tag.y { color: #4f46e5; background: #eef2ff; opacity: 0; visibility: hidden; }

.s5-foot { flex: 0 0 46px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-top: 1px solid #e8ebf3; background: #fff; }
.s5-foot .mp-btn { flex: 1; height: 30px; border-radius: 15px; font-size: 11px; }

/* ============ S6 AI 教务助手 ============ */
/* 左：AI 对话窗口 */
.s6-win {
    position: absolute;
    left: 60px;
    top: 84px;
    width: 700px;
    height: 506px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.5;
    color: #e2e8ff;
    background: linear-gradient(180deg, #141c40, #0b1130);
    border: 1px solid rgba(165, 180, 252, .3);
    box-shadow: 0 40px 90px -24px rgba(2, 6, 40, .9), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}

.s6-bar { flex: 0 0 46px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: rgba(255, 255, 255, .045); border-bottom: 1px solid rgba(165, 180, 252, .16); }
.s6-bar .d { width: 11px; height: 11px; border-radius: 50%; }
.s6-bar .d.r { background: #ef4444; }
.s6-bar .d.y { background: #f59e0b; }
.s6-bar .d.g { background: #10b981; }
.s6-bar-t { margin-left: 12px; font-size: 15px; font-weight: 800; color: #fff; }
.s6-bar-t i { margin-right: 7px; color: #c4b5fd; }
.s6-bar-s { display: flex; align-items: center; gap: 7px; margin-left: auto; font-size: 12.5px; color: #a5b4fc; }
.s6-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 9px #34d399; }

.s6-pages { position: relative; flex: 1 1 auto; }
.s6-page { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 18px 20px 0; opacity: 0; visibility: hidden; }
.s6-msg { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.s6-msg.u { justify-content: flex-end; }

.s6-bub {
    position: relative;
    max-width: 540px;
    padding: 10px 15px;
    border-radius: 14px 14px 4px 14px;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    box-shadow: 0 10px 24px -10px rgba(79, 70, 229, .9);
}

.s6-bub .gh { visibility: hidden; }
.s6-bub .ty { position: absolute; left: 15px; top: 10px; right: 15px; }
.s6-sl { font-weight: 800; color: #a5f3fc; }

.s6-file { display: flex; align-items: center; gap: 11px; padding: 9px 18px 9px 11px; }
.s6-fi { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; background: #16a34a; }
.s6-fn b { display: block; font-size: 15px; line-height: 1.3; }
.s6-fn small { display: block; font-size: 12px; color: #c7d2fe; }

.s6-av { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-style: normal; color: #fff; background: linear-gradient(135deg, #7c3aed, #22d3ee); }
.s6-card { flex: 1 1 auto; min-width: 0; padding: 12px 15px 13px; border-radius: 4px 14px 14px 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(165, 180, 252, .24); }
.s6-ct { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 800; color: #fff; }

.s6-tag { flex: 0 0 auto; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.s6-tag.amber { color: #fcd34d; background: rgba(245, 158, 11, .18); border: 1px solid rgba(245, 158, 11, .45); }
.s6-tag.green { color: #6ee7b7; background: rgba(16, 185, 129, .18); border: 1px solid rgba(16, 185, 129, .45); }
.s6-tag.violet { color: #c4b5fd; background: rgba(139, 92, 246, .2); border: 1px solid rgba(139, 92, 246, .5); }

.s6-ck { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14.5px; color: #dbe4ff; }
.s6-ck i { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #052e1f; background: #34d399; }

.s6-tiles { display: flex; gap: 10px; margin-top: 11px; }
.s6-tile { flex: 1; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(165, 180, 252, .2); }
.s6-tile b { display: block; font-size: 28px; font-weight: 800; line-height: 1.15; color: #67e8f9; }
.s6-tile span { font-size: 12.5px; color: #a9b6dc; }
.s6-tile.t2 b { color: #fcd34d; }
.s6-tile.t3 b { color: #c4b5fd; }

.s6-rows { margin-top: 10px; }
.s6-row { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 4px; border-top: 1px solid rgba(165, 180, 252, .14); font-size: 14.5px; }
.s6-row:first-child { border-top: 0; }
.s6-row b { flex: 0 0 auto; min-width: 46px; font-size: 15px; color: #fff; }
.s6-row span { color: #b6c2e8; }
.s6-row span i { margin-right: 6px; color: #fbbf24; }
.s6-row .v { margin-left: auto; font-weight: 700; color: #e2e8ff; }
.s6-row.warn { margin: 2px -6px 0; padding: 0 10px; border-radius: 8px; border-top-color: transparent; background: rgba(245, 158, 11, .15); box-shadow: inset 3px 0 0 #f59e0b; }
.s6-row.warn .v { color: #fcd34d; }
.s6-more { height: 26px; padding: 0 4px; font-size: 13px; line-height: 26px; color: #8e9bc7; }

.s6-foot { position: relative; height: 36px; margin-top: 10px; }
.s6-ask, .s6-done { position: absolute; left: 0; top: 0; height: 36px; display: flex; align-items: center; gap: 9px; }
.s6-ask .q { margin-right: 4px; font-size: 13.5px; color: #a9b6dc; }
.s6-btn { height: 32px; padding: 0 16px; border-radius: 16px; font-size: 14px; font-weight: 700; line-height: 30px; color: #cbd5f5; background: rgba(255, 255, 255, .08); border: 1px solid rgba(165, 180, 252, .3); }
.s6-btn.pri { color: #fff; background: linear-gradient(135deg, #4f46e5, #0891b2); border-color: transparent; box-shadow: 0 8px 20px -8px rgba(79, 70, 229, .9); }
.s6-done { font-size: 14.5px; font-weight: 700; color: #6ee7b7; }
.s6-done i { margin-right: 8px; }

.s6-input { flex: 0 0 62px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-top: 1px solid rgba(165, 180, 252, .16); background: rgba(255, 255, 255, .03); }
.s6-clip { font-size: 16px; color: #8e9bc7; }
.s6-in { position: relative; flex: 1 1 auto; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 20px; font-size: 14.5px; white-space: nowrap; background: rgba(255, 255, 255, .07); border: 1px solid rgba(165, 180, 252, .26); }
.s6-in-ph { position: absolute; left: 14px; top: 0; line-height: 38px; color: #7f8bb5; }
.s6-slash { padding: 0 9px; border-radius: 6px; font-weight: 800; line-height: 24px; color: #67e8f9; background: rgba(34, 211, 238, .16); border: 1px solid rgba(34, 211, 238, .4); opacity: 0; visibility: hidden; }
.s6-in-t { color: #fff; }
.s6-send { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; background: linear-gradient(135deg, #4f46e5, #6366f1); }

/* 右：能力标签 + AI 助手 → Skill → 机构数据 的调用链路 */
.s6-chips { position: absolute; left: 800px; top: 82px; width: 430px; display: flex; flex-wrap: wrap; gap: 8px; }
.s6-chip { padding: 5px 13px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #cbd5f5; background: rgba(255, 255, 255, .06); border: 1px solid rgba(165, 180, 252, .28); }
.s6-svg { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: visible; }
.s6-link { fill: none; stroke: rgba(165, 180, 252, .7); stroke-width: 3; stroke-linecap: round; }
.s6-pk { opacity: 0; visibility: hidden; }

.s6-node {
    position: absolute;
    left: 800px;
    width: 430px;
    height: 88px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
    border: 1px solid rgba(165, 180, 252, .42);
    box-shadow: 0 24px 48px -16px rgba(2, 6, 40, .85);
}

.s6-node.a { top: 176px; }
.s6-node.b { top: 320px; }
.s6-node.c { top: 464px; }
.s6-node .nd-ico { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
.s6-node b { display: block; font-size: 19px; font-weight: 800; line-height: 1.25; color: #fff; }
.s6-node small { display: block; margin-top: 3px; font-size: 13px; color: #a9b6dc; }
.s6-node .nd-badge.am { color: #422006; background: #fcd34d; box-shadow: 0 10px 24px -6px rgba(245, 158, 11, .8); }

.s6-lab { position: absolute; left: 1042px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; color: #fff; background: rgba(15, 23, 42, .94); box-shadow: 0 8px 22px -6px rgba(2, 6, 40, .9); }
.s6-lab.key { top: 279px; color: #67e8f9; border: 1px solid rgba(34, 211, 238, .65); }
.s6-lab.dry { top: 423px; color: #fcd34d; border: 1px solid rgba(245, 158, 11, .7); }
.s6-lab.wr { top: 423px; color: #6ee7b7; border: 1px solid rgba(16, 185, 129, .7); }

/* ============ S7 业务闭环 ============ */
.s7-svg { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: visible; }
.s7-loop { fill: none; stroke: rgba(103, 232, 249, .8); stroke-width: 2.5; stroke-linecap: round; }
.s7-arw { fill: #67e8f9; }

.s7-rail { position: absolute; left: 160px; top: 298px; width: 960px; height: 5px; border-radius: 3px; background: rgba(165, 180, 252, .16); }
.s7-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 3px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #818cf8, #22d3ee, #34d399); box-shadow: 0 0 16px rgba(34, 211, 238, .75); }

.s7-node {
    position: absolute;
    top: 252px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: #fff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .07), 0 22px 40px -12px rgba(2, 6, 40, .85);
    opacity: 0;
    visibility: hidden;
}

.s7-node.i0 { left: 112px; }
.s7-node.i1 { left: 352px; }
.s7-node.i2 { left: 592px; }
.s7-node.i3 { left: 832px; }
.s7-node.i4 { left: 1072px; }
.s7-node.k1 { background: linear-gradient(135deg, #7c3aed, #c4b5fd); }
.s7-node.k2 { background: linear-gradient(135deg, #4f46e5, #818cf8); }
.s7-node.k3 { background: linear-gradient(135deg, #059669, #34d399); }
.s7-node.k4 { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.s7-node.k5 { background: linear-gradient(135deg, #d97706, #fbbf24); }
.s7-ping { position: absolute; left: -4px; top: -4px; right: -4px; bottom: -4px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); opacity: 0; visibility: hidden; pointer-events: none; }

.s7-card {
    position: absolute;
    top: 112px;
    width: 208px;
    height: 108px;
    padding: 11px 14px 0;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
    border: 1px solid rgba(165, 180, 252, .42);
    box-shadow: 0 22px 44px -16px rgba(2, 6, 40, .85);
    opacity: 0;
    visibility: hidden;
}

.s7-card::after { content: ''; position: absolute; left: 50%; bottom: -30px; width: 2px; height: 28px; margin-left: -1px; background: linear-gradient(rgba(165, 180, 252, .65), rgba(165, 180, 252, 0)); }
.s7-card.i0 { left: 56px; }
.s7-card.i1 { left: 296px; }
.s7-card.i2 { left: 536px; }
.s7-card.i3 { left: 776px; }
.s7-card.i4 { left: 1016px; }
.s7-by { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; }
.s7-by.k1 { background: #7c3aed; }
.s7-by.k2 { background: #4f46e5; }
.s7-by.k3 { background: #059669; }
.s7-by.k4 { background: #0891b2; }
.s7-card b { display: block; margin-top: 8px; font-size: 17px; font-weight: 800; line-height: 1.3; color: #fff; }
.s7-card small { display: block; margin-top: 3px; font-size: 13.5px; color: #b6c2e8; }
.s7-card small em { font-style: normal; font-weight: 800; color: #67e8f9; }

.s7-lab { position: absolute; top: 362px; width: 208px; text-align: center; font-size: 21px; font-weight: 800; color: #fff; opacity: 0; visibility: hidden; }
.s7-lab.i0 { left: 56px; }
.s7-lab.i1 { left: 296px; }
.s7-lab.i2 { left: 536px; }
.s7-lab.i3 { left: 776px; }
.s7-lab.i4 { left: 1016px; }

.s7-loop-wrap { position: absolute; left: 730px; top: 441px; width: 300px; text-align: center; }
.s7-loop-wrap span { display: inline-block; padding: 4px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 700; color: #67e8f9; background: #0d1536; border: 1px solid rgba(34, 211, 238, .6); }

.s7-ledger {
    position: absolute;
    left: 220px;
    top: 496px;
    width: 840px;
    height: 88px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 26px;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
    border: 1px solid rgba(165, 180, 252, .42);
    box-shadow: 0 26px 52px -18px rgba(2, 6, 40, .85);
}

.s7-lav { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-style: normal; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.s7-lnm b { display: block; font-size: 22px; font-weight: 800; line-height: 1.2; color: #fff; }
.s7-lnm small { font-size: 13px; color: #a9b6dc; }
.s7-num { width: 190px; margin-left: 18px; white-space: nowrap; }
.s7-num b { display: inline-block; font-size: 58px; font-weight: 800; line-height: 1; color: #67e8f9; text-shadow: 0 0 28px rgba(34, 211, 238, .5); }
.s7-num small { margin-left: 8px; font-size: 20px; font-weight: 700; color: #a9b6dc; }
.s7-ends { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 13.5px; color: #a9b6dc; }
.s7-ends span { margin-left: 6px; }
.s7-end { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; }
.s7-end.k1 { background: linear-gradient(135deg, #7c3aed, #c4b5fd); }
.s7-end.k2 { background: linear-gradient(135deg, #4f46e5, #818cf8); }
.s7-end.k3 { background: linear-gradient(135deg, #059669, #34d399); }
.s7-end.k4 { background: linear-gradient(135deg, #0891b2, #22d3ee); }

/* ============ S8 适用范围 ============ */
.s8-head { position: absolute; left: 0; top: 90px; width: 1280px; text-align: center; font-size: 30px; font-weight: 800; letter-spacing: 3px; color: #fff; text-shadow: 0 4px 24px rgba(8, 12, 48, .9); }

.s8-card {
    position: absolute;
    top: 138px;
    width: 272px;
    height: 346px;
    padding: 22px 20px;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
    border: 1px solid rgba(165, 180, 252, .4);
    box-shadow: 0 26px 52px -18px rgba(2, 6, 40, .85);
}

.s8-card.i0 { left: 60px; }
.s8-card.i1 { left: 356px; }
.s8-card.i2 { left: 652px; }
.s8-card.i3 { left: 948px; }
.s8-ic { width: 76px; height: 76px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff; box-shadow: 0 14px 30px -10px rgba(2, 6, 40, .8); }
.s8-ic.k1 { background: linear-gradient(135deg, #4f46e5, #a78bfa); }
.s8-ic.k3 { background: linear-gradient(135deg, #059669, #34d399); }
.s8-ic.k4 { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.s8-ic.k5 { background: linear-gradient(135deg, #d97706, #fbbf24); }
.s8-card h3 { margin: 18px 0 5px; font-size: 24px; font-weight: 800; line-height: 1.3; color: #fff; }
.s8-card p { margin: 0; font-size: 15px; color: #a9b6dc; }
.s8-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.s8-tag { padding: 5px 13px; border-radius: 999px; font-size: 15.5px; color: #dbe4ff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(165, 180, 252, .3); }
.s8-modes { position: absolute; left: 0; top: 514px; width: 1280px; display: flex; justify-content: center; gap: 14px; }

/* ============ S9 收尾 ============ */
.s9-url { position: absolute; left: 0; top: 540px; width: 1280px; text-align: center; }
.s9-url span { display: inline-flex; align-items: center; gap: 12px; padding: 12px 30px; border-radius: 999px; font-size: 24px; font-weight: 700; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, rgba(79, 70, 229, .88), rgba(8, 145, 178, .88)); border: 1px solid rgba(199, 210, 254, .5); box-shadow: 0 18px 40px -12px rgba(79, 70, 229, .9); }
.s9-url i { color: #fde68a; }
.s9-url em { margin-left: 4px; padding-left: 16px; font-size: 20px; font-style: normal; font-weight: 600; letter-spacing: .5px; color: #a5f3fc; border-left: 1px solid rgba(255, 255, 255, .4); }