:root {
    --blue: #1d4ed8;
    --blue-mid: #2563eb;
    --blue-light: #bfdbfe;
    --blue-xlight: #eff6ff;
    --green: #059669;
    --amber: #d97706;
    --red: #dc2626;
    --muted: #64748b;
    --bg: #f0f4fa;
    --card: #ffffff;
    --text: #0b1526;
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 8px rgba(15,23,42,0.06);
    --shadow-md: 0 4px 16px rgba(15,23,42,0.10), 0 1px 4px rgba(15,23,42,0.06);
    --shadow-lg: 0 16px 48px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.08);
    --shadow-blue: 0 4px 20px rgba(29,78,216,0.18);
    --border: #dde5f0;
    --border-strong: #c2d0e5;
    --radius: 18px;
    --radius-sm: 12px;
    --font-body: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-serif: 'Lora', 'Georgia', serif;
    --font-mono: 'DM Mono', 'Fira Mono', monospace;
  }

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

  html, body { overflow-x: hidden; }

  /* ── Global textbox style: light-blue bg, white on hover ── */
  input[type="text"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  textarea {
    background-color: #dbeafe !important;  /* light blue */
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
  }
  input[type="text"]:hover:not(:disabled):not([readonly]),
  input[type="number"]:hover:not(:disabled):not([readonly]),
  input[type="email"]:hover:not(:disabled),
  input[type="password"]:hover:not(:disabled),
  input[type="search"]:hover:not(:disabled),
  textarea:hover:not(:disabled) {
    background-color: #ffffff !important;
  }
  input[type="text"]:focus:not([readonly]),
  input[type="number"]:focus:not([readonly]),
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="search"]:focus,
  textarea:focus {
    background-color: #ffffff !important;
  }
  /* Read-only inputs (date pickers, steppers) keep light blue, no white on hover */
  input[readonly] {
    background-color: #dbeafe !important;
    cursor: default;
  }
  /* Dark mode: slightly darker tint */
  body.dark input[type="text"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  body.dark input[type="number"],
  body.dark input[type="email"],
  body.dark input[type="password"],
  body.dark input[readonly]:not(.flatpickr-day):not(.numInputWrapper input),
  body.dark select,
  body.dark textarea {
    background-color: #1e3a5f !important;
    color: #e2eeff !important;
    border-color: #3b82f6 !important;
  }
  body.dark input[type="text"]:hover:not(:disabled):not([readonly]),
  body.dark input[type="number"]:hover:not(:disabled):not([readonly]),
  body.dark input[type="email"]:hover:not(:disabled),
  body.dark input[type="password"]:hover:not(:disabled),
  body.dark select:hover:not(:disabled),
  body.dark textarea:hover:not(:disabled) {
    background-color: #1e4080 !important;
  }
  body.dark input[type="text"]:focus:not([readonly]),
  body.dark input[type="number"]:focus:not([readonly]),
  body.dark input[type="email"]:focus,
  body.dark input[type="password"]:focus,
  body.dark select:focus,
  body.dark textarea:focus {
    background-color: #1e4080 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.35) !important;
  }
  /* Flatpickr date inputs specifically */
  body.dark input.flatpickr-input {
    background-color: #1e3a5f !important;
    color: #e2eeff !important;
    border-color: #3b82f6 !important;
  }

  body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    margin: 0;
    transition: background 0.3s, color 0.3s;
    background-image:
      radial-gradient(ellipse at 10% 0%, rgba(191,219,254,0.55) 0%, transparent 45%),
      radial-gradient(ellipse at 90% 100%, rgba(209,250,229,0.35) 0%, transparent 40%),
      radial-gradient(ellipse at 60% 50%, rgba(255,255,255,0.2) 0%, transparent 60%);
    background-attachment: fixed;
    background-size: auto;
  }

  body.dark {
    --bg: #080d1a;
    --card: #0f1624;
    --text: #f0f6ff;
    --muted: #94a3b8;
    --border: #1a2540;
    --border-strong: #243054;
    --blue-light: #162240;
    --blue-xlight: #0d1830;
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
    --shadow-blue: 0 4px 20px rgba(37,99,235,0.3);
    background-image: radial-gradient(ellipse at 20% 20%, rgba(29,78,216,0.06) 0%, transparent 50%),
                      radial-gradient(ellipse at 80% 80%, rgba(5,150,105,0.04) 0%, transparent 50%);
    background-attachment: fixed;
    color: #f0f6ff;
    background-size: auto;
  }

  /* HEADER */
  header {
    background: rgba(255,255,255,0.82);
    border-bottom: 1px solid rgba(221,229,240,0.7);
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    box-shadow: 0 1px 0 rgba(221,229,240,0.6), 0 2px 12px rgba(15,23,42,0.06);
  }
  body.dark header {
    background: rgba(8,13,26,0.88);
    border-bottom-color: rgba(26,37,64,0.8);
    box-shadow: 0 1px 0 rgba(26,37,64,0.8), 0 2px 20px rgba(0,0,0,0.25);
  }
  .header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 6px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo { display: flex; align-items: center; }

  /* Desktop nav */
  .nav-btns { display: flex; gap: 8px; }
  .nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 0.77rem;
    font-family: var(--font-body);
    font-weight: 700;
    transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.08);
    letter-spacing: 0.01em;
  }
  .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.16); filter: brightness(1.05); }
  .nav-btn:active { transform: translateY(0px); }
  .nav-btn .icon { font-size: 0.88rem; }

  /* ── HAMBURGER BUTTON ──────────────────────────────────── */
  .hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: none;
    background: var(--bg);
    border-radius: 12px;
    cursor: pointer;
    padding: 10px;
    transition: background 0.2s;
    position: relative;
    z-index: 100;
  }
  .hamburger-btn:hover { background: var(--blue-light); }
  .hamburger-btn .bar {
    display: block;
    width: 22px;
    height: 2.5px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1),
                opacity   0.25s ease,
                width     0.25s ease;
    transform-origin: center;
  }
  /* Animated X state */
  .hamburger-btn.open .bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .hamburger-btn.open .bar:nth-child(2) { opacity: 0; width: 0; }
  .hamburger-btn.open .bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* ── MOBILE MENU DRAWER ────────────────────────────────── */
  .mobile-menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 85vw);
    background: var(--card);
    z-index: 90;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(.4,0,.2,1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.14);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .mobile-menu.open { transform: translateX(0); }

  /* Scrim overlay */
  .mobile-menu-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.4);
    backdrop-filter: blur(3px);
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .mobile-menu-scrim.open { opacity: 1; pointer-events: all; }

  .mobile-menu-header {
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .mobile-menu-logo { display: flex; align-items: center; }
  .mobile-menu-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    color: var(--muted);
    transition: background 0.15s, color 0.15s;
  }
  .mobile-menu-close:hover { background: #fee2e2; color: var(--red); }

  .mobile-menu-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    width: 100%;
    text-align: left;
    transition: background 0.15s, color 0.15s, transform 0.12s;
    text-decoration: none;
  }
  .mobile-nav-item:hover {
    background: var(--blue-light);
    color: var(--blue);
    transform: translateX(3px);
  }
  .mobile-nav-item .mn-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    transition: transform 0.15s;
  }
  .mobile-nav-item:hover .mn-icon { transform: scale(1.1); }
  .mobile-nav-item .mn-label { flex: 1; }
  .mobile-nav-item .mn-arrow {
    font-size: 0.75rem;
    color: var(--muted);
    opacity: 0.5;
  }

  .mobile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 4px;
  }
  .mobile-menu-section-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    padding: 8px 16px 4px;
  }

  .mobile-menu-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
  }

  /* Responsive breakpoints */
  @media (max-width: 768px) {
    .nav-btns        { display: none; }
    .hamburger-btn   { display: flex; }
    main             { padding: 18px 14px; }
    .header-inner    { padding: 10px 14px; }
  }
  @media (min-width: 769px) {
    .hamburger-btn   { display: none; }
  }

  /* Mobile menu is always in DOM, hidden via transform. Never use display:none on it. */
  .mobile-menu-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.4);
    backdrop-filter: blur(3px);
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    /* override any display:none from old rules */
    display: block !important;
  }
  .mobile-menu-scrim.open { opacity: 1; pointer-events: all; }

  .mobile-menu {
    display: flex !important; /* always in DOM */
  }

  /* SNAPSHOT BANNER */
  /* ─── SNAPSHOT BANNER ─────────────────────────── */
  @keyframes sPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.35; transform:scale(0.6); }
  }
  /* ── Banner brand block ── */
  @media (max-width: 480px) {
  }

  /* ─── Chart panel ─── */
  
  
  
  .chart-tab.active { background:var(--blue); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,0.25); }
  body.dark 
  body.dark .chart-tab.active { background:#2563eb; color:#fff; }
  @keyframes graphFloat {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
  }
  
  
  
  /* ─── Line chart ─── */
  
  .sg-chart-wrap svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  
  
  
  .sg-line-path.delay1 { animation-delay: 0.3s; }
  .sg-line-path.delay2 { animation-delay: 0.5s; }
  @keyframes drawLine {
    to { stroke-dashoffset: 0; }
  }
  
  .sg-area-path.delay1 { animation-delay: 1.5s; }
  .sg-area-path.delay2 { animation-delay: 1.7s; }
  @keyframes fadeArea {
    to { opacity: 1; }
  }
  
  
  @keyframes dotPop {
    to { opacity: 1; }
  }
  
  
  
  
  
  
  
  @media (max-width: 860px) {
  }

  /* MAIN */
  main { max-width: 1280px; margin: 0 auto; padding: 36px 28px; }

  /* INPUT + STATS GRID */
  .top-grid {
    display: grid;
    grid-template-columns: 300px repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 24px;
  }
  @media(max-width:960px){ .top-grid { grid-template-columns: 1fr 1fr; } .input-panel { grid-column: 1 / -1; } }
  @media(max-width:480px){ .top-grid { grid-template-columns: 1fr; } }

  .card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 22px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s, transform 0.25s;
  }
  .card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

  /* COUNTDOWN CARD pulse */
  .countdown-card .stat-value { animation: pulse-purple 2s ease-in-out infinite; }
  @keyframes pulse-purple { 0%,100%{opacity:1} 50%{opacity:0.7} }

  /* TODAY cell highlight */
  .day-cell.is-today {
    box-shadow: 0 0 0 3px #7c3aed, inset 0 0 0 2px #7c3aed22;
    z-index: 2;
  }
  .today-badge {
    position: absolute; top: 3px; right: 3px;
    background: #7c3aed; color: #fff;
    font-size: 0.52rem; font-weight: 800;
    padding: 1px 5px; border-radius: 99px;
    z-index: 3; letter-spacing: 0.04em;
  }

  /* SUBJECT completion slider */
  .subj-completion-row {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px 10px; border-top: 1px solid var(--border);
  }
  .subj-completion-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .subj-completion-slider { flex: 1; accent-color: #059669; height: 4px; cursor: pointer; }
  .subj-completion-pct { font-size: 0.75rem; font-weight: 800; color: #059669; min-width: 36px; text-align: right; }
  .subj-completion-done { font-size: 0.68rem; font-weight: 700; color: #059669; background: #d1fae5; padding: 2px 8px; border-radius: 99px; display: none; }

  /* BURNOUT WARNING badge */
  .burnout-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.65rem; font-weight: 800;
    padding: 2px 8px; border-radius: 99px;
    background: #fef3c7; color: #b45309; border: 1px solid #fcd34d;
    white-space: nowrap; flex-shrink: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  .burnout-badge.critical { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

  /* REVIEW BLOCK cells */
  .type-review-block { background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important; border-color: #6ee7b7 !important; }

  /* EXAM SCHEDULE - every N weeks option */
  .review-block-control { display: flex; align-items: center; gap: 8px; }

  /* INPUT field focus states */
  #examName:focus, #targetScore:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }

  /* Subject name inline edit */
  .subj-name-input {
    flex: 1;
    min-width: 80px;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    outline: none;
    padding: 2px 6px;
    border-radius: 0;
    font-family: var(--font-body);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, border-radius 0.15s;
    letter-spacing: -0.01em;
  }
  .subj-name-input:hover { border-bottom-color: var(--border); }
  body.dark .subj-name-input { color: var(--text); }

  /* Mini progress bar in header */
  .subj-progress-mini {
    flex-shrink: 0;
    min-width: 54px;
    text-align: center;
  }

  /* Subject field inputs more visible */
  .subject-field input[type="number"],
  .subject-field input[type="text"] {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .subject-field input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
  }
  .subject-field input:disabled { opacity: 0.35; cursor: not-allowed; }

  /* SUBJECT DRAG HANDLE */
  .subj-drag-handle {
    cursor: grab; color: var(--muted); font-size: 1rem;
    padding: 0 8px; align-self: stretch; display: flex; align-items: center;
    opacity: 0.4; transition: opacity 0.15s; user-select: none;
  }
  .subj-drag-handle:hover { opacity: 1; }
  .subject-item.drag-over-top { border-top: 3px solid var(--blue); }
  .subject-item.drag-over-bot { border-bottom: 3px solid var(--blue); }

  /* ── ADD SUBJECT FORM PANEL ─────────────────────────────── */
  .add-subject-form-panel {
    background: linear-gradient(135deg, #f0f7ff 0%, #f8fbff 100%);
    border: 1.5px solid #d0e4f7;
    border-radius: 16px;
    padding: 18px 22px 20px;
    margin-bottom: 20px;
    transition: opacity 0.2s, filter 0.2s;
  }
  .add-subject-form-panel.asf-locked {
    opacity: 0.4;
    filter: grayscale(0.4);
    pointer-events: none;
    user-select: none;
  }
  .add-subject-form-panel.asf-locked .add-subject-form-title {
    pointer-events: all;
    opacity: 1;
    filter: none;
  }
  body.dark .add-subject-form-panel {
    background: linear-gradient(135deg, rgba(22,34,64,0.6) 0%, rgba(15,22,40,0.4) 100%);
    border-color: rgba(59,130,246,0.18);
  }
  .add-subject-form-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--blue);
    margin-bottom: 12px;
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    display: block;
    width: 100%;
    text-align: left;
  }
  /* When the panel is locked, the title becomes a clickable unlock button */
  .asf-locked .add-subject-form-title {
    cursor: pointer;
    pointer-events: all !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--blue);
    color: #fff;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(37,99,235,0.25);
    margin-bottom: 0;
  }
  .asf-locked .add-subject-form-title:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37,99,235,0.4);
  }
  .asf-locked .add-subject-form-title:active {
    transform: scale(0.97);
  }
  .add-subject-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: flex-end;
  }
  .asf-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .asf-field-name { flex: 1; min-width: 160px; }
  .asf-field-check { justify-content: flex-end; }
  .asf-field-btn { margin-left: auto; }
  .asf-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    white-space: nowrap;
  }
  .asf-input {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
  }
  .asf-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
  }
  .asf-input-sm { width: 90px; }
  .asf-fullplan-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 40px;
  }
  .asf-fullplan-toggle input { display: none; }
  .asf-toggle-track {
    width: 42px;
    height: 24px;
    background: var(--border);
    border-radius: 99px;
    position: relative;
    transition: background 0.2s;
  }
  .asf-fullplan-toggle input:checked ~ .asf-toggle-track { background: var(--blue); }
  .asf-toggle-thumb {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    top: 3px; left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  }
  .asf-fullplan-toggle input:checked ~ .asf-toggle-track .asf-toggle-thumb {
    transform: translateX(18px);
  }

  @media (max-width: 640px) {
    .add-subject-form-grid { gap: 8px 10px; }
    .asf-input-sm { width: 80px; }
    .asf-field-name { min-width: 120px; }
    .asf-field-btn { width: 100%; margin-left: 0; }
    .asf-field-btn .btn-add-subject { width: 100%; }
  }

  /* ── NEW SUBJECT BUTTON ──────────────────────────────────── */
  .btn-new-subject {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 3px 10px rgba(37,99,235,0.35);
    white-space: nowrap;
    letter-spacing: 0.01em;
  }
  .btn-new-subject:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37,99,235,0.45); }
  body.dark .btn-new-subject { box-shadow: 0 3px 10px rgba(59,130,246,0.25); }

  /* ── ADD SUBJECT DRAWER ──────────────────────────────────── */
  .add-subject-drawer {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease, margin-bottom 0.38s;
    margin-bottom: 0;
  }
  .add-subject-drawer.open {
    max-height: 600px;
    opacity: 1;
    margin-bottom: 20px;
  }
  @media (max-width: 640px) {
    .add-subject-drawer.open { max-height: 800px; }
  }
  .add-subject-drawer-inner {
    background: var(--blue-xlight);
    border: 1.5px solid var(--blue-light);
    border-radius: 14px;
    padding: 20px 22px 18px;
  }
  body.dark .add-subject-drawer-inner {
    background: rgba(30,58,138,0.12);
    border-color: rgba(59,130,246,0.2);
  }
  .drawer-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .drawer-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .drawer-close-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--card);
    color: var(--muted);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .drawer-close-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

  .drawer-fields {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px 18px;
    align-items: end;
    margin-bottom: 14px;
  }
  @media (max-width: 640px) {
    .drawer-fields { grid-template-columns: 1fr 1fr; }
    .drawer-fields > .drawer-field-group:first-child { grid-column: 1 / -1; }
    .drawer-input-narrow { width: 100%; max-width: 100%; }
  }
  @media (max-width: 400px) {
    .drawer-fields { grid-template-columns: 1fr; }
    .drawer-fields > .drawer-field-group:first-child { grid-column: unset; }
  }

  .drawer-field-group { display: flex; flex-direction: column; gap: 6px; }
  .drawer-field-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
  }
  .drawer-input {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 0.9rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .drawer-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
  .drawer-input-wide { width: 100%; }
  .drawer-input-narrow { width: 90px; }
  .drawer-fullplan { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--text); cursor: pointer; white-space: nowrap; }
  .drawer-fullplan input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }

  .drawer-chips-hint { margin-bottom: 8px; }

  .drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  @media (max-width: 400px) {
    .drawer-actions { flex-direction: column; }
    .btn-drawer-cancel, .btn-add-subject { width: 100%; text-align: center; }
  }
  .btn-drawer-cancel {
    padding: 9px 18px;
    border-radius: 9px;
    border: 1.5px solid var(--border);
    background: var(--card);
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.15s;
  }
  .btn-drawer-cancel:hover { background: var(--blue-xlight); }

  /* CHIP ACTIVE STATE */
  .chip-active {
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    border-width: 2px !important;
  }

  /* INPUT PANEL */
  .input-panel label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 5px;
    margin-top: 14px;
  }
  .input-panel label:first-child { margin-top: 0; }
  .input-panel input {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-family: var(--font-body);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .input-panel input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
  .stepper-wrap { display:flex; align-items:center; gap:6px; width:100%; }
  .stepper-wrap input { flex:1; text-align:center; font-weight:700; font-size:1rem; cursor:default; user-select:none; }
  .stepper-btn { flex-shrink:0; width:36px; height:36px; border-radius:9px; border:1.5px solid var(--border); background:var(--blue-xlight); color:var(--blue); font-size:1.25rem; font-weight:700; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.15s,transform 0.1s; user-select:none; }
  .stepper-btn:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
  .stepper-btn:active { transform:scale(0.9); }
  body.dark .stepper-btn { background:rgba(37,99,235,0.12); color:#93c5fd; border-color:rgba(99,140,255,0.25); }
  body.dark .stepper-btn:hover { background:#2563eb; color:#fff; }

  /* STAT CARDS */
  .stat-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    position: relative;
    overflow: hidden;
  }
  .stat-card::before {
    content: attr(data-icon);
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 2.8rem;
    opacity: 0.06;
    line-height: 1;
    pointer-events: none;
  }
  .stat-label {
    font-size: 0.63rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .stat-value {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.03em;
  }
  .stat-value.blue  { color: var(--blue); }
  .stat-value.green { color: var(--green); }
  .stat-value.amber { color: var(--amber); }
  .stat-value.red   { color: var(--red); }
  .stat-accent {
    width: 28px; height: 3px;
    border-radius: 2px;
    margin-top: 4px;
  }

  /* =============================================
     SUBJECT TRACKER SECTION
  ============================================= */
  .subjects-section {
    background: var(--card);
    border-radius: var(--radius);
    padding: 28px 28px 24px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    transition: box-shadow 0.25s;
  }
  .subjects-section:hover { box-shadow: var(--shadow-md); }
  .subjects-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1.5px solid var(--border);
  }
  .subjects-section-header h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--text);
  }
  .subjects-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }

  /* ADD SUBJECT FORM */
  .add-subject-form {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
  .add-subject-form input[type="text"] {
    flex: 1;
    min-width: 160px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-family: var(--font-body);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .add-subject-form input[type="text"]:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
  .add-subject-form input[type="number"] {
    width: 80px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-family: var(--font-body);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .add-subject-form input[type="number"]:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
  .color-swatch-picker {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
  }
  .color-swatch {
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.15s, border-color 0.15s;
    flex-shrink: 0;
  }
  .color-swatch:hover { transform: scale(1.2); }
  .color-swatch.selected { border-color: var(--text); transform: scale(1.15); }
  .btn-add-subject {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 60%, #3b82f6 100%);
    color: white;
    border: none;
    border-radius: 11px;
    padding: 10px 22px;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(37,99,235,0.30), 0 4px 16px rgba(37,99,235,0.20);
    letter-spacing: 0.01em;
  }
  .btn-add-subject:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,99,235,0.45); }
  .btn-add-subject:active { transform: translateY(0px); }

  /* ── SUBJECT LIST (compact, above categories) ── */
  .subject-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
  }
  .subject-item {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.22s, transform 0.22s, border-color 0.22s;
  }
  .subject-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #93c5fd; }
  .subject-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .subject-item-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
  }
  @media (max-width: 560px) {
    .subject-item-fields { grid-template-columns: 1fr 1fr; }
    .subject-field:nth-child(2n) { border-right: none; }
    .subject-field:nth-child(n+3) { border-top: 1px solid var(--border); }
    .subject-fullplan-field { border-right: 1px solid var(--border); }
  }
  @media (max-width: 380px) {
    .subject-item-fields { grid-template-columns: 1fr; }
    .subject-field, .subject-fullplan-field { border-right: none; border-top: 1px solid var(--border); }
  }
  .subject-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 12px;
    border-right: 1px solid var(--border);
    gap: 4px;
  }
  .subject-field:last-child { border-right: none; }
  .subject-field-label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
  }
  .subject-field input[type="number"], .subject-field input[type="text"] {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    background: var(--blue-xlight);
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 5px 8px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.15s;
  }
  .subject-field input:focus { border-color: var(--blue); }
  .subject-field input:disabled { opacity: 0.35; }
  .subject-fullplan-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    gap: 6px;
    border-right: 1px solid var(--border);
  }
  .subject-fullplan-toggle {
    position: relative;
    width: 42px;
    height: 22px;
    flex-shrink: 0;
  }
  .subject-fullplan-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
  .subject-fullplan-slider {
    position: absolute; inset: 0;
    background: #cbd5e1;
    border-radius: 99px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .subject-fullplan-slider::before {
    content: "";
    position: absolute;
    width: 16px; height: 16px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .subject-fullplan-toggle input:checked + .subject-fullplan-slider { background: var(--blue); }
  .subject-fullplan-toggle input:checked + .subject-fullplan-slider::before { transform: translateX(20px); }
  body.dark .subject-field input { color: var(--text); }  /* bg handled by global dark rule */
  body.dark .subject-fullplan-slider { background: #334155; }
  .subject-color-bar {
    width: 4px; height: 32px;
    border-radius: 99px;
    flex-shrink: 0;
  }
  .subject-name {
    font-weight: 700;
    font-size: 0.92rem;
    flex: 1;
    min-width: 100px;
    letter-spacing: -0.01em;
  }
  .subject-days-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .full-days-label {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.72rem; font-weight: 700; color: var(--blue);
    cursor: pointer; user-select: none; white-space: nowrap;
  }
  .full-days-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--blue); cursor: pointer; }
  .full-days-active .subj-inline-days { opacity: 0.35; pointer-events: none; }
  .subject-days-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    color: white;
    white-space: nowrap;
  }
  .subject-days-count {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
  }
  .subject-progress-bar-outer {
    width: 100px; height: 6px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
  }
  .subject-progress-bar-inner {
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease;
  }
  .btn-remove-subject {
    background: #fee2e2;
    border: 1.5px solid #fecaca;
    cursor: pointer;
    color: #dc2626;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-body);
    padding: 5px 12px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .btn-remove-subject:hover { background: #dc2626; color: white; border-color: #dc2626; transform: scale(1.04); }
  body.dark .btn-remove-subject { background: #3b0000; border-color: #7f1d1d; color: #fca5a5; }
  body.dark .btn-remove-subject:hover { background: #dc2626; color: white; }


  /* Each big category accordion button */
  .matcat-accordion {
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: var(--card);
    overflow: hidden;
    transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
    box-shadow: 0 1px 4px rgba(30,58,138,0.05);
  }
  .matcat-accordion:hover { border-color: #93c5fd; box-shadow: 0 4px 16px rgba(30,58,138,0.10); transform: translateY(-1px); }
  body.dark .matcat-accordion { background: var(--card); border-color: var(--border); }
  body.dark .matcat-accordion:hover { border-color: #3b5fc0; }

  .matcat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.18s;
    background: linear-gradient(105deg, #eff6ff 0%, #f8faff 100%);
    border-radius: 14px;
    gap: 12px;
  }
  body.dark .matcat-header { background: linear-gradient(105deg, rgba(22,34,64,0.7) 0%, rgba(15,22,36,0.4) 100%); }
  .matcat-accordion.open .matcat-header { border-radius: 14px 14px 0 0; }
  .matcat-header:hover { background: linear-gradient(105deg, #dbeafe 0%, #eff6ff 100%); }
  body.dark .matcat-header:hover { background: linear-gradient(105deg, rgba(30,50,100,0.8) 0%, rgba(22,34,64,0.6) 100%); }

  .matcat-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .matcat-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
  }
  .matcat-title {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e3a8a;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.dark .matcat-title { color: #93c5fd; }

  .matcat-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .matcat-chip-preview {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .matcat-chip-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    opacity: 0.7;
  }

  .matcat-arrow {
    font-size: 0.6rem;
    color: #3b82f6;
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
    opacity: 0.7;
  }
  body.dark .matcat-arrow { color: #60a5fa; }
  .matcat-accordion.open .matcat-arrow { transform: rotate(180deg); opacity: 1; }

  /* Accordion body */
  .matcat-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(.4,0,.2,1);
    background: var(--card);
  }
  .matcat-accordion.open .matcat-body {
    max-height: 800px;
    border-top: 1px solid var(--border);
  }
  body.dark .matcat-accordion.open .matcat-body { border-top-color: var(--border); }
  .matcat-body-inner {
    padding: 16px 20px 18px;
  }

  /* Per-subject qty row inside a category */
  .matcat-no-subjects {
    font-size: 0.83rem;
    color: var(--muted);
    font-style: italic;
    text-align: center;
    padding: 10px 0 6px;
  }
  .matcat-subject-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
  }
  .matcat-subject-row:last-child { border-bottom: none; }
  .matcat-subj-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .matcat-subj-name {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .matcat-qty-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .matcat-qty-input {
    width: 72px;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    padding: 7px 10px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    outline: none;
    transition: border-color 0.18s;
  }
  .matcat-qty-input:focus { border-color: var(--blue); }
  .matcat-unit-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    min-width: 44px;
  }
  .matcat-perday {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--blue);
    min-width: 60px;
    text-align: right;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .matcat-perday.show { opacity: 1; }

  /* SUBJECT BREAKDOWN CHART */
  .subject-breakdown {
    margin-top: 16px;
  }
  .subject-breakdown-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }
  .breakdown-bar {
    display: flex;
    height: 10px;
    border-radius: 99px;
    overflow: hidden;
    gap: 2px;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
  }
  .breakdown-segment {
    height: 100%;
    transition: width 0.5s cubic-bezier(.4,0,.2,1);
    position: relative;
    min-width: 4px;
  }
  .unassigned-segment {
    height: 100%;
    background: var(--border);
    flex: 1;
    transition: flex 0.5s;
  }
  .breakdown-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .breakdown-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--muted);
  }
  .breakdown-legend-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }



  /* CALENDAR SECTION */
  .calendar-section {
    background: var(--card);
    border-radius: var(--radius);
    padding: 30px 28px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .day-grid, .weekday-labels { min-width: 280px; }
  .calendar-section h3 {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    color: var(--text);
  }

  /* LEGEND */
  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
  }
  .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--bg);
    padding: 3px 10px;
    border-radius: 99px;
    border: 1px solid var(--border);
    letter-spacing: 0.02em;
  }
  .legend-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
  }

  /* DAY GRID */
  .weekday-labels {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 5px;
  }

  .month-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    margin: 28px 0 10px;
    color: var(--text);
    letter-spacing: -0.01em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .month-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--border), transparent);
  }

  .day-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }
  .day-cell {
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 7px;
    min-height: 80px;
    background: var(--card);
    transition: background 0.15s, box-shadow 0.18s, transform 0.15s;
    cursor: pointer;
    position: relative;
    user-select: none;
  }
  .day-cell.in-range {
    background: var(--blue-xlight);
    border-color: #c7d9f5;
  }
  .day-cell.in-range:hover {
    box-shadow: 0 4px 16px rgba(37,99,235,0.13);
    z-index: 2;
    border-color: #93c5fd;
    transform: translateY(-1px);
  }
  .day-cell.type-off    { background: #fffbeb; border-color: #fde68a; }
  .day-cell.type-exam   { background: #eff6ff; border-color: #93c5fd; }
  .day-cell.type-review { background: #f0fdf4; border-color: #86efac; }
  .day-cell.type-study  { background: var(--blue-light); border-color: #bfdbfe; }
  body.dark .day-cell.type-off    { background: #2d2000; border-color: #92400e; }
  body.dark .day-cell.type-exam   { background: #0f1e40; border-color: #1d4ed8; }
  body.dark .day-cell.type-review { background: #052e16; border-color: #166534; }

  /* Subject-colored day cell — rich visual */
  .day-cell.has-subject {
    border-width: 1.5px;
    position: relative;
    overflow: hidden;
  }
  /* Soft colour wash */
  .day-cell.has-subject::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.07;
    border-radius: 9px;
    background: var(--subject-color, #2563eb);
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .day-cell.has-subject:hover::before { opacity: 0.13; }

  /* Left accent bar — thinner, softer */
  .day-cell-subject-bar {
    position: absolute;
    top: 4px; left: 0; bottom: 4px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    opacity: 0.6;
    z-index: 1;
  }

  /* Bottom stripe */
  .day-cell-subject-stripe {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    border-radius: 0 0 8px 8px;
    opacity: 0.5;
    z-index: 1;
  }

  /* Subject name pill — lighter, softer */
  .subject-badge {
    margin-top: 4px;
    padding: 2px 7px;
    font-size: 0.6rem;
    font-weight: 800;
    border-radius: 99px;
    color: white;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: 0.02em;
    opacity: 0.9;
    position: relative;
    z-index: 2;
  }

  /* Multi-subject stacked layout */
  .multi-subject-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
    position: relative;
    z-index: 2;
  }
  .multi-subject-item {
    border-radius: 6px;
    padding: 2px 5px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: relative;
    overflow: hidden;
  }
  .multi-subject-item::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.15;
    border-radius: 6px;
  }
  .multi-subject-name {
    font-size: 0.58rem;
    font-weight: 800;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
  .multi-subject-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
  }
  .multi-subject-pill {
    font-size: 0.52rem;
    font-weight: 800;
    color: #fff;
    border-radius: 3px;
    padding: 0 3px;
    line-height: 1.4;
  }
  /* Multi-stripe at bottom showing all subject colors */
  .multi-subject-stripe {
    display: flex;
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
  }
  .multi-subject-stripe-seg {
    flex: 1;
  }
  /* Remove single-subject stripe when multi */
  .day-cell.has-multi-subjects .day-cell-subject-stripe { display: none; }
  .day-cell.has-multi-subjects .day-cell-subject-bar { display: none; }

  /* Auto-assigned */
  .day-cell.subject-auto::before { opacity: 0.05; }
  .day-cell.subject-auto .subject-badge { opacity: 0.6; }

  /* Daily items line under subject name */
  .subject-daily-items {
    margin-top: 3px;
    max-width: 100%;
    overflow: hidden;
  }

  /* Pulse animation when subject first assigned */
  @keyframes subjectPop {
    0%   { transform: scale(0.94); opacity: 0; }
    60%  { transform: scale(1.03); }
    100% { transform: scale(1);    opacity: 1; }
  }
  .day-cell.subject-new { animation: subjectPop 0.28s cubic-bezier(.34,1.56,.64,1); }

  /* Drag and drop */
  .day-cell.in-range { cursor: grab; }
  .day-cell.dragging { opacity: 0.4 !important; outline: 2px dashed #94a3b8; }
  .day-cell.drag-over {
    outline: 3px dashed var(--blue) !important;
    outline-offset: -3px;
    background: #bfdbfe !important;
    cursor: copy;
  }
  /* When dropping onto a cell that already has subjects, show "+" add indicator */
  .day-cell.drag-over.has-subject::after,
  .day-cell.drag-over.has-multi-subjects::after {
    content: '+ ADD';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--blue);
    color: white;
    font-size: 0.6rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 99px;
    z-index: 10;
    pointer-events: none;
  }
  /* Ghost pill that follows cursor */
  #drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    background: white;
    border: 2px solid var(--blue);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-body);
    color: #1e293b;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
    white-space: nowrap;
    display: none;
    line-height: 1.4;
  }

  .day-num {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--muted);
    font-family: var(--font-mono);
    letter-spacing: -0.03em;
    opacity: 0.75;
  }
  .day-cell.in-range .day-num { color: var(--blue); opacity: 1; }

  .event-badge {
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 0.6rem;
    font-weight: 800;
    border-radius: 99px;
    color: white;
    display: inline-block;
    letter-spacing: 0.04em;
  }
  .badge-start  { background: var(--green); }
  .badge-test   { background: var(--red); }
  .badge-dayoff { background: var(--amber); }
  .badge-exam   { background: var(--blue); }

  /* HOURS BADGE */
  .hours-badge {
    background: var(--blue-light);
    color: var(--blue);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 3px;
    display: inline-block;
  }

  /* ── WEEK SUMMARY ROW ─────────────────────────────────── */
  .week-summary-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    margin: 2px 0 4px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    flex-wrap: wrap;
    animation: weekRowFade 0.2s ease;
  }
  @keyframes weekRowFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  body.dark .week-summary-row { background: rgba(255,255,255,0.03); }
  .week-summary-row .ws-label {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    min-width: 36px;
    font-family: var(--font-mono);
  }
  .week-summary-row .ws-divider {
    width: 1px;
    height: 14px;
    background: var(--border);
    flex-shrink: 0;
  }
  .ws-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
    letter-spacing: 0.02em;
  }
  .ws-chip.study  { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
  .ws-chip.off    { background: #fef3c7; color: #92400e; border-color: #fde68a; }
  .ws-chip.exam   { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
  .ws-chip.review { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
  .ws-chip.hours  { background: #f1f5f9; color: var(--muted); border-color: var(--border); }
  body.dark .ws-chip.study  { background: #1e3a5f; color: #93c5fd; }
  body.dark .ws-chip.off    { background: #2d2000; color: #fbbf24; }
  body.dark .ws-chip.exam   { background: #0f1e40; color: #60a5fa; }
  body.dark .ws-chip.review { background: #052e16; color: #86efac; }
  body.dark .ws-chip.hours  { background: #1e293b; color: var(--muted); }
  .ws-subjects {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
  }
  .ws-subject-dot {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
  }
  .ws-balance {
    margin-left: auto;
    font-size: 0.67rem;
    font-weight: 800;
    font-family: var(--font-mono);
  }
  .ws-balance.good   { background: #dcfce7; color: #15803d; }
  .ws-balance.warn   { background: #fef3c7; color: #92400e; }
  .ws-balance.heavy  { background: #fee2e2; color: #991b1b; }
  body.dark .ws-balance.good  { background: #052e16; color: #86efac; }
  body.dark .ws-balance.warn  { background: #2d2000; color: #fcd34d; }
  body.dark .ws-balance.heavy { background: #3b0000; color: #fca5a5; }

  /* EMPTY STATE */
  .empty-state {
    text-align: center;
    padding: 60px 0;
    color: var(--muted);
  }
  .empty-state .emoji { font-size: 3rem; display: block; margin-bottom: 12px; }
  .empty-state p { font-size: 1rem; margin: 0; }

  /* MODAL */
  /* ══════════════════════════════════════════════════════════
     FOOTER
  ══════════════════════════════════════════════════════════ */
  .site-footer {
    background: #0b1526;
    color: #94a3b8;
    padding: 52px 20px 0;
    margin-top: 0;
  }
  .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  @media (max-width: 820px) {
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  }
  @media (max-width: 480px) {
    .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  }

  /* Brand */
  .footer-logo-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
  }
  .footer-logo-text {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .footer-logo-sub {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #3b82f6;
  }
  .footer-tagline {
    font-size: 0.8rem;
    line-height: 1.65;
    color: #64748b;
    margin-bottom: 14px;
    max-width: 280px;
  }
  .footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(37,99,235,0.15);
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 99px;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #93c5fd;
  }

  /* Columns */
  .footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .footer-col-title {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #ffffff;
    margin-bottom: 4px;
  }
  .footer-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s;
  }
  .footer-link:hover { color: #93c5fd; }
  .footer-text {
    font-size: 0.8rem;
    color: #475569;
  }

  /* Bottom bar */
  .footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.72rem;
    color: #334155;
  }
  .footer-bottom-links { display: flex; align-items: center; gap: 8px; }
  .footer-bottom-link {
    color: #475569;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
  }
  .footer-bottom-link:hover { color: #93c5fd; }
  .footer-bottom-dot { color: #1e293b; }

  /* ══════════════════════════════════════════════════════════ */
  .membership-section {
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
    border-top: 1px solid #e0eeff;
    border-bottom: 1px solid #e0eeff;
    padding: 32px 20px 36px;
  }
  .membership-inner { max-width: 960px; margin: 0 auto; }

  /* Compact horizontal layout */
  .pricing-compact {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 20px;
    align-items: center;
  }
  @media (max-width: 700px) {
    .pricing-compact { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
  }

  .pricing-compact-heading { padding-right: 12px; }
  .pricing-card-sm { padding: 20px 20px 16px; }
  .membership-eyebrow {
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.12em; color: #1d4ed8; margin-bottom: 10px;
  }
  .membership-title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 700; color: #1e3a8a;
    letter-spacing: -0.02em; margin: 0 0 12px;
  }
  .membership-desc {
    font-size: 0.88rem; color: #475569;
    max-width: 520px; margin: 0 auto; line-height: 1.65;
  }
  .pricing-cards {
    display: grid; grid-template-columns: 1fr 1.1fr;
    gap: 20px; align-items: start;
  }
  @media (max-width: 600px) {
    .pricing-cards { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  }
  .pricing-card {
    background: #ffffff; border: 1.5px solid #e2e8f0;
    border-radius: 20px; padding: 28px 28px 24px;
    position: relative; transition: box-shadow 0.2s;
  }
  .pricing-card:hover { box-shadow: 0 8px 32px rgba(30,58,138,0.08); }
  .pricing-card-featured {
    border-color: #1d4ed8;
    background: linear-gradient(160deg, #eff6ff 0%, #ffffff 60%);
    box-shadow: 0 8px 40px rgba(29,78,216,0.14);
  }
  .pricing-card-featured:hover { box-shadow: 0 12px 48px rgba(29,78,216,0.22); }
  .pricing-badge-top {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg,#1d4ed8,#3b82f6); color: #fff;
    font-size: 0.65rem; font-weight: 800; padding: 3px 14px;
    border-radius: 99px; white-space: nowrap; letter-spacing: 0.04em;
  }
  .pricing-card-top { margin-bottom: 22px; }
  .pricing-tier {
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.1em; color: #64748b; margin-bottom: 8px;
  }
  .pricing-card-featured .pricing-tier { color: #1d4ed8; }
  .pricing-price {
    font-family: var(--font-serif); font-size: 2.4rem; font-weight: 700;
    color: #1e293b; letter-spacing: -0.03em; line-height: 1;
    display: flex; align-items: baseline; gap: 6px;
  }
  .pricing-price-once {
    font-size: 0.75rem; font-weight: 700; color: #10b981; text-transform: uppercase;
    letter-spacing: 0.06em; background: #ecfdf5; border: 1px solid #6ee7b7;
    border-radius: 6px; padding: 2px 7px; font-family: var(--font-body);
  }
  .pricing-price-sub { font-size: 0.72rem; color: #64748b; font-weight: 600; margin-top: 4px; }
  .pricing-features {
    list-style: none; padding: 0; margin: 0 0 22px;
    display: flex; flex-direction: column; gap: 9px;
  }
  .pricing-features li {
    font-size: 0.82rem; color: #334155; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
  }
  .pricing-features li::before {
    width: 17px; height: 17px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 900; flex-shrink: 0;
  }
  .pf-yes::before { background: #dcfce7; color: #16a34a; content: '✓'; }
  .pf-no  { color: #94a3b8 !important; }
  .pf-no::before  { background: #f1f5f9; color: #cbd5e1; content: '✕'; }
  .pricing-btn {
    width: 100%; padding: 12px 20px; border-radius: 12px;
    font-size: 0.9rem; font-weight: 800; font-family: var(--font-body);
    cursor: pointer; border: none; transition: all 0.18s; letter-spacing: -0.01em;
  }
  .pricing-btn-free { background: #f1f5f9; color: #334155; border: 1.5px solid #e2e8f0; }
  .pricing-btn-free:hover { background: #e2e8f0; }
  .pricing-btn-member {
    background: linear-gradient(135deg,#1d4ed8,#3b82f6); color: #fff;
    box-shadow: 0 4px 16px rgba(29,78,216,0.35);
  }
  .pricing-btn-member:hover {
    background: linear-gradient(135deg,#1e40af,#2563eb);
    box-shadow: 0 6px 22px rgba(29,78,216,0.45); transform: translateY(-1px);
  }
  .pricing-guarantee { font-size: 0.65rem; color: #64748b; text-align: center; margin-top: 10px; font-weight: 600; }
  body.dark .membership-section { background: linear-gradient(180deg,#0f1e38 0%,var(--bg) 100%); border-color: #1e3a8a; }
  body.dark .pricing-card { background: #0f172a; border-color: #1e293b; }
  body.dark .pricing-card-featured { background: linear-gradient(160deg,#0f1e38 0%,#0f172a 60%); border-color: #1d4ed8; }
  body.dark .pricing-price { color: #f1f5f9; }
  body.dark .pricing-features li { color: #cbd5e1; }
  body.dark .pf-no { color: #475569 !important; }
  body.dark .membership-title { color: #bfdbfe; }
  body.dark .membership-desc { color: #94a3b8; }
  body.dark .pricing-btn-free { background: #1e293b; color: #94a3b8; border-color: #334155; }

  /* ═══ AUTH MODAL ═══════════════════════════════════════ */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,15,40,0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .modal-overlay.open { opacity: 1; pointer-events: all; }

  .modal-box {
    background: #ffffff;
    border-radius: 28px;
    width: 100%;
    max-width: 440px;
    position: relative;
    transform: translateY(32px) scale(0.96);
    transition: transform 0.35s cubic-bezier(.34,1.4,.64,1);
    box-shadow: 0 32px 80px rgba(15,23,42,0.28), 0 0 0 1px rgba(37,99,235,0.08);
    overflow: hidden;
  }
  body.dark .modal-box { background: #0f172a; box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(96,165,250,0.12); }
  .modal-overlay.open .modal-box { transform: translateY(0) scale(1); }

  /* Decorative top band */
  .modal-top-band {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #3b82f6 100%);
    padding: 32px 32px 28px;
    position: relative;
    overflow: hidden;
  }
  .modal-top-band::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
  }
  .modal-top-band::after {
    content: '';
    position: absolute;
    bottom: -30px; left: 20px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
  }
  .modal-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
  }
  .modal-logo-icon {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    border: 1px solid rgba(255,255,255,0.2);
  }
  .modal-logo-text {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    letter-spacing: -0.01em;
  }
  .modal-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
  }
  .modal-subtitle {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    margin: 4px 0 0;
    position: relative;
    z-index: 1;
  }

  /* Body */
  .modal-body {
    padding: 28px 32px 32px;
  }

  /* Close button */
  .modal-close {
    position: absolute;
    right: 14px; top: 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 1rem;
    cursor: pointer;
    color: rgba(255,255,255,0.8);
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    z-index: 10;
  }
  .modal-close:hover { background: rgba(255,255,255,0.25); color: white; }

  /* Tabs */
  .tab-row {
    display: flex;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
    gap: 4px;
  }
  body.dark .tab-row { background: #1e293b; }
  .tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 9px 12px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    color: #64748b;
    border-radius: 9px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }
  body.dark .tab-btn { color: #94a3b8; }
  .tab-btn.active {
    background: #ffffff;
    color: #1e3a8a;
    box-shadow: 0 1px 4px rgba(15,23,42,0.1);
  }
  body.dark .tab-btn.active { background: #0f172a; color: #93c5fd; }

  /* Input group with icon */
  .modal-input-group {
    position: relative;
    margin-bottom: 14px;
  }
  .modal-input-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    pointer-events: none;
    opacity: 0.5;
  }
  .modal-input {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px 12px 40px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: #0f172a;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s,
    box-sizing: border-box;
  }
  body.dark .modal-input { background: #1e3a5f !important; border-color: #3b82f6; color: #e2eeff; }
  .modal-input:focus {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  }
  body.dark .modal-input:focus { background: #1e4080 !important; box-shadow: 0 0 0 3px rgba(59,130,246,0.35); }
  .modal-input::placeholder { color: #94a3b8; }

  /* Forgot password link */
  .modal-forgot {
    display: block;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    margin: -8px 0 18px;
    cursor: pointer;
    transition: color 0.15s;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
  }
  .modal-forgot:hover { color: #1d4ed8; text-decoration: underline; }
  body.dark .modal-forgot { color: #60a5fa; }

  /* Divider */
  .modal-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .modal-divider::before, .modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
  }
  body.dark .modal-divider::before, body.dark .modal-divider::after { background: #1e293b; }

  /* Buttons */
  .modal-btn {
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    border: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    margin-bottom: 0;
    letter-spacing: 0.01em;
  }
  .modal-btn:hover { transform: translateY(-1px); }
  .modal-btn:active { transform: translateY(0); }
  .modal-btn.primary {
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    color: white;
    box-shadow: 0 4px 16px rgba(37,99,235,0.35);
  }
  .modal-btn.primary:hover { box-shadow: 0 6px 22px rgba(37,99,235,0.45); }
  .modal-btn.google {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #1e293b;
    box-shadow: 0 1px 4px rgba(15,23,42,0.06);
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  body.dark .modal-btn.google { background: #1e293b; border-color: #334155; color: #f1f5f9; }
  .modal-btn.google:hover { border-color: #94a3b8; box-shadow: 0 3px 10px rgba(15,23,42,0.1); }

  /* Message */
  .msg-div {
    text-align: center;
    font-size: 0.82rem;
    margin-top: 14px;
    min-height: 20px;
    color: #059669;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s;
  }
  .msg-div:not(:empty) { background: #f0fdf4; }
  body.dark .msg-div:not(:empty) { background: rgba(5,150,105,0.1); }
  .msg-div.error { color: #dc2626; background: #fef2f2; }
  body.dark .msg-div.error { background: rgba(220,38,38,0.1); }

  /* STUDY HOURS INPUT */
  .hours-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 10px;
    border: 1px solid var(--border);
  }
  .hours-input-row label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    white-space: nowrap;
  }
  .hours-input-row input {
    width: 72px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.9rem;
    font-family: var(--font-mono);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-weight: 700;
    text-align: center;
  }
  .hours-input-row input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

  /* CONTEXT MENU */
  .day-context-menu {
    position: fixed;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.16);
    padding: 8px;
    z-index: 999;
    min-width: 210px;
    animation: menuPop 0.15s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes menuPop {
    from { opacity: 0; transform: scale(0.9) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  .context-menu-title {
    padding: 10px 14px 8px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    font-family: var(--font-mono);
  }
  .context-menu-section-label {
    padding: 8px 14px 4px;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-mono);
  }
  .context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text);
    transition: background 0.12s, transform 0.1s, color 0.12s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
  }
  .context-menu-item:hover { background: var(--blue-xlight); color: var(--blue); transform: translateX(2px); }
  .context-menu-item.active { background: var(--blue-xlight); color: var(--blue); font-weight: 700; }
  .context-menu-item .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .context-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 10px;
    opacity: 0.6;
  }

  /* PROGRESS BAR */
  .progress-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
  }
  .progress-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .progress-bar-outer {
    flex: 1;
    height: 7px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.07);
  }
  .progress-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, var(--blue), #60a5fa);
    border-radius: 99px;
    transition: width 0.5s cubic-bezier(.4,0,.2,1);
  }
  .progress-pct {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--blue);
    min-width: 36px;
    text-align: right;
  }

  /* ── DAILY NOTES MODAL ───────────────────────────────── */
  .notes-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
  }
  .notes-modal-overlay.open { opacity: 1; pointer-events: all; }

  .notes-modal-box {
    background: var(--card);
    border-radius: 22px;
    width: 100%;
    max-width: 500px;
    margin: 16px;
    position: relative;
    transform: translateY(28px) scale(0.97);
    transition: transform 0.28s cubic-bezier(.34,1.56,.64,1);
    border: 1px solid var(--border);
    box-shadow: 0 28px 70px rgba(0,0,0,0.22);
    overflow: hidden;
  }
  .notes-modal-overlay.open .notes-modal-box { transform: translateY(0) scale(1); }

  .notes-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }
  .notes-modal-date-badge {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    font-family: var(--font-body);
  }
  .notes-modal-date-badge .badge-month {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.88;
  }
  .notes-modal-date-badge .badge-day {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
  }
  .notes-modal-title-area { flex: 1; }
  .notes-modal-title-area h3 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    margin: 0 0 4px;
    color: var(--text);
  }
  .notes-modal-meta {
    font-size: 0.76rem;
    color: var(--muted);
    font-weight: 600;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .notes-modal-meta .meta-chip {
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
  }

  .notes-modal-close {
    position: absolute;
    right: 16px; top: 16px;
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--muted);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .notes-modal-close:hover { background: #fee2e2; color: var(--red); }

  .notes-modal-body { padding: 20px 24px 24px; }

  .notes-textarea {
    width: 100%;
    min-height: 160px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    resize: vertical;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .notes-textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
  }
  body.dark .notes-textarea { background: #1e3a5f !important; color: #e2eeff; }

  .notes-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .notes-char-count {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 600;
  }
  .notes-saved-indicator {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--green);
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .notes-saved-indicator.visible { opacity: 1; }
  .notes-footer-btns { display: flex; gap: 8px; }
  .notes-btn {
    padding: 9px 20px;
    border-radius: 10px;
    border: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.12s;
  }
  .notes-btn:hover { opacity: 0.88; transform: translateY(-1px); }
  .notes-btn.primary  { background: var(--blue); color: white; }
  .notes-btn.danger   { background: #fee2e2; color: var(--red); border: 1.5px solid #fecaca; }
  .notes-btn.secondary { background: var(--bg); color: var(--muted); border: 1.5px solid var(--border); }
  body.dark .notes-btn.danger    { background: #3b0000; border-color: #7f1d1d; color: #fca5a5; }
  body.dark .notes-btn.secondary { background: var(--card); border-color: var(--border); }

  /* Note pencil icon on day cells */
  .note-icon-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.9);
    cursor: pointer;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, box-shadow 0.12s;
    z-index: 4;
    padding: 0;
    line-height: 1;
    backdrop-filter: blur(4px);
  }
  body.dark .note-icon-btn { background: rgba(30,41,59,0.92); border-color: rgba(255,255,255,0.08); }
  .day-cell:hover .note-icon-btn { opacity: 1; }
  .note-icon-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
  .day-cell.has-note .note-icon-btn { opacity: 0.8; }

  /* Note indicator dot on calendar cells */
  .note-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber);
    border: 1.5px solid var(--card);
    z-index: 3;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    pointer-events: none;
  }

  /* ── NOTES PANEL (sidebar list of all notes) ─────────── */
  .notes-panel {
    background: var(--card);
    border-radius: var(--radius);
    padding: 24px 28px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    transition: box-shadow 0.2s;
  }
  .notes-panel:hover { box-shadow: var(--shadow-md); }
  .notes-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .notes-panel-header h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin: 0;
  }
  .notes-panel-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: 20px;
  }
  .notes-list { display: flex; flex-direction: column; gap: 10px; }
  .note-card {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--bg);
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
    position: relative;
    overflow: hidden;
  }
  .note-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--amber);
    border-radius: 2px 0 0 2px;
  }
  .note-card:hover {
    border-color: var(--amber);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-1px);
  }
  body.dark .note-card { background: var(--card); }
  .note-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .note-card-date {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .note-card-subject {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    color: white;
  }
  .note-card-type {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    margin-left: auto;
  }
  .note-card-text {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: pre-wrap;
  }
  .notes-empty {
    text-align: center;
    padding: 32px 0;
    color: var(--muted);
    font-size: 0.88rem;
    border: 2px dashed var(--border);
    border-radius: 12px;
  }
  .notes-empty .empty-emoji { font-size: 2rem; display: block; margin-bottom: 8px; }

  /* ── CALENDAR TOOLBAR ─────────────────────────────────── */
  .cal-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .cal-toolbar h3 {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    margin: 0;
    flex: 1;
    min-width: 140px;
    letter-spacing: -0.01em;
  }
  .cal-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.14s, box-shadow 0.14s;
    white-space: nowrap;
    letter-spacing: 0.01em;
  }
  .cal-action-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  }
  .cal-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .cal-action-btn.btn-print {
    background: linear-gradient(135deg,#f0fdf4,#dcfce7);
    border-color: #86efac; color: #15803d;
    box-shadow: 0 2px 8px rgba(21,128,61,0.15);
  }
  .cal-action-btn.btn-pdf {
    background: linear-gradient(135deg,#fff7ed,#ffedd5);
    border-color: #fdba74; color: #c2410c;
    box-shadow: 0 2px 8px rgba(194,65,12,0.15);
  }
  body.dark .cal-action-btn.btn-print { background:linear-gradient(135deg,#052e16,#064e3b); border-color:#166534; color:#86efac; }
  body.dark .cal-action-btn.btn-pdf   { background:linear-gradient(135deg,#431407,#7c2d12); border-color:#9a3412; color:#fdba74; }

  .pdf-spinner {
    width: 12px; height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btnSpin 0.7s linear infinite;
    display: none;
  }
  @keyframes btnSpin { to { transform: rotate(360deg); } }

  /* Print-only header — hidden on screen */
  #printHeader {
    display: none;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 2px solid #2563eb;
  }
  #printHeader h2 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: #1d4ed8;
    margin: 0 0 4px;
  }
  #printHeader p { font-size: 0.78rem; color: #64748b; margin: 0; }


  /* ═══ MY PLANS MODAL STYLES ════════════════════════════════ */
  .mpl-loading, .mpl-empty, .mpl-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
  }
  .mpl-error { color: var(--red); }

  .mpl-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    margin-bottom: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .mpl-card:hover { border-color: #93c5fd; box-shadow: 0 3px 12px rgba(30,58,138,0.1); }
  body.dark .mpl-card { background: #1e293b; }

  .mpl-card-info { flex: 1; min-width: 0; }
  .mpl-card-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mpl-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 0.72rem;
    color: var(--muted);
  }

  .mpl-card-actions { display: flex; gap: 8px; flex-shrink: 0; }
  .mpl-btn {
    padding: 7px 14px;
    border-radius: 9px;
    border: none;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
  }
  .mpl-btn:hover { transform: translateY(-1px); }
  .mpl-load   { background: linear-gradient(135deg,#1e3a8a,#2563eb); color: white; box-shadow: 0 2px 8px rgba(37,99,235,0.3); }
  .mpl-delete { background: #fef2f2; color: #dc2626; border: 1.5px solid #fecaca; }
  .mpl-delete:hover { background: #fee2e2; box-shadow: 0 2px 8px rgba(220,38,38,0.15); }
  body.dark .mpl-delete { background: rgba(220,38,38,0.1); border-color: rgba(220,38,38,0.3); }

  @media (max-width: 480px) {
    .mpl-card { flex-direction: column; align-items: flex-start; }
    .mpl-card-actions { width: 100%; }
    .mpl-btn { flex: 1; text-align: center; }
  }


  /* ── Plans count badge ───────────────────────────────── */
  .plans-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    pointer-events: none;
    animation: badgePop 0.3s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes badgePop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
  /* ═══════════════════════════════════════════════════════
     RESPONSIVE / MOBILE  — complete overrides
     Breakpoints:  ≤768px (tablet), ≤480px (phone)
  ══════════════════════════════════════════════════════════ */

  /* ── Shared helpers ── */
  @media (max-width: 768px) {

    /* Header */
    .header-inner { padding: 10px 14px; }

    /* Banner */
    
    
    
    
    
    
    
    

    /* Main padding */
    main { padding: 18px 14px 40px; }

    /* Top stats grid — 2 cols on tablet */
    .top-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .input-panel { grid-column: 1 / -1; }  /* full width */

    /* Subjects section */
    .subjects-section { padding: 18px 14px; }
    .subjects-section-header { margin-bottom: 14px; padding-bottom: 12px; }
    .subjects-section-header h3 { font-size: 1.2rem; }

    /* Add subject form */
    .btn-add-subject { min-height: 44px; }
    .btn-new-subject { min-height: 44px; padding: 10px 16px; }
    .color-swatch-picker { justify-content: flex-start; }

    /* Subject rows */
    .subject-item { gap: 0; }
    .subject-item-header { flex-wrap: wrap; gap: 6px; }
    .subject-name { font-size: 0.85rem; min-width: 80px; }
    .subjects-header-actions { width: 100%; justify-content: space-between; }

    /* Accordion categories */
    .matcat-header { padding: 13px 16px; }
    .matcat-title  { font-size: 0.85rem; }
    .matcat-body-inner { padding: 10px 10px 12px; overflow-x: hidden; }

    /* Calendar toolbar */
    .cal-toolbar { flex-wrap: wrap; gap: 8px; }
    .cal-toolbar h3 { font-size: 1rem; flex: 1 1 100%; }
    .cal-action-btn { min-height: 40px; }
    .review-block-control { flex-wrap: wrap; }

    /* Hours row */
    .hours-input-row { flex-wrap: wrap; gap: 6px; font-size: 0.8rem; }

    /* Legend — wrap tightly */
    .legend { flex-wrap: wrap; gap: 6px 10px; font-size: 0.68rem; }
    .legend-dot { width: 10px; height: 10px; }

    /* Month grid — smaller cells */
    .month-grid { gap: 3px; }
    .day-cell { min-height: 54px; padding: 4px 3px 3px; font-size: 0.62rem; }
    .day-num   { font-size: 0.6rem; }
    .subject-badge        { font-size: 0.52rem; padding: 1px 4px; }
    .subject-daily-items  { font-size: 0.45rem; }
    .month-label          { font-size: 0.78rem; }
    .day-label-row span   { font-size: 0.55rem; }

    /* Week summary */
    .week-summary { flex-wrap: nowrap; gap: 4px; font-size: 0.7rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }

    /* Notes panel */
    .notes-panel { padding: 16px 14px; }
    .notes-panel-header { flex-wrap: wrap; gap: 6px; }
    .notes-panel-header h3 { font-size: 1.1rem; }

    /* Notes modal */
    .notes-modal-box { width: 95vw; max-width: 95vw; padding: 18px 16px; }
    .notes-modal-footer { flex-wrap: wrap; gap: 8px; }
    .notes-modal-footer button { flex: 1; min-width: 80px; }

    /* Auth modal */
    .modal-box { width: 94vw; max-width: 94vw; padding: 24px 18px; }

    /* Progress bar */
    .progress-row { flex-wrap: wrap; gap: 6px; align-items: center; }

    /* Print zone wrapper horizontal scroll on mobile */
    #printZoneWrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Breakdown bar */
    .subject-breakdown { padding: 14px; }
    .breakdown-legend  { flex-wrap: wrap; gap: 6px; font-size: 0.68rem; }
  }

  /* ── Phone (≤480px) — tighter still ── */
  @media (max-width: 480px) {

    /* Top grid — single column */
    .top-grid { grid-template-columns: 1fr; }
    .card.stat-card { padding: 14px 16px; }
    .stat-value { font-size: 2rem; }

    /* Banner */

    /* Subjects */
    .subjects-section { padding: 14px 12px; }
    .subject-item { padding: 0; }
    .subject-item-header { flex-wrap: wrap; padding: 8px 10px 8px 0; gap: 6px; }
    .subject-days-info { flex-wrap: wrap; gap: 4px; }
    .subject-inline-days { font-size: 0.72rem; }
    .btn-remove-subject { min-height: 36px; min-width: 36px; }

    /* Calendar */
    .day-cell { min-height: 44px; padding: 3px 2px; }
    .subject-badge { display: none; }        /* hide badges on tiny screens */
    .subject-daily-items { display: none; }  /* hide quotas on tiny screens */
    .note-dot { width: 5px; height: 5px; }
    .note-icon-btn { font-size: 0.6rem; padding: 1px; }
    .day-num { font-size: 0.55rem; }
    .month-label { font-size: 0.72rem; padding: 8px 0 6px; }

    /* Cal toolbar */
    .cal-toolbar { gap: 6px; }
    .cal-action-btn { padding: 8px 12px; font-size: 0.75rem; min-height: 40px; }
    .cal-toolbar h3 { font-size: 0.9rem; }
    .review-block-control { flex-wrap: wrap; gap: 4px; }
    #reviewWeeks { width: 36px; }

    /* Stat cards */
    .stat-label { font-size: 0.7rem; }
    .stat-card  { padding: 14px 14px; }

    /* Notes modal */
    .notes-modal-box { padding: 14px 12px; }
    .notes-modal-date-badge { font-size: 0.7rem; padding: 4px 10px; }

    /* Auth modal */
    .modal-box  { padding: 20px 14px; }
    .modal-input { font-size: 0.88rem; }
    .modal-btn  { font-size: 0.85rem; padding: 10px; }

    /* Accordion */
    .matcat-header { padding: 12px 14px; }
    .matcat-title  { font-size: 0.8rem; }
  }

  /* ── Landscape phone fix ── */
  @media (max-width: 768px) and (orientation: landscape) {
    main { padding: 14px 16px 30px; }
  }

  /* ── PRINT STYLESHEET ──────────────────────────────────── */
  /* Print: hide the main page — printing is done via popup window */
  @media print {
    body { display: none !important; }
  }

  /* ── Entrance animations ── */
  @keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .card, .subjects-section, .calendar-section, .notes-panel {
    animation: fadeSlideUp 0.45s cubic-bezier(0.22,1,0.36,1) both;
  }
  .top-grid .card:nth-child(1) { animation-delay: 0.05s; }
  .top-grid .card:nth-child(2) { animation-delay: 0.10s; }
  .top-grid .card:nth-child(3) { animation-delay: 0.15s; }
  .top-grid .card:nth-child(4) { animation-delay: 0.20s; }
  .top-grid .card:nth-child(5) { animation-delay: 0.25s; }
  .subjects-section             { animation-delay: 0.28s; }
  .calendar-section             { animation-delay: 0.34s; }

  /* ── No-subjects hint ── */
  .no-subjects-hint {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
    background: var(--bg);
  }
  .no-subjects-hint .hint-emoji { font-size: 2.2rem; display: block; margin-bottom: 10px; }

  /* ── Weekday labels ── */
  .weekday-label {
    text-align: center;
    font-size: 0.63rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 5px 0 4px;
    opacity: 0.8;
  }

  /* ── Calendar toolbar upgrade ── */
  .cal-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  /* Flatpickr dark mode compat */
  body.dark .flatpickr-calendar {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  }
  body.dark .flatpickr-day { color: #f1f5f9 !important; background: transparent; }
  body.dark .flatpickr-day:hover { background: #334155 !important; color: #fff !important; }
  body.dark .flatpickr-day.selected,
  body.dark .flatpickr-day.selected:hover { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; }
  body.dark .flatpickr-day.today { border-color: #3b82f6 !important; color: #60a5fa !important; }
  body.dark .flatpickr-day.flatpickr-disabled,
  body.dark .flatpickr-day.flatpickr-disabled:hover { color: #475569 !important; }
  body.dark .flatpickr-months .flatpickr-month { color: #f1f5f9; fill: #f1f5f9; background: #1e293b; }
  body.dark .flatpickr-current-month,
  body.dark .flatpickr-current-month .cur-month,
  body.dark .flatpickr-current-month .cur-year { color: #f1f5f9 !important; }
  body.dark .flatpickr-weekdays,
  body.dark span.flatpickr-weekday { background: #1e293b; color: #94a3b8 !important; }
  body.dark .flatpickr-prev-month,
  body.dark .flatpickr-next-month { color: #f1f5f9 !important; fill: #f1f5f9 !important; }
  body.dark .flatpickr-prev-month:hover svg,
  body.dark .flatpickr-next-month:hover svg { fill: #60a5fa !important; }
  body.dark .flatpickr-monthDropdown-months,
  body.dark .numInput { background: #1e293b !important; color: #f1f5f9 !important; border-color: #334155; }
  body.dark .input-panel input { color: var(--text); }
  body.dark .add-subject-form input { color: var(--text); }
  body.dark .subject-item { background: var(--card); }

  /* ── Toast notifications (replaces alert()) ── */
  #toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
  }
  .toast {
    background: #1e293b;
    color: #f1f5f9;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-body);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    max-width: 340px;
    text-align: center;
  }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.toast-error { background: #dc2626; }
  .toast.toast-success { background: #16a34a; }
  .toast.toast-info { background: #1d4ed8; }

  /* ═══════════════════════════════════════════════════
     POLISH & REFINEMENT LAYER
  ═══════════════════════════════════════════════════ */

  /* Input panel — more breathing room */
  .input-panel { border-radius: var(--radius); }
  .input-panel label {
    font-size: 0.63rem;
    letter-spacing: 0.10em;
    font-weight: 800;
  }

  /* Smoother focus rings on all inputs */
  input:focus, textarea:focus, select:focus {
    outline: none;
  }

  /* Slightly more refined section spacing */
  main { gap: 0; }
  .subjects-section, .calendar-section {
    transition: box-shadow 0.28s, transform 0.28s;
  }

  /* Section title treatment — serif headings get a refined weight */
  .subjects-section-header h3,
  .calendar-section h3 {
    font-style: italic;
  }

  /* Refined subject color bar — slightly wider */
  .subject-color-bar {
    width: 5px;
    height: 34px;
    border-radius: 99px;
    flex-shrink: 0;
  }

  /* More polished remove button */
  .btn-remove-subject {
    background: #fff0f0;
    border: 1px solid #fecaca;
    border-radius: 9px;
    padding: 5px 11px;
    font-size: 0.74rem;
  }

  /* Chip active glow */
  .chip-active {
    box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor, 0 4px 14px rgba(0,0,0,0.14) !important;
    border-width: 2px !important;
    transform: translateY(-1px);
  }

  /* Stepper buttons — more refined */
  .stepper-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 1.15rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }

  /* Matcat subject rows — better spacing */
  .matcat-subject-row {
    padding: 10px 2px;
    border-bottom-color: var(--border);
  }
  .matcat-subj-dot {
    width: 9px; height: 9px;
  }
  .matcat-qty-input {
    width: 76px;
    border-radius: 10px;
    padding: 7px 10px;
  }

  /* Event badges — slightly softer */
  .event-badge {
    font-size: 0.58rem;
    letter-spacing: 0.05em;
    padding: 2px 7px;
  }

  /* Subject badge on calendar — softer shadow */
  .subject-badge {
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  }

  /* Week summary row — cleaner */
  .week-summary-row {
    border-radius: 12px;
    border-color: var(--border);
    padding: 6px 14px;
  }

  /* Scrollbar styling (webkit) */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

  /* Smooth selection */
  ::selection { background: rgba(37,99,235,0.18); color: inherit; }

  /* Dark mode card polish */
  body.dark .card,
  body.dark .subjects-section,
  body.dark .calendar-section {
    background: var(--card);
    border-color: var(--border);
  }
  body.dark .matcat-body-inner { background: var(--card); }

  /* Focus ring color override for all interactive elements */
  button:focus-visible, a:focus-visible, input:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }

  /* Slightly more padding on main on large screens */
  @media (min-width: 1100px) {
    main { padding: 40px 32px; }
    .top-grid { gap: 16px; margin-bottom: 28px; }
    .subjects-section, .calendar-section { padding: 32px; }
  }