/* ============================================================
   云督伴学 · 家长端样式（S6 Apple Design System 统一重构）
   ------------------------------------------------------------
   设计原则：
   - 手机优先（375px 基准，宽屏自动扩展），移动端 C 端观感
   - 全量消费 Apple Design System token（tokens.css），
     每个 var() 均带字面量 fallback，独立加载也可渲染
   - 卡片：surface / 16~18px radius / 1px 轻边框 / 极轻阴影
   - 品牌红仅用于强调（主按钮 / 选中 / 预警数据），不做大面积色块
   - 全部本地资源，零 CDN；微信内置浏览器可用
   - 所有 pp-* 业务选择器保留（JS/模板 DOM 契约不变）
   ============================================================ */

:root {
    /* 消费 DS token（_app_head.html → tokens.css 提供），fallback 为旧值 */
    --pp-bg: var(--ydb-bg, #F5F5F7);
    --pp-card: var(--ydb-surface, #FFFFFF);
    --pp-primary: var(--ydb-primary, #E53935);
    --pp-primary-dark: var(--ydb-primary-pressed, #C62828);
    --pp-primary-light: var(--ydb-primary-tint, #FDECEA);
    --pp-text: var(--ydb-text, #1D1D1F);
    --pp-text-2: var(--ydb-text-2, #6E6E73);
    --pp-text-3: var(--ydb-text-3, #86868B);
    --pp-border: var(--ydb-separator, rgba(60, 60, 67, 0.12));
    --pp-card-border: var(--ydb-border, rgba(0, 0, 0, 0.04));
    --pp-success: var(--ydb-success, #34C759);
    --pp-success-bg: var(--ydb-success-bg, rgba(52, 199, 89, 0.12));
    --pp-warn: var(--ydb-warning, #FF9500);
    --pp-warn-bg: var(--ydb-warning-bg, rgba(255, 149, 0, 0.12));
    --pp-danger: var(--ydb-danger, #FF3B30);
    --pp-danger-bg: var(--ydb-danger-bg, rgba(255, 59, 48, 0.12));
    --pp-info: var(--ydb-info, #007AFF);
    --pp-radius: 18px;
    --pp-radius-sm: 12px;
    --pp-radius-xs: 10px;
    --pp-shadow: var(--ydb-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.05));
    --pp-glow: var(--ydb-primary-glow, rgba(229, 57, 53, 0.10));
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--ydb-font, -apple-system, BlinkMacSystemFont,
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
        "Helvetica Neue", Arial, sans-serif);
    background: var(--pp-bg);
    color: var(--pp-text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--pp-primary);
    text-decoration: none;
}

a:hover {
    color: var(--pp-primary-dark);
}

/* ---------- 布局 ---------- */

.pp-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}

.pp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 2px 16px;
}

.pp-brand {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pp-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pp-brand .pp-brand-dot {
    color: var(--pp-primary);
}

.pp-brand-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--pp-primary);
    background: var(--pp-primary-light);
    border-radius: 999px;
    padding: 2px 10px;
}

.pp-header-actions {
    font-size: 14px;
    color: var(--pp-text-2);
}

.pp-header-actions a {
    margin-left: 12px;
}

/* ---------- 卡片：surface / 18px / 1px 轻边框 / 极轻阴影 ---------- */

.pp-card {
    background: var(--pp-card);
    border: 1px solid var(--pp-card-border);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow);
    padding: 20px;
    margin-bottom: 14px;
}

.pp-card + .pp-card {
    margin-top: 0;
}

.pp-card-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.pp-card-sub {
    font-size: 13px;
    color: var(--pp-text-3);
    margin-bottom: 14px;
}

/* ---------- 表单 ---------- */

.pp-form label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--pp-text-2);
    margin: 14px 0 8px;
}

.pp-form label:first-child {
    margin-top: 0;
}

.pp-input {
    display: block;
    width: 100%;
    min-height: 48px;               /* Apple 触控命中标准 */
    padding: 12px 14px;
    font-size: 16px;                 /* ≥16px 避免 iOS 聚焦自动放大 */
    font-family: inherit;
    color: var(--pp-text);
    background: var(--pp-card);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.pp-input:focus {
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 3px var(--pp-glow);
    background: #ffffff;
}

.pp-input::placeholder {
    color: var(--pp-text-3);
}

.pp-button {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    margin-top: 18px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: var(--pp-primary);
    border: none;
    border-radius: var(--pp-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s, transform 0.15s;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.pp-button:hover {
    background: var(--pp-primary-dark);
}

.pp-button:active {
    background: var(--pp-primary-dark);
    transform: scale(0.985);
}

.pp-button:disabled {
    opacity: 0.5;
    background: var(--pp-text-3);
    cursor: not-allowed;
    transform: none;
}

.pp-button-secondary {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: var(--pp-primary);
    background: var(--pp-primary-light);
    border: none;
    border-radius: var(--pp-radius-sm);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.15s;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.pp-button-secondary:hover {
    background: var(--pp-primary-light);
    filter: brightness(0.96);
}

.pp-hint {
    font-size: 13px;
    color: var(--pp-text-3);
    margin-top: 10px;
    line-height: 1.5;
}

/* ---------- S6 视觉工具类（替代模板 inline style） ---------- */

.pp-center { text-align: center; }
.pp-mt4 { margin-top: 4px; }
.pp-mt8 { margin-top: 8px; }
.pp-mt14 { margin-top: 14px; }
.pp-ml6 { margin-left: 6px; }
.pp-subject-note { font-weight: 400; color: var(--pp-text-2); }
.pp-filter-clear {
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- 提示条 ---------- */

.pp-alert {
    padding: 12px 14px;
    border-radius: var(--pp-radius-sm);
    font-size: 14px;
    margin-bottom: 14px;
    line-height: 1.5;
}

.pp-alert-error {
    background: var(--pp-danger-bg);
    color: var(--pp-danger);
}

.pp-alert-success {
    background: var(--pp-success-bg);
    color: var(--pp-success);
}

.pp-alert-warn {
    background: var(--pp-warn-bg);
    color: var(--pp-warn);
}

/* ---------- 登录页 ---------- */

.pp-login-hero {
    text-align: center;
    padding: 32px 0 6px;
}

.pp-login-hero .pp-logo {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--pp-primary);
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.pp-login-hero h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pp-login-hero p {
    font-size: 14px;
    color: var(--pp-text-2);
    margin-top: 4px;
}

/* ---------- 首页：孩子卡片 ---------- */

.pp-student-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pp-status-tag {
    display: inline-block;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 999px;
    background: var(--pp-primary-light);
    color: var(--pp-primary);
    white-space: nowrap;
}

.pp-status-tag-gray {
    background: var(--ydb-surface-2, rgba(120, 120, 128, 0.08));
    color: var(--pp-text-3);
}

.pp-status-tag-green {
    background: var(--pp-success-bg);
    color: var(--pp-success);
}

.pp-service-row {
    border-top: 1px solid var(--pp-card-border);
    padding: 12px 0 4px;
}

/* V2.5 驾驶舱闭环：服务卡可点击 → 课时记录明细 */
a.pp-service-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: var(--pp-radius-sm);
    transition: background 0.15s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}

a.pp-service-card:hover,
a.pp-service-card:active {
    background: var(--ydb-surface-2, rgba(120, 120, 128, 0.08));
}

.pp-card-go {
    display: inline-block;
    margin-left: 8px;
    color: var(--pp-primary);
    font-size: 12px;
}

.pp-service-row:first-child {
    border-top: none;
}

.pp-service-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pp-service-name {
    font-size: 15px;
    font-weight: 600;
}

.pp-service-meta {
    font-size: 13px;
    color: var(--pp-text-2);
    margin-top: 2px;
}

.pp-balance {
    text-align: right;
    flex-shrink: 0;
}

.pp-balance .pp-balance-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--pp-primary);
    font-variant-numeric: tabular-nums;
}

.pp-balance .pp-balance-num.negative {
    color: var(--pp-danger);
}

.pp-balance .pp-balance-label {
    font-size: 12px;
    color: var(--pp-text-3);
}

.pp-last-lesson {
    font-size: 13px;
    color: var(--pp-text-3);
    margin-top: 6px;
}

.pp-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--pp-text-3);
    font-size: 14px;
}

/* ---------- 课时记录页 ---------- */

.pp-lesson-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--pp-card-border);
}

.pp-lesson-item:last-child {
    border-bottom: none;
}

.pp-lesson-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pp-lesson-title {
    font-size: 15px;
    font-weight: 600;
}

.pp-lesson-time {
    font-size: 13px;
    color: var(--pp-text-3);
    margin-top: 2px;
}

.pp-lesson-balances {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--pp-text-2);
}

.pp-lesson-balances b {
    color: var(--pp-text);
    font-weight: 600;
}

.pp-corrected {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--pp-warn-bg);
    border-radius: var(--pp-radius-xs);
    font-size: 13px;
    color: var(--pp-warn);
    line-height: 1.5;
}

