:root {
    --blue: #8B5E3C;
    --blue-dark: #6F4A2F;
    --blue-deeper: #4A2E1A;
    --blue-light: #FAF3EB;
    --blue-mid: #E8D5C0;
    --gray-bg: #F5EDE0;
    --gray-light: #EDE0D0;
    --gray-mid: #C9B49A;
    --gray-text: #7D5A44;
    --gray-dark: #3E2A1A;
    --white: #FFFDF9;
    --green: #6B8F5E;
    --green-light: #E8F0E4;
    --amber: #C07A30;
    --amber-light: #FDECD5;
    --red: #B94040;
    --shadow-sm: 0 1px 3px rgba(139,94,60,0.08);
    --shadow-md: 0 4px 16px rgba(139,94,60,0.13);
    --shadow-lg: 0 8px 32px rgba(139,94,60,0.18);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --font: 'Segoe UI', system-ui, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: var(--font); background: var(--gray-bg); color: var(--gray-dark); min-height: 100vh; }

  /* ── SCREENS ── */
  .screen { display: none; min-height: 100vh; }
  .screen.active { display: block; }

  /* ── LOGIN SCREEN ── */
  #screen-login {
    background: linear-gradient(135deg, #6495ED 0%, #4a7bd4 50%, #2c5aa0 100%);
    display: none; align-items: center; justify-content: center; flex-direction: column;
  }
  #screen-login.active { display: flex; }
  .login-card {
    background: var(--white); border-radius: var(--radius-lg); padding: 48px 40px;
    width: 360px; box-shadow: var(--shadow-lg); text-align: center;
  }
  .login-logo { font-size: 42px; margin-bottom: 8px; }
  .login-title { font-size: 24px; font-weight: 700; color: var(--blue-deeper); margin-bottom: 4px; }
  .login-sub { font-size: 14px; color: var(--gray-text); margin-bottom: 32px; }
  .login-role-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
  .role-btn {
    padding: 18px 12px; border: 2px solid var(--blue-mid); border-radius: var(--radius);
    background: var(--blue-light); cursor: pointer; transition: all 0.2s;
    font-size: 13px; font-weight: 600; color: var(--blue-deeper); text-align: center;
  }
  .role-btn:hover { border-color: var(--blue); background: var(--blue-mid); transform: translateY(-1px); }
  .role-btn .role-icon { font-size: 28px; display: block; margin-bottom: 6px; }
  .login-divider { font-size: 12px; color: var(--gray-mid); margin: 12px 0; }
  #pin-role-section { display: none; }
  .pin-area { display: none; }
  .pin-area.visible { display: block; }
  .pin-label { font-size: 13px; color: var(--gray-text); margin-bottom: 8px; }
  .pin-input {
    width: 100%; padding: 12px 16px; border: 2px solid var(--gray-light);
    border-radius: var(--radius-sm); font-size: 20px; text-align: center;
    letter-spacing: 8px; outline: none; transition: border-color 0.2s;
  }
  .pin-input:focus { border-color: var(--blue); }
  .pin-submit {
    width: 100%; margin-top: 12px; padding: 13px; border: none;
    border-radius: var(--radius-sm); background: var(--blue); color: white;
    font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s;
  }
  .pin-submit:hover { background: var(--blue-dark); }
  .pin-error { font-size: 12px; color: var(--red); margin-top: 6px; min-height: 18px; }

  /* ── TOP NAV ── */
  .topnav {
    background: var(--white); border-bottom: 1px solid var(--gray-light);
    padding: 0 24px; height: 60px; display: flex; align-items: center;
    justify-content: space-between; position: sticky; top: 0; z-index: 100;
    box-shadow: var(--shadow-sm);
  }
  .nav-brand { display: flex; align-items: center; gap: 10px; }
  .nav-logo-icon { font-size: 26px; }
  .nav-brand-name { font-size: 18px; font-weight: 700; color: var(--blue-deeper); }
  .nav-tabs { display: flex; gap: 4px; }
  .nav-tab {
    padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 600;
    cursor: pointer; color: var(--gray-text); transition: all 0.2s; border: none; background: none;
  }
  .nav-tab:hover { background: var(--blue-light); color: var(--blue-deeper); }
  .nav-tab.active { background: var(--blue); color: white; }
  .nav-right { display: flex; align-items: center; gap: 12px; }
  .nav-user { font-size: 13px; color: var(--gray-text); }
  .nav-logout {
    padding: 6px 14px; border: 1px solid var(--gray-mid); border-radius: 20px;
    font-size: 12px; cursor: pointer; background: none; color: var(--gray-text);
    transition: all 0.2s;
  }
  .nav-logout:hover { background: var(--gray-light); }

  /* ── PAGE CONTAINER ── */
  .page-container { max-width: 1100px; margin: 0 auto; padding: 28px 24px; }
  .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
  .page-title { font-size: 22px; font-weight: 700; color: var(--blue-deeper); }
  .page-sub { font-size: 14px; color: var(--gray-text); margin-top: 2px; }
  .btn {
    padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: all 0.18s;
  }
  .btn-primary { background: var(--blue); color: white; }
  .btn-primary:hover { background: var(--blue-dark); }
  .btn-secondary { background: var(--white); color: var(--blue-deeper); border: 1.5px solid var(--blue-mid); }
  .btn-secondary:hover { background: var(--blue-light); }
  .btn-sm { padding: 6px 12px; font-size: 12px; }
  .btn-danger { background: #fef2f2; color: var(--red); border: 1px solid #fecaca; }
  .btn-danger:hover { background: #fee2e2; }
  .btn-green { background: var(--green); color: white; }
  .btn-green:hover { background: #27ae68; }

  /* ── CARDS ── */
  .card {
    background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-light);
    box-shadow: var(--shadow-sm); overflow: hidden;
  }
  .card-header {
    padding: 14px 18px; border-bottom: 1px solid var(--gray-light);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--blue-light);
  }
  .card-header-title { font-size: 14px; font-weight: 700; color: var(--blue-deeper); display: flex; align-items: center; gap: 6px; }
  .card-body { padding: 16px 18px; }

  /* ── DATE STRIP ── */
  .date-strip { display: flex; gap: 8px; margin-bottom: 24px; overflow-x: auto; padding-bottom: 4px; }
  .date-day {
    flex-shrink: 0; width: 54px; padding: 10px 8px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--gray-light); background: var(--white); text-align: center;
    cursor: pointer; transition: all 0.2s;
  }
  .date-day:hover { border-color: var(--blue); }
  .date-day.active { background: var(--blue); border-color: var(--blue); color: white; }
  .date-day .dd { font-size: 18px; font-weight: 700; line-height: 1; }
  .date-day .dm { font-size: 11px; font-weight: 500; opacity: 0.7; }

  /* ── ACTIVITY ITEM ── */
  .activity-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--gray-light);
  }
  .activity-item:last-child { border-bottom: none; }
  .activity-check {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--blue-mid);
    flex-shrink: 0; cursor: pointer; transition: all 0.2s; margin-top: 2px;
    display: flex; align-items: center; justify-content: center; background: white;
  }
  .activity-check.done { background: var(--green); border-color: var(--green); }
  .activity-check.done::after { content: '✓'; font-size: 12px; color: white; font-weight: 700; }
  .activity-info { flex: 1; min-width: 0; }
  .activity-name { font-size: 14px; font-weight: 600; color: var(--gray-dark); }
  .activity-name.done { text-decoration: line-through; color: var(--gray-text); }
  .activity-sub { font-size: 12px; color: var(--gray-text); margin-top: 2px; }
  .activity-actions { display: flex; gap: 6px; align-items: center; }
  .tag {
    padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
  }
  .tag-book   { background: #ede9fe; color: #5b21b6; } /* Math — purple */
  .tag-online { background: #dbeafe; color: #1e40af; } /* Reading — blue */
  .tag-writing{ background: #ccfbf1; color: #0f766e; } /* Writing — teal */
  .tag-science{ background: #dcfce7; color: #15803d; } /* Science — green */
  .tag-social { background: #ffedd5; color: #c2410c; } /* Social Studies — orange */
  .tag-other  { background: #fce7f3; color: #9d174d; } /* Electives — pink */
  .tag-home   { background: #fef9c3; color: #92400e; } /* Home — yellow */
  .tag-extra  { background: #f0fdf4; color: #166534; } /* Extra Curricular — emerald */

  /* ── MODAL ── */
  .modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    z-index: 200; align-items: center; justify-content: center; padding: 16px;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: var(--white); border-radius: var(--radius-lg); padding: 28px;
    width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); max-height: 90vh;
    overflow-y: auto;
  }
  .modal-title { font-size: 18px; font-weight: 700; color: var(--blue-deeper); margin-bottom: 20px; }
  .form-group { margin-bottom: 16px; }
  .form-label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-dark); margin-bottom: 6px; }
  .form-input, .form-select, .form-textarea {
    width: 100%; padding: 10px 13px; border: 1.5px solid var(--gray-light);
    border-radius: var(--radius-sm); font-size: 14px; outline: none; font-family: var(--font);
    transition: border-color 0.2s; background: var(--white); color: var(--gray-dark);
  }
  .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--blue); }
  .form-textarea { min-height: 80px; resize: vertical; }
  .modal-actions { display: flex; gap: 10px; margin-top: 22px; justify-content: flex-end; }

  /* ── PROGRESS RING ── */
  .progress-ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
  .progress-ring-label { position: absolute; font-size: 16px; font-weight: 700; color: var(--blue-deeper); text-align: center; }
  .progress-ring-sub { font-size: 11px; color: var(--gray-text); }

  /* ── REWARD CHIPS ── */
  .reward-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
    border-radius: 20px; background: var(--amber-light); border: 1.5px solid #fcd34d;
    font-size: 13px; font-weight: 600; color: #92400e; cursor: default;
  }

  /* ── HIGH FIVE ANIMATION ── */
  @keyframes popIn { 0%{transform:scale(0.5);opacity:0} 60%{transform:scale(1.2)} 100%{transform:scale(1);opacity:1} }
  @keyframes fadeOut { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-40px)} }
  .high-five-popup {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background: var(--white); border-radius: var(--radius-lg); padding: 32px 48px;
    box-shadow: var(--shadow-lg); text-align: center; z-index: 300;
    animation: popIn 0.4s ease;
  }
  .high-five-emoji { font-size: 64px; }
  .high-five-text { font-size: 22px; font-weight: 700; color: var(--blue-deeper); margin-top: 8px; }
  .high-five-sub { font-size: 14px; color: var(--gray-text); margin-top: 4px; }
  .overlay-dim { position: fixed; inset: 0; background: rgba(0,0,0,0.2); z-index: 290; }

  /* ── GRID LAYOUTS ── */
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media(max-width: 700px) { .two-col { grid-template-columns: 1fr; } }
  .three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media(max-width: 700px) { .three-col { grid-template-columns: 1fr; } }
  .stat-card {
    background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-light);
    padding: 18px; text-align: center; box-shadow: var(--shadow-sm);
  }
  .stat-num { font-size: 28px; font-weight: 700; color: var(--blue-deeper); }
  .stat-label { font-size: 12px; color: var(--gray-text); margin-top: 4px; font-weight: 600; }

  /* ── WEEKLY BARS ── */
  .week-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; }
  .week-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .week-bar-track { width: 100%; background: var(--gray-light); border-radius: 4px; height: 48px; position: relative; overflow: hidden; }
  .week-bar-fill { position: absolute; bottom: 0; width: 100%; background: var(--blue); border-radius: 4px; transition: height 0.5s; }
  .week-bar-label { font-size: 10px; color: var(--gray-text); font-weight: 600; }

  /* ── REPORT SCREEN ── */
  .report-section { margin-bottom: 28px; }
  .report-section-title { font-size: 15px; font-weight: 700; color: var(--blue-deeper); margin-bottom: 12px; border-bottom: 2px solid var(--blue-mid); padding-bottom: 6px; }
  .standard-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
  .standard-check { width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid var(--blue-mid); flex-shrink: 0; margin-top: 1px; cursor: pointer; transition: all 0.15s; background: white; display: flex; align-items: center; justify-content: center; }
  .standard-check.checked { background: var(--blue); border-color: var(--blue); }
  .standard-check.checked::after { content: '✓'; font-size: 10px; color: white; font-weight: 700; }
  .standard-text { font-size: 13px; color: var(--gray-dark); }

  /* ── SETTINGS ── */
  .settings-section { margin-bottom: 28px; }
  .settings-section-title { font-size: 14px; font-weight: 700; color: var(--blue-deeper); margin-bottom: 14px; }
  .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--gray-light); }
  .settings-row:last-child { border-bottom: none; }
  .settings-row-label { font-size: 14px; font-weight: 600; color: var(--gray-dark); }
  .settings-row-sub { font-size: 12px; color: var(--gray-text); }

  /* ── REWARD MODAL ── */
  .reward-option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
    margin-bottom: 8px; cursor: pointer; transition: all 0.15s;
  }
  .reward-option:hover { border-color: var(--blue); background: var(--blue-light); }
  .reward-option.selected { border-color: var(--blue); background: var(--blue-light); }

  /* ── STUDENT WELCOME ── */
  .student-welcome {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deeper) 100%);
    border-radius: var(--radius-lg); padding: 28px 32px; color: white; margin-bottom: 24px;
    display: flex; align-items: center; justify-content: space-between; overflow: hidden;
    position: relative;
  }
  .student-welcome h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
  .student-welcome p { font-size: 14px; opacity: 0.85; }
  .welcome-avatar-ring {
    width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,0.18); border: 3px solid rgba(255,255,255,0.45);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    transition: transform 0.3s ease; cursor: default;
  }
  .welcome-avatar-ring:hover { transform: scale(1.1) rotate(6deg); }
  .welcome-emoji { font-size: 62px; line-height: 1; display: block; }
  .student-welcome::before {
    content:''; position:absolute; width:180px; height:180px; border-radius:50%;
    background:rgba(255,255,255,0.06); top:-50px; right:170px; pointer-events:none;
  }
  /* ── AVATAR PICKER ── */
  .avatar-picker-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 300; align-items: center; justify-content: center; padding: 16px;
  }
  .avatar-picker-overlay.open { display: flex; }
  .avatar-picker-modal {
    background: var(--white); border-radius: var(--radius-lg); padding: 28px;
    width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); text-align: center;
  }
  .avatar-picker-title { font-size: 18px; font-weight: 700; color: var(--blue-deeper); margin-bottom:6px; }
  .avatar-picker-sub { font-size: 13px; color: var(--gray-text); margin-bottom: 20px; }
  .avatar-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
  }
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 20px;
  }
  .avatar-option {
    width: 52px; height: 52px; border-radius: 50%; font-size: 28px; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    border: 2.5px solid var(--gray-light); background: var(--gray-bg); transition: all 0.15s;
  }
  .avatar-option:hover { border-color: var(--blue); background: var(--blue-light); transform: scale(1.12); }
  .avatar-option.selected { border-color: var(--blue); background: var(--blue-light); box-shadow: 0 0 0 3px var(--blue-mid); }
  .avatar-edit-hint {
    font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 6px; cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
  }
  .avatar-edit-hint:hover { color: white; }

  .student-welcome::after {
    content:''; position:absolute; width:110px; height:110px; border-radius:50%;
    background:rgba(255,255,255,0.05); bottom:-35px; right:290px; pointer-events:none;
  }


  /* ── CHILD SWITCHER ── */
  .child-switcher { display: flex; align-items: center; gap: 6px; }
  .child-pill {
    padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
    cursor: pointer; border: 1.5px solid var(--blue-mid); background: var(--white);
    color: var(--blue-deeper); transition: all 0.18s; white-space: nowrap;
  }
  .child-pill:hover { background: var(--blue-light); }
  .child-pill.active { background: var(--blue); border-color: var(--blue); color: white; }
  .child-pill-add {
    width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--blue-mid);
    background: none; cursor: pointer; color: var(--blue); font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center; transition: all 0.18s;
  }
  .child-pill-add:hover { background: var(--blue-light); border-color: var(--blue); }

  /* ── SCROLLBAR ── */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--blue-mid); border-radius: 3px; }

  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  .badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: white; font-size: 11px; font-weight: 700; }

  .empty-state { text-align: center; padding: 32px 16px; color: var(--gray-text); }
  .empty-state .empty-icon { font-size: 36px; margin-bottom: 8px; }
  .empty-state p { font-size: 14px; }

  .month-selector { display: flex; align-items: center; gap: 12px; }
  .month-nav { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--gray-mid); background: white; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
  .month-nav:hover { background: var(--blue-light); border-color: var(--blue); }
  .month-label { font-size: 15px; font-weight: 600; color: var(--blue-deeper); min-width: 130px; text-align: center; }

  /* ── SCHEDULE DAY BUTTONS ── */
  .day-btn-row { display: flex; gap: 6px; margin-top: 6px; }
  .day-btn {
    flex: 1; padding: 7px 4px; border-radius: var(--radius-sm); font-size: 12px;
    font-weight: 700; border: 1.5px solid var(--gray-mid); background: var(--white);
    color: var(--gray-text); cursor: pointer; transition: all 0.15s; text-align: center;
  }
  .day-btn:hover { border-color: var(--blue); color: var(--blue-deeper); background: var(--blue-light); }
  .day-btn.on { background: var(--blue); border-color: var(--blue); color: white; }
  .schedule-section { display: none; margin-top: 4px; }
  .schedule-section.visible { display: block; }
  .date-range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }

  .info-banner { background: var(--blue-light); border: 1px solid var(--blue-mid); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; color: var(--blue-deeper); margin-bottom: 20px; display: flex; align-items: flex-start; gap: 10px; }
  .info-banner-icon { font-size: 16px; flex-shrink: 0; }

  /* ── BEAST ACADEMY ── */
  .beast-chapter-pill {
    padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 700;
    cursor: pointer; border: 2px solid var(--blue-mid); background: var(--white);
    color: var(--blue-deeper); transition: all 0.18s; white-space: nowrap;
  }
  .beast-chapter-pill:hover { background: var(--blue-light); border-color: var(--blue); }
  .beast-chapter-pill.active { background: var(--blue); border-color: var(--blue); color: white; }
  .beast-chapter-pill.complete { border-color: var(--green); background: var(--green-light); color: #1a7a4a; }
  .beast-chapter-pill.active.complete { background: var(--green); border-color: var(--green); color: white; }
  .beast-lesson-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border-bottom: 1px solid var(--gray-light); transition: background 0.15s;
  }
  .beast-lesson-row:last-child { border-bottom: none; }
  .beast-lesson-row:hover { background: var(--gray-bg); }
  .beast-lesson-check {
    width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--blue-mid);
    flex-shrink: 0; cursor: pointer; transition: all 0.18s; background: white;
    display: flex; align-items: center; justify-content: center;
  }
  .beast-lesson-check.done { background: var(--green); border-color: var(--green); }
  .beast-lesson-check.done::after { content: '✓'; font-size: 12px; color: white; font-weight: 700; }
  .beast-lesson-info { flex: 1; }
  .beast-lesson-name { font-size: 14px; font-weight: 600; color: var(--gray-dark); }
  .beast-lesson-name.done { text-decoration: line-through; color: var(--gray-text); }
  .beast-lesson-sub { font-size: 11px; color: var(--gray-text); margin-top: 2px; }
  .beast-lesson-stars { display: flex; gap: 3px; }
  .beast-star {
    font-size: 18px; cursor: pointer; opacity: 0.25; transition: opacity 0.15s, transform 0.1s;
    line-height: 1;
  }
  .beast-star.lit { opacity: 1; }
  .beast-star:hover { transform: scale(1.2); opacity: 0.7; }
  .beast-enrichment { font-size: 10px; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: 10px; padding: 2px 7px; font-weight: 700; flex-shrink: 0; }
  .beast-progress-bar { height: 8px; background: var(--gray-light); border-radius: 4px; overflow: hidden; margin-top: 6px; }
  .beast-progress-fill { height: 100%; background: var(--green); border-radius: 4px; transition: width 0.4s; }

  /* ── CURRICULUM LESSON TRACKER ── */
  .curr-tracker-subject { border-bottom:1px solid var(--gray-light); }
  .curr-tracker-subject:last-child { border-bottom:none; }
  .curr-tracker-header {
    display:flex; align-items:center; gap:10px; padding:12px 0; cursor:pointer;
    user-select:none;
  }
  .curr-tracker-header:hover .curr-tracker-name { color:var(--blue); }
  .curr-tracker-icon { font-size:20px; flex-shrink:0; }
  .curr-tracker-name { font-size:14px; font-weight:700; color:var(--gray-dark); flex:1; }
  .curr-tracker-subject-badge { font-size:11px; color:var(--gray-text); background:var(--gray-bg); border-radius:10px; padding:2px 8px; }
  .curr-tracker-chevron { font-size:12px; color:var(--gray-text); transition:transform 0.2s; flex-shrink:0; }
  .curr-tracker-chevron.open { transform:rotate(90deg); }
  .curr-tracker-progress-row { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
  .curr-tracker-bar { flex:1; height:6px; background:var(--gray-light); border-radius:3px; overflow:hidden; }
  .curr-tracker-fill { height:100%; background:var(--green); border-radius:3px; transition:width 0.4s; }
  .curr-tracker-body { padding-bottom:16px; display:none; }
  .curr-tracker-body.open { display:block; }
  .curr-lesson-row {
    display:flex; align-items:flex-start; gap:10px; padding:8px 0;
    border-bottom:1px solid var(--gray-light);
  }
  .curr-lesson-row:last-child { border-bottom:none; }
  .curr-lesson-check {
    width:20px; height:20px; border-radius:5px; border:2px solid var(--blue-mid);
    flex-shrink:0; cursor:pointer; background:white; margin-top:1px;
    display:flex; align-items:center; justify-content:center; transition:all 0.15s;
  }
  .curr-lesson-check.done { background:var(--green); border-color:var(--green); }
  .curr-lesson-check.done::after { content:'✓'; font-size:11px; color:white; font-weight:700; }
  .curr-lesson-info { flex:1; min-width:0; }
  .curr-lesson-name { font-size:13px; font-weight:600; color:var(--gray-dark); }
  .curr-lesson-name.done { text-decoration:line-through; color:var(--gray-text); }
  .curr-lesson-meta { font-size:11px; color:var(--gray-text); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; }
  .curr-diff-btn {
    font-size:11px; padding:1px 7px; border-radius:10px; border:1px solid var(--gray-mid);
    cursor:pointer; background:var(--white); transition:all 0.12s;
  }
  .curr-diff-btn.easy.on { background:#dcfce7; border-color:#86efac; color:#166534; }
  .curr-diff-btn.ok.on { background:#fef9c3; border-color:#fcd34d; color:#92400e; }
  .curr-diff-btn.hard.on { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }
  .curr-add-lesson-row { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

  /* ── CURRICULUM SETTINGS ── */
  .curr-subject { margin-bottom:20px; }
  .curr-subject-title { font-size:13px; font-weight:700; color:var(--blue-deeper); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
  .curr-option-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }
  .curr-option {
    border:1.5px solid var(--gray-light); border-radius:var(--radius-sm); padding:10px 12px;
    cursor:pointer; transition:all 0.15s; background:var(--white);
  }
  .curr-option:hover { border-color:var(--blue-mid); background:var(--blue-light); }
  .curr-option.selected { border-color:var(--blue); background:var(--blue-light); }
  .curr-option-name { font-size:13px; font-weight:600; color:var(--gray-dark); }
  .curr-option.selected .curr-option-name { color:var(--blue-deeper); }
  .curr-option-desc { font-size:11px; color:var(--gray-text); margin-top:2px; line-height:1.3; }
  .curr-custom-input { margin-top:8px; display:flex; gap:6px; }
  .curr-display-subject { padding:12px 0; border-bottom:1px solid var(--gray-light); display:flex; gap:14px; align-items:flex-start; }
  .curr-display-subject:last-child { border-bottom:none; }
  .curr-display-icon { font-size:22px; flex-shrink:0; width:32px; text-align:center; }
  .curr-display-name { font-size:12px; font-weight:700; color:var(--blue-deeper); margin-bottom:4px; }
  .curr-display-curricula { display:flex; flex-wrap:wrap; gap:6px; }
  .curr-tag { font-size:12px; background:var(--blue-light); color:var(--blue-deeper); border:1px solid var(--blue-mid); border-radius:12px; padding:2px 10px; font-weight:600; }
  .curr-tag.custom { background:#fef9c3; color:#92400e; border-color:#fcd34d; }

  /* ── COLLAPSIBLE CARD SECTIONS ── */
  .collapsible-header {
    cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between;
  }
  .collapsible-header:hover { background: var(--blue-mid); }
  .collapsible-caret {
    font-size: 11px; color: var(--blue-deeper); transition: transform 0.2s; margin-right: 8px; flex-shrink: 0;
  }
  .collapsible-caret.open { transform: rotate(90deg); }
  .collapsible-body { overflow: hidden; transition: max-height 0.25s ease, opacity 0.2s ease; max-height: 2000px; opacity: 1; }
  .collapsible-body.collapsed { max-height: 0; opacity: 0; }


  #writing-prompt-card { border: 2px solid #e0d4f7; }
  #writing-prompt-card .card-header { background: #f3eeff; }
  #writing-prompt-card .card-header-title { color: #5b21b6; }
  #writing-prompt-response:disabled { background: var(--gray-bg); color: var(--gray-text); cursor: default; }
  @keyframes wpPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.7} }
  .wp-recording { animation: wpPulse 1s ease-in-out infinite; }

  /* ── WEEK VIEW ── */
  .week-col {
    background: var(--white); border-radius: var(--radius); border: 1.5px solid var(--gray-light);
    min-height: 160px; display: flex; flex-direction: column; transition: border-color 0.18s, background 0.18s;
  }
  .week-col.drag-over { border-color: var(--blue); background: var(--blue-light); }
  .week-col-header {
    padding: 9px 12px; border-bottom: 1px solid var(--gray-light); background: var(--blue-light);
    border-radius: var(--radius) var(--radius) 0 0; display: flex; align-items: center; justify-content: space-between;
  }
  .week-col-header.today-col { background: var(--blue); }
  .week-col-header.today-col .week-col-dow { color: white; }
  .week-col-header.today-col .week-col-date { color: rgba(255,255,255,0.85); }
  .week-col-dow { font-size: 12px; font-weight: 700; color: var(--blue-deeper); }
  .week-col-date { font-size: 11px; color: var(--gray-text); }
  .week-col-body { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
  .week-act-card {
    padding: 6px 9px; border-radius: 7px; font-size: 12px; font-weight: 600;
    border: 1.5px solid var(--blue-mid); background: var(--blue-light); color: var(--blue-deeper);
    cursor: grab; user-select: none; display: flex; align-items: flex-start; gap: 6px;
    transition: box-shadow 0.15s, opacity 0.15s; position: relative;
  }
  .week-act-card:active { cursor: grabbing; }
  .week-act-card.dragging { opacity: 0.45; box-shadow: 0 4px 16px rgba(100,149,237,0.25); }
  /* Topic colors in week view */
  .week-act-card.topic-math    { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; }
  .week-act-card.topic-reading { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
  .week-act-card.topic-writing { background: #ccfbf1; border-color: #5eead4; color: #0f766e; }
  .week-act-card.topic-science { background: #dcfce7; border-color: #86efac; color: #15803d; }
  .week-act-card.topic-social  { background: #ffedd5; border-color: #fdba74; color: #c2410c; }
  .week-act-card.topic-elective{ background: #fce7f3; border-color: #f9a8d4; color: #9d174d; }
  .week-act-card.home-card     { background: #fef9c3; border-color: #fcd34d; color: #92400e; }
  .week-act-card.extra-card    { background: #f0fdf4; border-color: #86efac; color: #166534; }
  .week-act-card.done-card { opacity: 0.5; text-decoration: line-through; }
  .week-act-card.recurring-card { border-style: dashed; cursor: default; }
  .week-act-move-btn {
    margin-left: auto; flex-shrink: 0; font-size: 11px; background: none; border: none;
    cursor: pointer; color: var(--gray-text); padding: 0 2px; opacity: 0.6;
  }
  .week-act-move-btn:hover { opacity: 1; color: var(--blue-deeper); }
  .week-col-empty { font-size: 11px; color: var(--gray-mid); text-align: center; padding: 14px 8px; }
  .week-col-add { padding: 5px 8px; border-top: 1px solid var(--gray-light); }
  .week-col-add button { width: 100%; font-size: 11px; padding: 5px; border-radius: 6px; border: 1px dashed var(--blue-mid); background: none; color: var(--blue-deeper); cursor: pointer; font-weight: 600; }
  .week-col-add button:hover { background: var(--blue-light); }
  @media(max-width:900px){
    #planner-week-grid { grid-template-columns: repeat(3,1fr) !important; }
    #planner-weekend-grid { grid-template-columns: 1fr 1fr !important; }
  }
  @media(max-width:600px){
    #planner-week-grid { grid-template-columns: 1fr 1fr !important; }
  }