.demo-page {
    min-height: 100dvh;
    background: #faf9f7;
    color: #2d2a26;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
    padding: 0 16px; /* mobile default */
    padding-bottom: 80px; /* space for fixed bottom nav */
}

/* ===== MOBILE ===== */
.demo-mobile-shell { padding: 0 16px; }

.demo-family-screen {} /* container for family view */

.demo-family-grid { display: flex; flex-direction: column; gap: 10px; }
.demo-family-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border-radius: 16px; padding: 16px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04); cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
}
.demo-family-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.demo-family-card-add { border: 1.5px dashed #d4c5b0; background: transparent; box-shadow: none; }
.demo-family-card-add:hover { border-color: #8b6914; }

.demo-family-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.demo-family-avatar-emma { background: #f0e6d3; color: #8b6914; }
.demo-family-avatar-noah { background: #d3e0f0; color: #14548b; }
.demo-family-avatar-add { background: #f5f2ed; color: #8b8578; font-size: 1.4rem; }

.demo-family-info { display: flex; flex-direction: column; gap: 2px; }
.demo-family-name { font-size: 1rem; font-weight: 600; }
.demo-family-status { font-size: 0.8rem; color: #8b8578; }

.demo-header {
    display: flex; justify-content: space-between;
    align-items: flex-start; padding: 16px 0 8px;
}
.demo-header-left { display: flex; align-items: center; }
.demo-back-btn {
    background: none; border: none; font-size: 0.9rem; font-weight: 500;
    color: #5a554e; cursor: pointer; padding: 4px 8px 4px 0;
    font-family: inherit;
}
.demo-greeting { display: flex; flex-direction: column; gap: 2px; }
.demo-greeting-text { font-size: 1.5rem; font-weight: 600; }
.demo-greeting-sub { font-size: 0.85rem; color: #8b8578; }

.demo-child-pill {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1.5px solid #e8e4de; border-radius: 24px;
    padding: 6px 14px 6px 6px; cursor: pointer;
    font-size: 0.875rem; font-weight: 500; color: #2d2a26;
    transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit;
}
.demo-child-pill:hover { border-color: #d4c5b0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.demo-child-pill-inline { height: 38px; padding: 0 14px 0 6px; }

.demo-child-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: #f0e6d3; color: #8b6914; font-weight: 600; font-size: 0.8rem;
}
.demo-child-avatar-noah { background: #d3e0f0; color: #14548b; }
.demo-chevron { font-size: 0.7rem; color: #999; margin-left: 2px; }
.demo-child-add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: transparent; border: 1.5px dashed #d4c5b0;
    cursor: pointer; font-size: 1.1rem; color: #8b8578; font-family: inherit;
}

.demo-section { margin-bottom: 24px; }
.demo-section-title {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: #8b8578; margin: 0 0 12px;
}

.demo-activity-list {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.demo-activity-item {
    display: flex; align-items: flex-start; padding: 14px 16px; gap: 12px;
    border-bottom: 1px solid #f5f2ed;
}
.demo-activity-item:last-child { border-bottom: none; }
.demo-activity-done { opacity: 0.55; }
.demo-activity-done .demo-activity-label { text-decoration: line-through; }

.demo-activity-check {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 22px; height: 22px; flex-shrink: 0; margin-top: 0;
    border: 2px solid #c8c0b4; border-radius: 5px;
    background: #fff; cursor: pointer; position: relative;
    transition: background 0.15s, border-color 0.15s;
}
.demo-activity-check:checked {
    background: #8b6914; border-color: #8b6914;
}
.demo-activity-check:checked::after {
    content: ''; position: absolute;
    top: 3px; left: 7px;
    width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.demo-activity-icon { font-size: 1.25rem; width: 32px; text-align: center; flex-shrink: 0; }
.demo-activity-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.demo-activity-label { font-size: 0.9rem; font-weight: 500; }
.demo-activity-detail { font-size: 0.75rem; color: #8b8578; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-activity-progress { width: 100%; height: 4px; background: #f0ece6; border-radius: 2px; overflow: hidden; margin-top: 4px; }
.demo-activity-progress-bar { height: 100%; border-radius: 2px; background: linear-gradient(90deg, #c9a96e, #b8944f); transition: width 0.3s ease; }
.demo-activity-expiration { font-size: 0.7rem; color: #a09888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-activity-value { font-size: 0.85rem; font-weight: 500; color: #8b8578; flex-shrink: 0; }
.demo-activity-expand {
    background: none; border: none; font-size: 0.85rem; color: #8b8578;
    cursor: pointer; padding: 4px 8px; flex-shrink: 0; margin-top: -2px;
}
.demo-activity-detail-expanded {
    margin-left: 48px; padding: 8px 0 4px;
}
.demo-activity-note {
    font-size: 0.8rem; color: #5a554e; line-height: 1.45;
    padding: 8px 10px; background: #faf8f5; border-radius: 6px;
    border-left: 3px solid #e8e0d5;
}
.demo-activity-last {
    margin-top: 6px; font-size: 0.7rem; color: #8b8578;
}

.demo-upcoming-list { display: flex; flex-direction: column; gap: 6px; }
.demo-upcoming-item {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border-radius: 12px; padding: 10px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.demo-upcoming-off { background: #f8f6f3; }
.demo-upcoming-icon { font-size: 1.15rem; width: 28px; text-align: center; flex-shrink: 0; }
.demo-upcoming-label { flex: 1; font-size: 0.85rem; font-weight: 500; }
.demo-upcoming-day { font-size: 0.75rem; color: #8b8578; font-weight: 500; text-transform: capitalize; }

.demo-today-plan { background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.demo-today-plan-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.demo-today-plan-link { font-size: 0.75rem; color: #8b6914; text-decoration: none; font-weight: 500; }
.demo-plan-list { display: flex; flex-direction: column; gap: 0; }
.demo-plan-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.demo-plan-item + .demo-plan-item { border-top: 1px solid #f5f2ed; }
.demo-plan-check { font-size: 0.85rem; width: 18px; text-align: center; flex-shrink: 0; }
.demo-plan-done .demo-plan-check { color: #4a8b54; }
.demo-plan-item:not(.demo-plan-done) .demo-plan-check { color: #c8c0b4; }
.demo-plan-avatar {
    width: 22px; height: 22px; border-radius: 50%; font-size: 0.6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: #e8ddd0; color: #5a4a3a;
}
.demo-plan-avatar.demo-family-avatar-emma { background: #f0e6d3; color: #8b6914; }
.demo-plan-avatar.demo-family-avatar-noah { background: #d6e2f0; color: #3a5a7a; }
.demo-plan-text { font-size: 0.825rem; flex: 1; }
.demo-plan-done .demo-plan-text { opacity: 0.5; text-decoration: line-through; }
.demo-plan-time { font-size: 0.7rem; color: #8b8578; flex-shrink: 0; }

.demo-quick-actions { display: flex; gap: 12px; }
.demo-action-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: #fff; border-radius: 16px; padding: 16px 24px; flex: 1;
    cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: transform 0.15s, box-shadow 0.2s; border: none;
}
.demo-action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.demo-action-icon { font-size: 1.5rem; }
.demo-action-label { font-size: 0.8rem; font-weight: 500; color: #5a554e; }

.demo-bottom-spacer { height: 80px; }

.demo-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: space-around; align-items: center;
    background: #fff; border-top: 1px solid #edeae5;
    padding: 8px 0 env(safe-area-inset-bottom, 8px); z-index: 100;
}
.demo-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: #999; padding: 4px 12px; border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.demo-nav-item:hover { color: #6b6560; background: #f8f6f3; }
.demo-nav-active { color: #8b6914; }
.demo-nav-icon { font-size: 1.25rem; line-height: 1; }
.demo-nav-label { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.demo-bottom-spacer-tall { height: 120px; }

/* ===== SCHEDULE ===== */
.demo-schedule-legend {
    display: flex; gap: 14px; padding: 8px 0 14px;
}
.demo-legend-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.7rem; color: #8b8578;
}
.demo-legend-dot {
    width: 10px; height: 10px; border-radius: 50%;
}
.demo-legend-emma { background: #e8ddd0; border: 1px solid #c9a96e; }
.demo-legend-noah { background: #d6e2f0; border: 1px solid #6e9ec9; }
.demo-legend-break { background: #f0ece6; border: 1px solid #d8d0c4; }

.demo-schedule-timeline {
    display: flex; flex-direction: column; gap: 0;
}
.demo-schedule-slot {
    display: flex; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid #f0ece6;
}
.demo-schedule-slot:last-child { border-bottom: none; }
.demo-slot-time { display: flex; flex-direction: column; gap: 1px; min-width: 45px; flex-shrink: 0; }
.demo-slot-time-label { font-size: 0.75rem; font-weight: 600; color: #5a554e; }
.demo-slot-duration { font-size: 0.65rem; color: #a09888; }

.demo-slot-body {
    display: flex; align-items: center; gap: 8px; flex: 1;
    padding: 8px 10px; border-radius: 10px;
    background: #faf8f5; border-left: 3px solid #e0d8cc;
}
.demo-slot-emma .demo-slot-body { background: #fdf8f0; border-left-color: #c9a96e; }
.demo-slot-noah .demo-slot-body { background: #f0f5fa; border-left-color: #6e9ec9; }
.demo-slot-activity .demo-slot-body { background: #f0faf0; border-left-color: #6ec98e; }
.demo-slot-meal .demo-slot-body { background: #faf8f5; border-left-color: #d8d0c4; }
.demo-slot-break .demo-slot-body { background: #faf9f7; border-left-color: #e8e4de; }

.demo-slot-avatar {
    width: 24px; height: 24px; border-radius: 50%; font-size: 0.6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: #e8ddd0; color: #5a4a3a;
}
.demo-slot-avatar.demo-family-avatar-emma { background: #f0e6d3; color: #8b6914; }
.demo-slot-avatar.demo-family-avatar-noah { background: #d6e2f0; color: #3a5a7a; }

.demo-slot-info { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.demo-slot-label { font-size: 0.825rem; }
.demo-slot-type {
    font-size: 0.6rem; color: #a09888; text-transform: capitalize;
    letter-spacing: 0.04em;
}
.demo-slot-check { font-size: 0.85rem; flex-shrink: 0; }
.demo-schedule-slot .demo-slot-check { color: #c8c0b4; }
.demo-schedule-slot .demo-slot-check:has(+) { color: #4a8b54; }

/* ===== CONVERSATION ===== */
.demo-voice-record {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #8b6914, #a67c24);
    border-radius: 20px; padding: 28px 20px; margin: 16px 0 24px;
    cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(139,105,20,0.25);
}
.demo-voice-record:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(139,105,20,0.35); }
.demo-voice-mic { font-size: 2.5rem; }
.demo-voice-label { color: #fff; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; }

.demo-snippet-list { display: flex; flex-direction: column; gap: 12px; }
.demo-snippet {
    background: #fff; border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.demo-snippet-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.demo-snippet-time {
    font-size: 0.7rem; font-weight: 600; color: #8b8578;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.demo-snippet-subject {
    font-size: 0.8rem; font-weight: 500; color: #5a554e; flex: 1;
}
.demo-snippet-expand {
    background: none; border: none; font-size: 0.85rem; color: #8b8578;
    cursor: pointer; padding: 4px 8px;
}
.demo-snippet-summary {
    font-size: 0.875rem; line-height: 1.55; color: #2d2a26;
    font-style: italic;
}
.demo-snippet-expanded { margin-top: 10px; }
.demo-snippet-transcript {
    padding: 10px 12px; background: #faf8f5; border-radius: 8px;
    border-left: 3px solid #e8e0d5;
}
.demo-snippet-transcript-label {
    font-size: 0.6rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: #8b8578;
}
.demo-snippet-transcript-text {
    display: block; margin-top: 4px;
    font-size: 0.825rem; line-height: 1.55;
    color: #3d3832;
}
.demo-snippet-audio { margin-top: 8px; }
.demo-snippet-audio-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: 8px;
    background: #f5f0e8; border: 1px solid #e8e0d5;
    font-size: 0.75rem; color: #5a554e; cursor: pointer;
}
.demo-snippet-insight {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid #f0ece6;
    font-size: 0.8rem; color: #6b6560; line-height: 1.5;
}

.demo-section-title-divider {
    text-align: center; position: relative; margin: 28px 0 16px;
}
.demo-section-title-divider::before,
.demo-section-title-divider::after {
    content: ''; position: absolute; top: 50%;
    width: calc(50% - 60px); height: 1px; background: #e8e4de;
}
.demo-section-title-divider::before { left: 0; }
.demo-section-title-divider::after { right: 0; }

.demo-daily-review {
    background: #fff; border-radius: 16px; padding: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.demo-daily-review-subjects { display: flex; flex-direction: column; gap: 1px; }
.demo-daily-subject-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0; border-bottom: 1px solid #f5f2ed;
}
.demo-daily-subject-row:last-of-type { border-bottom: none; }
.demo-daily-subject-icon { font-size: 1rem; width: 24px; text-align: center; flex-shrink: 0; }
.demo-daily-subject-name { font-size: 0.85rem; font-weight: 500; width: 70px; flex-shrink: 0; }
.demo-daily-subject-score { display: flex; gap: 3px; }
.demo-daily-dot {
    width: 10px; height: 10px; border-radius: 50%;
    border: 1.5px solid #d4c5b0; flex-shrink: 0;
}
.demo-daily-dot-filled { background: #8b6914; border-color: #8b6914; }
.demo-daily-subject-note {
    font-size: 0.75rem; color: #8b8578; margin-left: auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-daily-review-summary {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid #f0ece6;
    font-size: 0.85rem; line-height: 1.6; color: #5a554e;
}

/* ===== PROGRESS ===== */
.demo-week-card {
    background: #fff; border-radius: 18px; padding: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04); margin: 16px 0;
}
.demo-week-label {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: #8b8578;
}
.demo-week-stats {
    display: flex; align-items: baseline; gap: 10px; margin: 8px 0;
}
.demo-week-time { font-size: 1.75rem; font-weight: 700; color: #2d2a26; }
.demo-week-change { font-size: 0.85rem; font-weight: 600; }
.demo-week-up { color: #4a8b54; }
.demo-week-bar { display: flex; gap: 4px; margin: 12px 0 6px; }
.demo-week-day {
    flex: 1; height: 24px; border-radius: 4px;
    background: #f0ece6;
}
.demo-week-day-active { background: #8b6914; }
.demo-week-days { font-size: 0.75rem; color: #8b8578; }

.demo-pace-card {
    display: flex; align-items: center; gap: 12px;
    background: #f0f5f0; border-radius: 14px; padding: 12px 18px; margin-bottom: 8px;
    border: 1px solid #d8e8d8;
}
.demo-pace-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: #4a8b54; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 700; flex-shrink: 0;
}
.demo-pace-info { display: flex; flex-direction: column; gap: 1px; }
.demo-pace-label { font-size: 0.9rem; font-weight: 600; color: #3a6b44; }
.demo-pace-note { font-size: 0.75rem; color: #5a8a64; }

.demo-subject-list { display: flex; flex-direction: column; gap: 8px; }
.demo-subject-card {
    background: #fff; border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.demo-subject-card-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.demo-subject-card-icon { font-size: 1.25rem; width: 32px; text-align: center; }
.demo-subject-card-info { display: flex; flex-direction: column; gap: 2px; }
.demo-subject-card-name { font-size: 0.875rem; font-weight: 600; }
.demo-subject-card-lesson { font-size: 0.7rem; color: #8b8578; }
.demo-subject-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 90px; }
.demo-subject-expand {
    background: none; border: none; font-size: 0.85rem; color: #8b8578;
    cursor: pointer; padding: 4px 8px; flex-shrink: 0;
}
.demo-subject-detail {
    padding: 10px 16px 10px 64px; margin-top: -4px;
}
.demo-subject-detail-row { display: flex; justify-content: space-between; margin-top: 5px; gap: 8px; }
.demo-subject-detail-label { font-size: 0.7rem; color: #8b8578; flex-shrink: 0; }
.demo-subject-detail-value { font-size: 0.75rem; font-weight: 500; color: #3d3832; text-align: right; line-height: 1.35; }
.demo-subject-next { color: #5a7a54; font-weight: 600; }
.demo-subject-bar {
    width: 100%; height: 5px; background: #f0ece6; border-radius: 3px; overflow: hidden;
}
.demo-subject-fill {
    height: 100%; border-radius: 3px; transition: width 0.3s ease;
    background: linear-gradient(90deg, #c9a96e, #8b6914);
}
.demo-progress-bar-reading .demo-subject-fill { background: linear-gradient(90deg, #c9a96e, #8b6914); }
.demo-progress-bar-math .demo-subject-fill { background: linear-gradient(90deg, #6e9ec9, #14548b); }
.demo-progress-bar-science .demo-subject-fill { background: linear-gradient(90deg, #6ec98e, #148b4a); }
.demo-progress-bar-music .demo-subject-fill { background: linear-gradient(90deg, #c96e9e, #8b1454); }
.demo-subject-value { font-size: 0.7rem; font-weight: 600; color: #8b8578; }

.demo-extracurricular-list { display: flex; flex-direction: column; gap: 8px; }
.demo-extracurricular-card {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff; border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    border-left: 4px solid #c9a96e;
}
.demo-extracurricular-sports { border-left-color: #4a7ab5; }
.demo-extracurricular-coop { border-left-color: #7b5ea7; }
.demo-extracurricular-icon { font-size: 1.25rem; width: 32px; text-align: center; flex-shrink: 0; margin-top: 1px; }
.demo-extracurricular-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.demo-extracurricular-name { font-size: 0.875rem; font-weight: 600; }
.demo-extracurricular-schedule { font-size: 0.7rem; color: #8b8578; }
.demo-extracurricular-events { display: flex; flex-direction: column; gap: 2px; text-align: right; flex-shrink: 0; }
.demo-extracurricular-next { font-size: 0.75rem; font-weight: 600; color: #3d3832; }
.demo-extracurricular-last { font-size: 0.7rem; color: #8b8578; }

.demo-recent-list { display: flex; flex-direction: column; gap: 0; }
.demo-recent-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid #f5f2ed;
}
.demo-recent-row:last-child { border-bottom: none; }
.demo-recent-done .demo-recent-text { opacity: 0.5; }
.demo-recent-date { display: flex; flex-direction: column; gap: 1px; min-width: 65px; flex-shrink: 0; }
.demo-recent-date-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; color: #8b8578; letter-spacing: 0.04em; }
.demo-recent-date-time { font-size: 0.7rem; color: #a09888; }
.demo-recent-text { font-size: 0.825rem; flex: 1; line-height: 1.4; }
.demo-recent-check {
    font-size: 0.85rem; color: #4a8b54; font-weight: 700;
    flex-shrink: 0; margin-top: 1px;
}