.pp-corrected b {
    font-weight: 600;
}

/* 筛选条 */

.pp-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.pp-select {
    flex: 1;
    min-width: 120px;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--pp-text);
    background: var(--pp-card);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.pp-select:focus {
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 3px var(--pp-glow);
}

/* 分页 */

.pp-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    font-size: 14px;
    color: var(--pp-text-2);
}

.pp-pager a {
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
    background: var(--pp-card);
    color: var(--pp-primary);
}

.pp-pager a:hover {
    border-color: var(--pp-primary);
}

.pp-pager .pp-pager-disabled {
    padding: 10px 14px;
    border: 1px solid var(--pp-card-border);
    border-radius: var(--pp-radius-sm);
    background: var(--ydb-surface-2, rgba(120, 120, 128, 0.08));
    color: var(--pp-text-3);
    cursor: not-allowed;
}

/* ---------- 状态页（激活/重置结果） ---------- */

.pp-state-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 12px;
}

.pp-state-icon svg {
    display: block;
    margin: 0 auto;
}

.pp-state-ok {
    background: var(--pp-success-bg);
    color: var(--pp-success);
}

.pp-state-bad {
    background: var(--pp-danger-bg);
    color: var(--pp-danger);
}

.pp-state-center {
    text-align: center;
    padding: 12px 0;
}

.pp-state-center h2 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.pp-state-center p {
    font-size: 14px;
    color: var(--pp-text-2);
}

.pp-state-center .pp-button,
.pp-state-center .pp-button-secondary {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}

/* 家长称呼欢迎行 */

.pp-welcome {
    font-size: 15px;
    color: var(--pp-text-2);
    padding: 6px 2px 18px;
}

.pp-welcome b {
    color: var(--pp-text);
    font-size: 17px;
}

.pp-welcome-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pp-text);
}

.pp-welcome-sub {
    font-size: 13px;
    color: var(--pp-text-3);
    margin-top: 5px;
}

/* ---------- 窄屏适配（< 480px） ---------- */

@media (max-width: 479px) {
    .pp-page {
        padding: 12px 12px 40px;
    }

    .pp-card {
        padding: 16px;
    }

    .pp-balance .pp-balance-num {
        font-size: 18px;
    }
}

/* ---------- 减少动态效果偏好 ---------- */

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* ============================================================
   家长端底部导航 + 弹层（与教师端 ydb-bottom-nav 同一设计语言）
   ============================================================ */

.pp-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: block;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--pp-card-border);
    padding-bottom: env(safe-area-inset-bottom);
}

.pp-bottom-nav-inner {
    display: flex;
    max-width: 560px;
    margin: 0 auto;
}

.pp-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px 6px;
    text-decoration: none;
    color: #86868B;                  /* 未选中：iOS secondary label */
    font-size: 10px;
    font-weight: 500;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    min-height: 50px;
}

.pp-bottom-nav-item.active {
    color: var(--pp-primary);        /* 选中：品牌色 */
    font-weight: 600;
}

.pp-bottom-nav-icon {
    font-size: 20px;
    line-height: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pp-bottom-nav-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.pp-bottom-nav-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--pp-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.pp-page {
    padding-bottom: 84px;
}

/* ---------- 弹层：Bottom Sheet ---------- */

.pp-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 95;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.pp-sheet-overlay.open {
    opacity: 1;
    visibility: visible;
}

.pp-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 96;
    background: var(--pp-card);
    border-radius: 20px 20px 0 0;
    padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.24s ease;
    max-width: 640px;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto;
    box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.14);
}

.pp-sheet.open {
    transform: translateY(0);
}

.pp-sheet-grab {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--pp-border);
    margin: 0 auto 14px;
}

.pp-sheet-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--pp-text);
    margin-bottom: 12px;
}

.pp-sheet-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pp-card-border);
    text-decoration: none;
    color: inherit;
}

.pp-sheet-row:last-child {
    border-bottom: none;
}

.pp-sheet-row-label {
    flex: 1;
    font-size: 15px;
    color: var(--pp-text);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pp-sheet-row-label svg {
    flex-shrink: 0;
}

.pp-sheet-row-value {
    font-size: 13px;
    color: var(--pp-text-3);
}

.pp-sheet-row.logout .pp-sheet-row-label {
    color: var(--pp-danger);
}

/* ---------- 消息列表（轻量，未读仅小圆点+字重差异） ---------- */

.pp-msg-item {
    display: flex;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pp-card-border);
    text-align: left;
}

.pp-msg-item:last-child {
    border-bottom: none;
}

.pp-msg-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pp-primary);
    margin-top: 6px;
}

.pp-msg-item.is-read .pp-msg-dot {
    background: var(--ydb-surface-3, rgba(120, 120, 128, 0.12));
}

.pp-msg-title {
    font-size: 14px;
    color: var(--pp-text);
    font-weight: 600;
    margin-bottom: 2px;
}

.pp-msg-item.is-read .pp-msg-title {
    font-weight: 400;
    color: var(--pp-text-2);
}

.pp-msg-time {
    font-size: 11px;
    color: var(--pp-text-3);
}

.pp-msg-content {
    font-size: 13px;
    color: var(--pp-text-2);
    margin-top: 4px;
    line-height: 1.5;
}

.pp-msg-unread {
    color: var(--pp-primary);
}

.pp-msg-empty {
    text-align: center;
    padding: 28px 12px;
    color: var(--pp-text-3);
    font-size: 13px;
}

/* ============================================================
   首页服务大卡片（S6：去渐变去光斑，纯 surface + 语义色左条）
   - 剩余课时分级配色：≤0 danger / ≤2 warning / 其余主文本色
     （口径与老师端一致；仅视觉，不改任何余额计算）
   ============================================================ */

.pp-service-card {
    position: relative;
    border: 1px solid var(--pp-card-border);
    border-radius: var(--pp-radius);
    background: var(--pp-card);
    padding: 16px 16px 14px 18px;
    margin: 10px 0;
    overflow: hidden;
}

.pp-service-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--ydb-surface-3, rgba(120, 120, 128, 0.2));
}

.pp-service-card.pp-bal-low::before {
    background: var(--pp-warn);
}

.pp-service-card.pp-bal-danger::before {
    background: var(--pp-danger);
}

/* 正常余额大数字：主文本色（品牌红仅留给预警态，避免歧义） */
.pp-service-card .pp-balance-num {
    font-size: 26px;
    color: var(--pp-text);
    line-height: 1.2;
}

.pp-balance-num .pp-balance-unit {
    font-size: 12px;
    font-weight: 500;
    margin-left: 2px;
    color: var(--pp-text-3);
}

.pp-service-card.pp-bal-low .pp-balance-num,
.pp-service-card.pp-bal-low .pp-balance-num.negative {
    color: var(--pp-warn);
}

.pp-service-card.pp-bal-danger .pp-balance-num,
.pp-service-card.pp-bal-danger .pp-balance-num.negative {
    color: var(--pp-danger);
}

.pp-balance-flag {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--pp-danger);
    background: var(--pp-danger-bg);
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}

.pp-service-card.pp-bal-low .pp-balance-flag {
    color: var(--pp-warn);
    background: var(--pp-warn-bg);
}

/* ============================================================
   课时记录页：记录卡片（Timeline 式卡片列表）
   ============================================================ */

.pp-lesson-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--pp-card-border);
    border-radius: var(--pp-radius-sm);
    background: var(--pp-card);
    padding: 12px;
    margin-bottom: 10px;
}

.pp-lesson-card:last-child {
    margin-bottom: 0;
}

.pp-lesson-date {
    flex-shrink: 0;
    width: 48px;
    height: 52px;
    border-radius: var(--pp-radius-xs);
    background: var(--ydb-surface-2, rgba(120, 120, 128, 0.08));
    color: var(--pp-text-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    overflow: hidden;
}

.pp-lesson-date-day {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pp-lesson-date-month {
    font-size: 10px;
    opacity: 0.85;
    letter-spacing: 0.02em;
}

/* 已更正记录：日期徽标与整卡转为暖色态 */
.pp-lesson-reversed .pp-lesson-date {
    background: var(--pp-warn-bg);
    color: var(--pp-warn);
}

.pp-lesson-reversed {
    border-color: var(--pp-warn-bg);
    background: var(--pp-warn-bg);
}

.pp-lesson-body {
    flex: 1;
    min-width: 0;
}

/* 余额行增强：课后剩加大加粗、扣课徽章右对齐 */
.pp-lesson-balances {
    flex-wrap: wrap;
    row-gap: 4px;
}

.pp-lesson-balances .pp-bal-after {
    color: var(--pp-text);
    font-weight: 700;
    font-size: 14px;
}

.pp-lesson-cost {
    margin-left: auto;
    color: var(--pp-primary);
    background: var(--pp-primary-light);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.pp-lesson-reversed .pp-lesson-cost {
    color: var(--pp-warn);
    background: var(--pp-warn-bg);
}

/* ---------- 窄屏适配（< 480px）补强 ---------- */

@media (max-width: 479px) {
    .pp-service-card .pp-balance-num {
        font-size: 22px;
    }

    .pp-lesson-card {
        padding: 10px;
        gap: 10px;
    }

    .pp-lesson-date {
        width: 42px;
        height: 48px;
    }
}

/* ============================================================
   细节动画（GPU 合成层，尊重系统减动效）
   数字滚动由 static/v010_anim.js 配合完成。
   ============================================================ */

@keyframes pp-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pp-pop-in {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    70% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.pp-service-card {
    animation: pp-fade-in-up 0.4s ease both;
}

.pp-service-card:nth-child(1) { animation-delay: 0.05s; }
.pp-service-card:nth-child(2) { animation-delay: 0.12s; }
.pp-service-card:nth-child(3) { animation-delay: 0.19s; }
.pp-service-card:nth-child(4) { animation-delay: 0.26s; }
.pp-service-card:nth-child(n+5) { animation-delay: 0.33s; }

@media (hover: hover) {
    .pp-service-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--ydb-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.05));
    }
}

.pp-lesson-card {
    animation: pp-fade-in-up 0.35s ease both;
}

.pp-lesson-card:nth-child(1) { animation-delay: 0.03s; }
.pp-lesson-card:nth-child(2) { animation-delay: 0.08s; }
.pp-lesson-card:nth-child(3) { animation-delay: 0.13s; }
.pp-lesson-card:nth-child(4) { animation-delay: 0.18s; }
.pp-lesson-card:nth-child(5) { animation-delay: 0.23s; }
.pp-lesson-card:nth-child(6) { animation-delay: 0.28s; }
.pp-lesson-card:nth-child(7) { animation-delay: 0.33s; }
.pp-lesson-card:nth-child(n+8) { animation-delay: 0.38s; }

.pp-lesson-date {
    animation: pp-pop-in 0.32s ease both;
    animation-delay: 0.15s;
}

.pp-lesson-card:active {
    transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   商业 App 化精修 V1 · 阶段1：首页运营轮播（家长端）
   克制原则：16:7 比例、统一圆角、无花哨切换动画；
   0 张时整块不渲染（服务端控制），1 张不自动轮播（JS 控制）。
   ============================================================ */

.pp-carousel {
    position: relative;
    margin: 2px 0 16px;
    border-radius: var(--pp-radius);
    overflow: hidden;
    background: var(--pp-card);
    box-shadow: var(--pp-shadow);
    -webkit-overflow-scrolling: touch;
}

.pp-carousel-track {
    display: flex;
    transition: transform 0.35s ease;
    will-change: transform;
}

.pp-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 16 / 7;
}

.pp-carousel-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* 滑动手势交给容器，避免拖拽图片 */
}

.pp-carousel-link {
    display: block;
    width: 100%;
    height: 100%;
}

.pp-carousel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: auto;
}

.pp-carousel-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
}

.pp-carousel-dot.active {
    width: 16px;
    background: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
    .pp-carousel-track {
        transition: none;
    }
}

/* ===== 品牌标识精修 2026-08-31 ===== */
.pp-login-hero .pp-logo-image{
    width:58px;height:58px;display:inline-block;object-fit:cover;padding:0;
    border-radius:17px;background:transparent;box-shadow:0 12px 28px rgba(32,94,199,.16);
}

/* ============================================================
   家长端 · 学习情况中心 V1
   ============================================================ */
.pp-learning-page { padding-bottom: 112px; }
.pp-learning-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 14px 0 18px;
    padding: 24px;
    border: 1px solid rgba(227, 33, 40, .10);
    border-radius: 28px;
    background:
        radial-gradient(circle at 88% 4%, rgba(227, 33, 40, .13), transparent 36%),
        linear-gradient(145deg, #fff 0%, #fff8f6 100%);
    box-shadow: 0 14px 34px rgba(70, 28, 30, .07);
}
.pp-learning-hero::after {
    content: "";
    position: absolute;
    right: -46px; top: -54px;
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 24px solid rgba(227,33,40,.045);
}
.pp-learning-eyebrow { color: #C71820; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.pp-learning-hero h1 { margin: 6px 0 7px; font-size: clamp(24px, 6vw, 34px); line-height: 1.12; color: #1d1d1f; }
.pp-learning-hero p { margin: 0; color: #6e6e73; font-size: 14px; line-height: 1.7; max-width: 520px; }
.pp-month-switch { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 6px; border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 8px 22px rgba(31,18,18,.07); }
.pp-month-switch a,.pp-month-switch span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; text-decoration: none; font-size: 24px; color: #C71820; }
.pp-month-switch a:active { background: #fff0ee; transform: scale(.96); }
.pp-month-switch .disabled { color: #c8c2c2; }
.pp-month-switch strong { min-width: 92px; text-align: center; color: #3a3031; font-size: 13px; }
.pp-learning-student { margin: 24px 0 32px; }
.pp-learning-student-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 0 4px; }
.pp-learning-student-head > div:first-child { display: flex; align-items: center; gap: 11px; }
.pp-learning-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #fff; font-weight: 800; background: linear-gradient(145deg,#F14A48,#C71820); box-shadow: 0 7px 16px rgba(199,24,32,.20); }
.pp-learning-student h2 { margin: 0; font-size: 18px; color: #1d1d1f; }
.pp-learning-student-head p { margin: 3px 0 0; color: #86868b; font-size: 12px; }
.pp-learning-count { padding: 6px 10px; border-radius: 999px; background: #f4f4f6; color: #6e6e73; font-size: 12px; }
.pp-learning-service { margin: 12px 0; padding: 20px; border-radius: 26px; background: rgba(255,255,255,.96); border: 1px solid rgba(60,60,67,.09); box-shadow: 0 12px 32px rgba(34,26,27,.065); }
.pp-learning-service-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pp-learning-type { display: inline-flex; margin-bottom: 6px; padding: 4px 8px; border-radius: 999px; background: #fff0ee; color: #C71820; font-size: 11px; font-weight: 800; }
.pp-learning-service h3 { margin: 0; color: #1d1d1f; font-size: 18px; }
.pp-learning-service-head p { margin: 5px 0 0; color: #86868b; font-size: 12px; }
.pp-learning-big-number { text-align: right; min-width: 70px; }
.pp-learning-big-number strong { display: block; color: #C71820; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.pp-learning-big-number span { display: block; margin-top: 5px; color: #86868b; font-size: 11px; }
.pp-learning-ring { --progress: 0; width: 72px; height: 72px; flex: 0 0 72px; display: grid; place-items: center; align-content: center; border-radius: 50%; background: radial-gradient(circle at center,#fff 55%,transparent 57%), conic-gradient(#E32128 calc(var(--progress) * 1%), #f0ecec 0); }
.pp-learning-ring strong { color: #C71820; font-size: 18px; line-height: 1; }
.pp-learning-ring span { margin-top: 3px; color: #8d8485; font-size: 9px; }
.pp-learning-kpis { display: grid; gap: 8px; margin-top: 18px; }
.pp-learning-kpis-3 { grid-template-columns: repeat(3,1fr); }
.pp-learning-kpis > div { min-width: 0; padding: 13px 10px; border-radius: 17px; background: #f7f7f8; text-align: center; }
.pp-learning-kpis strong { display: block; color: #262123; font-size: 18px; font-variant-numeric: tabular-nums; }
.pp-learning-kpis span { display: block; margin-top: 4px; color: #86868b; font-size: 11px; }
.pp-learning-chart-block { margin-top: 18px; }
.pp-learning-block-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.pp-learning-block-title span { color: #302a2b; font-size: 14px; font-weight: 800; }
.pp-learning-block-title small { color: #9a9293; font-size: 10px; }
.pp-learning-line-chart { width: 100%; min-height: 130px; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg,#fffafa,#fff); }
.pp-learning-svg { display: block; width: 100%; height: auto; }
.pp-chart-grid { stroke: rgba(89,74,75,.10); stroke-width: 1; }
.pp-chart-area { fill: rgba(227,33,40,.08); }
.pp-chart-line { fill: none; stroke: #E32128; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pp-chart-dot { fill: #fff; stroke: #E32128; stroke-width: 3; }
.pp-chart-label { fill: #999092; font-size: 11px; }
.pp-plan-card { margin-top: 14px; padding: 14px; border-radius: 18px; border: 1px solid rgba(60,60,67,.08); background: #fff; }
.pp-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pp-plan-head strong { display: block; color: #302a2b; font-size: 13px; }
.pp-plan-head span { display: block; margin-top: 3px; color: #8c8586; font-size: 11px; }
.pp-plan-head b { color: #C71820; font-size: 13px; font-variant-numeric: tabular-nums; }
.pp-plan-meta { margin-top: 8px; color: #777073; font-size: 11px; }
.pp-progress-track,.pp-unit-progress,.pp-lollipop-track { overflow: hidden; background: #f0eded; }
.pp-progress-track { height: 7px; margin-top: 10px; border-radius: 99px; }
.pp-progress-track i,.pp-unit-progress i,.pp-lollipop-track i { display: block; height: 100%; background: linear-gradient(90deg,#F04B48,#E32128); border-radius: inherit; }
.pp-unit-list { margin-top: 10px; display: grid; gap: 7px; }
.pp-unit-row { display: grid; grid-template-columns: minmax(55px,auto) 1fr 50px; gap: 8px; align-items: center; font-size: 11px; color: #6e6869; }
.pp-unit-progress { height: 5px; border-radius: 99px; }
.pp-unit-row b { text-align: right; color: #51494b; font-variant-numeric: tabular-nums; }
.pp-learning-empty-note { margin-top: 16px; padding: 16px; border-radius: 18px; background: #fff7f5; }
.pp-learning-empty-note strong,.pp-learning-empty-note span { display: block; }
.pp-learning-empty-note strong { color: #4a3d3f; font-size: 13px; }
.pp-learning-empty-note span { margin-top: 5px; color: #8a7e80; font-size: 12px; line-height: 1.6; }
.pp-learning-footnote { margin-top: 12px; color: #908789; font-size: 11px; line-height: 1.6; }
.pp-lollipop-list { display: grid; gap: 9px; padding: 7px 2px 2px; }
.pp-lollipop-row { display: grid; grid-template-columns: 76px 1fr 42px; gap: 8px; align-items: center; color: #746d6e; font-size: 11px; }
.pp-lollipop-track { height: 7px; border-radius: 99px; }
.pp-lollipop-track i { position: relative; min-width: 7px; }
.pp-lollipop-track i::after { content:""; position:absolute; right:0; top:50%; width:9px; height:9px; border:2px solid #fff; border-radius:50%; background:#E32128; transform:translate(0,-50%); box-shadow:0 0 0 1px rgba(227,33,40,.16); }
.pp-lollipop-row b { text-align: right; color: #50494a; font-variant-numeric: tabular-nums; }
.pp-learning-empty-mini { padding: 16px; text-align: center; color: #9b9294; font-size: 12px; }
.pp-learning-detail-link { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(60,60,67,.08); color: #C71820; text-decoration: none; font-size: 12px; font-weight: 700; }
@media (max-width: 560px) {
    .pp-learning-hero { align-items: flex-start; flex-direction: column; padding: 20px; }
    .pp-month-switch { width: 100%; justify-content: space-between; }
    .pp-month-switch strong { flex: 1; }
    .pp-learning-service { padding: 17px; border-radius: 23px; }
    .pp-learning-kpis > div { padding: 11px 6px; }
    .pp-learning-kpis strong { font-size: 16px; }
    .pp-unit-row { grid-template-columns: 52px 1fr 42px; }
}

/* Step 4：辅导/家教“学了什么 + 用了多久” */
.pp-lollipop-row-content{align-items:center;}
.pp-lollipop-label{display:flex;flex-direction:column;gap:3px;min-width:140px;max-width:240px;font-style:normal;}
.pp-lollipop-label em{font-size:11px;color:var(--pp-text-3,#86868b);font-style:normal;}
.pp-lollipop-label strong{font-size:13px;line-height:1.35;color:var(--pp-text,#1d1d1f);font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:560px){.pp-lollipop-row-content{grid-template-columns:minmax(118px,1.45fr) minmax(70px,1fr) auto;gap:9px}.pp-lollipop-label{min-width:0;max-width:none}.pp-lollipop-label strong{font-size:12px}}


/* ============================================================
   Step 8 · 学习情况 UI 精修 v3
   ============================================================ */
.pp-bottom-nav-item{
    transition: transform .14s cubic-bezier(.2,.8,.2,1), color .16s ease, opacity .16s ease;
}
.pp-bottom-nav-item:active{transform:translateY(1.5px) scale(.965);opacity:.86;}
.pp-bottom-nav-icon svg{stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pp-bottom-nav-item.active .pp-bottom-nav-icon{
    filter:drop-shadow(0 3px 7px rgba(227,33,40,.12));
}
.pp-learning-name-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pp-learning-grade{
    display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border-radius:999px;
    background:#fff0ee;color:#bd1a22;font-size:10px;font-weight:750;line-height:1;
    border:1px solid rgba(227,33,40,.08);
}
.pp-learning-type{align-items:center;gap:5px;}
.pp-learning-type svg{width:14px;height:14px;stroke-width:2;}

.pp-learning-empty-dashboard{
    position:relative;overflow:hidden;margin:14px 0 18px;padding:22px;border-radius:26px;
    border:1px solid rgba(60,60,67,.08);
    background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,248,247,.92));
    box-shadow:0 10px 28px rgba(41,31,32,.05);
}
.pp-learning-empty-dashboard>strong,.pp-learning-empty-dashboard>span{display:block;position:relative;z-index:1;}
.pp-learning-empty-dashboard>strong{margin-top:14px;color:#353033;font-size:15px;line-height:1.4;}
.pp-learning-empty-dashboard>span{margin-top:6px;max-width:520px;color:#8a8385;font-size:12px;line-height:1.7;}
.pp-learning-empty-visual{height:122px;border-radius:19px;overflow:hidden;background:linear-gradient(180deg,#fff9f8,#fff);}
.pp-learning-empty-visual svg{display:block;width:100%;height:100%;opacity:.72;}
.pp-empty-grid{fill:none;stroke:rgba(112,97,99,.09);stroke-width:1;}
.pp-empty-trend{fill:none;stroke:rgba(227,33,40,.38);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.pp-empty-dot{fill:#fff;stroke:rgba(227,33,40,.42);stroke-width:2.5;}
.pp-learning-empty-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;}
.pp-learning-empty-metrics span{display:block;padding:12px;border-radius:15px;background:rgba(120,120,128,.055);}
.pp-learning-empty-metrics i,.pp-learning-empty-metrics b{display:block;border-radius:999px;background:rgba(120,120,128,.12);}
.pp-learning-empty-metrics i{width:42%;height:8px;margin-bottom:8px;}
.pp-learning-empty-metrics b{width:72%;height:14px;}
.pp-learning-empty-compact{display:flex;align-items:center;gap:16px;padding:18px 20px;}
.pp-learning-empty-compact strong,.pp-learning-empty-compact span{display:block;}
.pp-learning-empty-compact strong{color:#3f393a;font-size:14px;}
.pp-learning-empty-compact span{margin-top:5px;color:#8e8788;font-size:12px;line-height:1.6;}
.pp-learning-empty-radar{width:90px;flex:0 0 90px;opacity:.48;}
.pp-learning-empty-radar svg{display:block;width:100%;height:auto;}
.pp-learning-empty-radar polygon,.pp-learning-empty-radar path{fill:none;stroke:rgba(227,33,40,.33);stroke-width:1.4;}

.pp-learning-plan-empty{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.8fr);gap:18px;align-items:center;background:linear-gradient(145deg,#fff9f7,#fff);}
.pp-learning-plan-empty-copy strong{font-size:14px;}
.pp-learning-plan-empty-copy span{max-width:390px;}
.pp-learning-plan-empty-preview{padding:12px;border-radius:16px;border:1px dashed rgba(227,33,40,.16);background:rgba(255,255,255,.7);}
.pp-empty-progress-row{display:grid;grid-template-columns:45px 1fr;gap:8px;align-items:center;margin:6px 0;color:#a09698;font-size:9px;}
.pp-empty-progress-row i{height:5px;border-radius:999px;background:rgba(120,120,128,.09);overflow:hidden;}
.pp-empty-progress-row b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(244,74,72,.28),rgba(227,33,40,.42));}
.pp-learning-plan-empty-preview svg{display:block;width:100%;height:64px;margin-top:4px;opacity:.72;}
.pp-learning-plan-empty-preview small{display:block;margin-top:2px;color:#aaa1a3;font-size:9px;text-align:center;}

@media(max-width:560px){
    .pp-learning-empty-dashboard{padding:18px;border-radius:22px;}
    .pp-learning-empty-visual{height:104px;}
    .pp-learning-empty-compact{align-items:flex-start;}
    .pp-learning-empty-radar{width:72px;flex-basis:72px;}
    .pp-learning-plan-empty{grid-template-columns:1fr;gap:12px;}
}
@media(prefers-reduced-motion:reduce){.pp-bottom-nav-item{transition:none;}.pp-bottom-nav-item:active{transform:none;}}

/* V77 · 学期学情：真人督学事实 + AI 作业学情（只显示聚合数据）。 */
.pp-supervision-term-card {
    margin-top: 18px;
    padding: 17px;
    border: 1px solid rgba(199,24,32,.12);
    border-radius: 20px;
    background: linear-gradient(145deg,#fff8f6,#fff);
}
.pp-supervision-term-title { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.pp-supervision-term-title strong { color:#30282a; font-size:14px; }
.pp-supervision-term-title span { color:#9b8e91; font-size:10px; text-align:right; }
.pp-supervision-term-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:13px; }
.pp-supervision-term-kpis div { min-width:0; padding:12px 7px; border-radius:15px; background:rgba(255,255,255,.88); text-align:center; box-shadow:inset 0 0 0 1px rgba(60,60,67,.055); }
.pp-supervision-term-kpis strong,.pp-supervision-term-kpis span { display:block; }
.pp-supervision-term-kpis strong { color:#252024; font-size:18px; font-variant-numeric:tabular-nums; }
.pp-supervision-term-kpis span { margin-top:4px; color:#82777a; font-size:10px; }
.pp-supervision-term-kpis .is-alert strong { color:#C71820; }
.pp-supervision-term-card>p { margin:11px 1px 0; color:#9a8e90; font-size:10px; line-height:1.65; }

.pp-homework-learning { margin-top:20px; padding:18px; border-radius:22px; background:#fff; border:1px solid rgba(60,60,67,.09); box-shadow:0 10px 28px rgba(67,28,32,.055); }
.pp-learning-homework_ai>.pp-learning-service-head { display:none; }
.pp-learning-homework_ai>.pp-homework-learning { margin-top:0; border:0; box-shadow:none; padding:0; }
.pp-homework-learning-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.pp-homework-learning-kicker { display:inline-flex; padding:4px 8px; border-radius:999px; color:#C71820; background:#fff0ee; font-size:10px; font-weight:800; letter-spacing:.05em; }
.pp-homework-learning-head h4 { margin:7px 0 4px; color:#241f21; font-size:17px; }
.pp-homework-learning-head p { margin:0; color:#8b8284; font-size:11px; line-height:1.55; }
.pp-homework-accuracy { --accuracy:0; width:76px; height:76px; flex:0 0 76px; display:grid; place-content:center; text-align:center; border-radius:50%; background:radial-gradient(circle,#fff 56%,transparent 58%),conic-gradient(#E32128 calc(var(--accuracy) * 1%),#f0ecec 0); }
.pp-homework-accuracy strong,.pp-homework-accuracy span { display:block; }
.pp-homework-accuracy strong { color:#C71820; font-size:17px; line-height:1; }
.pp-homework-accuracy span { margin-top:4px; color:#8f8587; font-size:8px; }
.pp-homework-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:16px; }
.pp-homework-kpis div { padding:12px 6px; border-radius:15px; background:#f7f7f8; text-align:center; }
.pp-homework-kpis strong,.pp-homework-kpis span { display:block; }
.pp-homework-kpis strong { color:#2f292b; font-size:20px; font-variant-numeric:tabular-nums; }
.pp-homework-kpis span { margin-top:3px; color:#898184; font-size:10px; }
.pp-homework-kpis .is-wrong { background:#fff1ee; }
.pp-homework-kpis .is-wrong strong { color:#C71820; font-size:24px; }
.pp-homework-subject-block { margin-top:20px; }
.pp-homework-subjects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.pp-homework-subject { padding:12px; border-radius:16px; background:#faf9f9; border:1px solid rgba(60,60,67,.055); }
.pp-homework-subject.is-empty { opacity:.52; }
.pp-homework-subject-line { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px; }
.pp-homework-subject-line strong { color:#332d2f; font-size:12px; }
.pp-homework-subject-line span { color:#686064; font-size:11px; text-align:right; font-variant-numeric:tabular-nums; }
.pp-homework-subject-line b { min-width:54px; color:#C71820; font-size:11px; text-align:right; }
.pp-homework-subject-track { height:7px; margin-top:8px; overflow:hidden; border-radius:999px; background:#e9e6e7; }
.pp-homework-subject-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#F04B48,#C71820); }
.pp-homework-subject>small { display:block; margin-top:7px; color:#958d8f; font-size:9px; }
.pp-homework-trend-block { padding-top:2px; }
.pp-homework-weak-block { margin-top:18px; padding:15px; border-radius:18px; background:#faf8f8; }
.pp-homework-weak-block.has-risk { background:linear-gradient(145deg,#fff0ed,#fff8f6); box-shadow:inset 0 0 0 1px rgba(199,24,32,.12); }
.pp-homework-weak-title { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pp-homework-weak-title span { color:#332b2d; font-size:14px; font-weight:800; }
.pp-homework-weak-title small { color:#9a8c8f; font-size:9px; }
.pp-homework-weak-list { display:grid; gap:8px; margin-top:11px; }
.pp-homework-weak-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border-radius:14px; background:rgba(255,255,255,.9); }
.pp-homework-weak-item>span { min-width:0; }
.pp-homework-weak-item em,.pp-homework-weak-item strong { display:block; }
.pp-homework-weak-item em { color:#A14B50; font-size:9px; font-style:normal; font-weight:800; }
.pp-homework-weak-item strong { margin-top:3px; overflow:hidden; color:#352d2f; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.pp-homework-weak-item>b { flex:0 0 auto; color:#C71820; font-size:18px; font-variant-numeric:tabular-nums; }
.pp-homework-repeat-alert { margin-top:12px; padding:13px; border-radius:14px; color:#76151c; background:#ffdeda; }
.pp-homework-repeat-alert>strong { font-size:12px; }
.pp-homework-repeat-alert>div { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pp-homework-repeat-alert span { padding:6px 8px; border-radius:10px; background:rgba(255,255,255,.65); font-size:10px; }
.pp-homework-repeat-alert b { color:#B10E18; font-size:13px; }
.pp-homework-safe { margin:10px 0 0; color:#807679; font-size:11px; }
.pp-homework-learning-empty { margin-top:16px; padding:17px; border-radius:17px; background:#f7f7f8; }
.pp-homework-learning-empty strong,.pp-homework-learning-empty span { display:block; }
.pp-homework-learning-empty strong { color:#393234; font-size:13px; }
.pp-homework-learning-empty span { margin-top:5px; color:#8e8588; font-size:11px; line-height:1.65; }
.pp-homework-learning-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(60,60,67,.08); }
.pp-homework-learning-foot span { color:#9a9294; font-size:9px; }
.pp-homework-learning-foot a { color:#C71820; font-size:11px; font-weight:800; text-decoration:none; white-space:nowrap; }

@media (max-width:560px) {
    .pp-supervision-term-kpis,.pp-homework-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pp-homework-subjects { grid-template-columns:1fr; }
    .pp-homework-learning { padding:15px; }
    .pp-homework-learning-foot { align-items:flex-start; flex-direction:column; }
}

/* V77 · 家长/学生统一侧边抽屉。 */
.pp-portal-menu {
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(60,60,67,.10);
    border-radius:13px;
    color:#3b3436;
    background:rgba(255,255,255,.92);
    box-shadow:0 5px 18px rgba(45,28,31,.08);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
body>.pp-portal-menu { position:fixed; z-index:2180; top:calc(14px + env(safe-area-inset-top)); left:14px; }
.pp-portal-menu svg { width:22px; height:22px; }
.pp-portal-menu:active { transform:scale(.94); }
.pp-header>.pp-portal-menu+.pp-brand { margin-right:auto; margin-left:10px; }
.pp-portal-sidebar-overlay { position:fixed; inset:0; z-index:2390; opacity:0; visibility:hidden; background:rgba(20,16,18,.28); backdrop-filter:blur(3px); transition:opacity .22s ease,visibility .22s ease; }
.pp-portal-sidebar-overlay.open { opacity:1; visibility:visible; }
.pp-portal-sidebar { position:fixed; z-index:2400; top:0; bottom:0; left:0; width:min(86vw,330px); display:flex; flex-direction:column; padding:calc(18px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)); box-sizing:border-box; color:#242022; background:rgba(252,251,251,.985); box-shadow:18px 0 54px rgba(38,22,26,.18); transform:translateX(-106%); transition:transform .25s cubic-bezier(.22,.8,.22,1); }
.pp-portal-sidebar.open { transform:translateX(0); }
.pp-portal-sidebar>header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:5px 5px 17px; border-bottom:1px solid rgba(60,60,67,.09); }
.pp-portal-sidebar>header strong,.pp-portal-sidebar>header small { display:block; }
.pp-portal-sidebar>header strong { display:flex; align-items:center; gap:8px; color:#1f1b1d; font-size:18px; }
.pp-portal-sidebar>header strong>span { width:11px; height:11px; border-radius:50%; background:#D71920; box-shadow:0 0 0 5px rgba(215,25,32,.10); }
.pp-portal-sidebar>header small { margin-top:5px; color:#91898b; font-size:11px; }
.pp-portal-sidebar>header button { width:38px; height:38px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:#5c5557; background:#eeeeef; cursor:pointer; }
.pp-portal-sidebar>nav { display:grid; gap:5px; padding:15px 0; overflow:auto; overscroll-behavior:contain; }
.pp-portal-sidebar-link { display:grid; grid-template-columns:36px 1fr auto; align-items:center; min-height:48px; padding:4px 11px 4px 7px; border-radius:14px; color:#554e50; text-decoration:none; }
.pp-portal-sidebar-link>span { width:34px; height:34px; display:grid; place-items:center; color:#7a7174; }
.pp-portal-sidebar-link>b { font-size:13px; font-weight:650; }
.pp-portal-sidebar-link>i { color:#b3abad; font-size:18px; font-style:normal; }
.pp-portal-sidebar-link.active { color:#A71218; background:#FDEBE9; }
.pp-portal-sidebar-link.active>span { color:#C71820; }
.pp-portal-sidebar>footer { margin-top:auto; padding:12px 4px 0; border-top:1px solid rgba(60,60,67,.09); }
.pp-portal-sidebar>footer a { display:flex; align-items:center; gap:10px; padding:12px; border-radius:13px; color:#9E1B22; text-decoration:none; font-size:13px; font-weight:700; }
.pp-portal-nav-open { overflow:hidden!important; touch-action:none; }

@media (prefers-reduced-motion:reduce) {
    .pp-portal-sidebar,.pp-portal-sidebar-overlay { transition:none; }
}

/* ===== Step 8：家长端真实学习时间线 ===== */
.pp-learning-timeline-card {
    margin: 18px 0 20px;
    padding: 18px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 20px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
}
.pp-timeline-title { margin-bottom: 14px; }
.pp-learning-timeline { display: grid; gap: 18px; }
.pp-timeline-day { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.pp-timeline-date {
    padding-top: 3px;
    font-size: 13px;
    font-weight: 750;
    color: #6e6e73;
    white-space: nowrap;
}
.pp-timeline-day-items {
    position: relative;
    display: grid;
    gap: 10px;
    padding-left: 18px;
}
.pp-timeline-day-items::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 999px;
    background: #e5e7eb;
}
.pp-timeline-item {
    position: relative;
    padding: 13px 14px;
    border: 1px solid rgba(17, 24, 39, .07);
    border-radius: 15px;
    background: #fff;
}
.pp-timeline-dot {
    position: absolute;
    left: -18px;
    top: 18px;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #6b7280;
    box-shadow: 0 0 0 2px #e5e7eb;
}
.pp-timeline-dictation .pp-timeline-dot { background: #2563eb; }
.pp-timeline-article_recitation .pp-timeline-dot { background: #7c3aed; }
.pp-timeline-nonenglish_recitation .pp-timeline-dot { background: #b45309; }
.pp-timeline-word_recitation .pp-timeline-dot { background: #059669; }
.pp-timeline-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.pp-timeline-head > div { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-timeline-head strong { font-size: 15px; color: #1d1d1f; }
.pp-timeline-head small { font-size: 11px; color: #86868b; text-align: right; }
.pp-timeline-kind {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f2f2f7;
    color: #515154;
    font-size: 11px;
    font-weight: 750;
}
.pp-timeline-summary,
.pp-timeline-detail,
.pp-timeline-review,
.pp-timeline-note { margin: 7px 0 0; line-height: 1.55; }
.pp-timeline-summary { font-size: 13px; color: #303036; font-weight: 620; }
.pp-timeline-detail { font-size: 12px; color: #6e6e73; }
.pp-timeline-review {
    padding: 7px 9px;
    border-radius: 9px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 12px;
}
.pp-timeline-note { font-size: 12px; color: #515154; }
.pp-timeline-note b { color: #303036; }
.pp-timeline-empty { margin-top: 4px; }

@media (max-width: 640px) {
    .pp-learning-timeline-card { padding: 14px; border-radius: 17px; }
    .pp-timeline-day { grid-template-columns: 1fr; gap: 7px; }
    .pp-timeline-date { padding-left: 18px; }
    .pp-timeline-head { flex-direction: column; gap: 5px; }
    .pp-timeline-head small { text-align: left; }
}