/* ---------------------------------------------------------------------
   Design system: a warm, considered EdTech palette instead of the default
   Tailwind gray/blue. Deep teal reads as trustworthy and education-focused
   without being generic; warm amber gives it life for CTAs and accents.
   --------------------------------------------------------------------- */
   :root {
    --teal-900: #0A3D3A;
    --teal-700: #0D6B66;
    --teal-600: #128884;
    --teal-100: #E3F2F1;
    --teal-50:  #F2F9F8;
    --amber-600: #D97706;
    --amber-500: #F59E0B;
    --amber-100: #FEF3E2;
    --ink-900: #1C1917;
    --ink-600: #57534E;
    --ink-400: #9C9691;
    --paper: #FBFAF8;
    --surface: #FFFFFF;
    --border: #E8E4DC;
    --border-strong: #D8D2C6;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05), 0 1px 1px rgba(28, 25, 23, 0.03);
    --shadow-md: 0 8px 24px rgba(10, 61, 58, 0.08), 0 2px 6px rgba(10, 61, 58, 0.04);
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  
  * { box-sizing: border-box; }
  
  .app-body {
    background: var(--paper);
    color: var(--ink-900);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
  
  /* ---- Sidebar ---- */
  .app-sidebar {
    width: 220px;
    background: var(--teal-900);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
  }
  .app-brand {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px 20px;
  }
  .app-brand-mark {
    font-weight: 800;
    font-size: 15px;
    color: var(--amber-500);
    letter-spacing: 0.02em;
  }
  .app-brand-name {
    font-weight: 600;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
  }
  .nav-item {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .nav-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); }
  .nav-item-active {
    background: rgba(245,158,11,0.14);
    color: var(--amber-500);
    font-weight: 600;
  }
  .nav-item-disabled { color: rgba(255,255,255,0.28); cursor: not-allowed; pointer-events: none; }
  .nav-item { display: flex; align-items: center; gap: 9px; }
  .nav-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; }
  .nav-badge-soon {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(245, 158, 11, 0.16);
    color: var(--amber-500);
    padding: 2px 6px;
    border-radius: 999px;
  }

  /* ---- View switching: one section visible at a time ---- */
  .app-view { display: none; }
  .app-view.active { display: block; }

  /* ---- Dashboard ---- */
  .dash-hero {
    background: linear-gradient(135deg, var(--teal-900), var(--teal-700));
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    color: white;
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
  }
  .dash-hero h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
  .dash-hero p { font-size: 13.5px; color: rgba(255,255,255,0.8); margin: 0; max-width: 52ch; }

  .dash-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }
  .dash-action-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    font-family: var(--font-sans);
    display: block;
    width: 100%;
    appearance: none;
  }
  .dash-action-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--teal-600); }
  .dash-action-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--teal-100);
    color: var(--teal-700);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }
  .dash-action-icon svg { width: 18px; height: 18px; }
  .dash-action-title { font-size: 14px; font-weight: 700; color: var(--ink-900); margin: 0 0 3px; }
  .dash-action-desc { font-size: 12.5px; color: var(--ink-600); margin: 0; }
  .dash-action-price {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--teal-700);
    background: var(--teal-100);
    padding: 2px 8px;
    border-radius: 999px;
  }

  .dash-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }
  .dash-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .dash-stat-num { font-size: 24px; font-weight: 800; color: var(--teal-900); }
  .dash-stat-label { font-size: 11.5px; color: var(--ink-600); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

  .app-footer {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--ink-400);
  }

  @media (max-width: 700px) {
    .dash-quick-actions { grid-template-columns: 1fr; }
    .dash-stats-row { grid-template-columns: repeat(2, 1fr); }
  }

  /* ---- AI Assistant chat ---- */
  .ai-chat-panel { display: flex; flex-direction: column; height: 480px; }
  .ai-chat-messages { flex: 1; overflow-y: auto; padding: 4px 2px; margin-bottom: 12px; }
  .ai-chat-msg { display: flex; margin-bottom: 10px; }
  .ai-chat-msg.ai-chat-user { justify-content: flex-end; }
  .ai-chat-msg.ai-chat-assistant { justify-content: flex-start; }
  .ai-chat-bubble { max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
  .ai-chat-msg.ai-chat-user .ai-chat-bubble { background: var(--teal-700); color: white; border-bottom-right-radius: 4px; }
  .ai-chat-msg.ai-chat-assistant .ai-chat-bubble { background: var(--paper); border: 1px solid var(--border); color: var(--ink-900); border-bottom-left-radius: 4px; }
  .ai-chat-input-row { display: flex; gap: 8px; flex-shrink: 0; }
  .ai-chat-input-row input { flex: 1; }
  .ai-chat-input-row button {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    border: none;
    border-radius: 8px;
    background: var(--teal-700);
    color: white;
    cursor: pointer;
  }
  .ai-chat-input-row button:hover { background: var(--teal-900); }
  .ai-chat-input-row button:disabled { background: var(--border-strong); cursor: not-allowed; }

  /* ---- Reports ---- */
  .rep-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .rep-table th, .rep-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
  .rep-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-600); }
  .rep-coverage-row { display: grid; grid-template-columns: 160px 1fr 110px; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
  .rep-coverage-label { font-weight: 600; }
  .rep-coverage-pct { text-align: right; color: var(--ink-600); font-size: 12px; }
  @media (max-width: 700px) {
    .rep-coverage-row { grid-template-columns: 1fr; }
    .rep-coverage-pct { text-align: left; }
  }
  
  /* ---- Main content shell ---- */
  .app-main {
    flex: 1;
    padding: 32px 40px;
    max-width: 880px;
  }
  .app-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 20px;
  }
  .app-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink-900);
    letter-spacing: -0.01em;
    margin: 0 0 4px;
  }
  .app-page-subtitle {
    font-size: 13.5px;
    color: var(--ink-600);
    max-width: 46ch;
  }
  .app-signin-block { text-align: right; flex-shrink: 0; }
  .app-text-muted { color: var(--ink-400); }
  
  /* ---- Panels (replaces bg-white border rounded-lg utility soup) ---- */
  .panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
  }
  .panel-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px;
  }
  
  .cm-select {
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 13px;
    font-family: var(--font-sans);
    background: var(--surface);
    color: var(--ink-900);
    transition: border-color 0.15s ease;
  }
  .cm-select:focus { outline: none; border-color: var(--teal-600); }
  .cm-select:disabled { background: var(--paper); color: var(--ink-400); }
  
  .cm-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
  }
  .cm-breadcrumb { font-size: 12px; color: var(--ink-400); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
  .cm-standard { font-size: 13px; color: var(--ink-600); font-style: italic; margin: 0 0 8px; }
  .cm-indicator-text { font-size: 15.5px; font-weight: 600; margin: 0 0 12px; color: var(--ink-900); }
  
  .cm-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
  .cm-tag {
    font-size: 11px;
    font-weight: 600;
    background: var(--teal-100);
    color: var(--teal-700);
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.02em;
  }
  
  .cm-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .cm-actions button {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    padding: 8px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink-900);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .cm-actions button:hover { border-color: var(--teal-600); color: var(--teal-700); }
  .cm-actions button#cm-generate-lesson,
  .cm-actions button#cm-generate-worksheet,
  .cm-actions button#cm-generate-presentation {
    background: var(--teal-700);
    border-color: var(--teal-700);
    color: white;
  }
  .cm-actions button#cm-generate-lesson:hover,
  .cm-actions button#cm-generate-worksheet:hover,
  .cm-actions button#cm-generate-presentation:hover { background: var(--teal-900); border-color: var(--teal-900); color: white; }
  
  .cm-coverage-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
  .cm-coverage-fill { height: 100%; background: linear-gradient(90deg, var(--teal-600), var(--amber-500)); transition: width 0.3s ease; }
  
  .cm-error {
    background: #FEF0EF;
    color: #9A2A24;
    border: 1px solid #F3C6C2;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 13px;
    margin-bottom: 12px;
  }

  .cm-quota-line {
    font-size: 12.5px;
    margin: -4px 0 12px 0;
  }
  .cm-quota-unpaid { color: var(--amber-500); font-weight: 600; }
  .cm-quota-ok { color: var(--teal-600); }
  .cm-quota-low { color: #9A6B24; font-weight: 600; }
  
  .lp-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    margin-top: 12px;
  }
  .lp-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
  .lp-section { margin-bottom: 12px; }
  .lp-section h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--ink-400); margin: 0 0 4px; }
  .lp-section p, .lp-section ul { font-size: 13px; color: var(--ink-600); margin: 0; }
  .lp-section ul { padding-left: 18px; }
  
  .lp-muted { font-size: 12px; color: var(--ink-400); margin: 0 0 12px; }
  .ws-question { margin-bottom: 12px; font-size: 13px; }
  .ws-question ol { margin: 4px 0 0 20px; }
  .ws-type-tag {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--ink-400);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 4px;
  }
  .lp-answer-line { color: var(--ink-400); margin: 4px 0 0; }
  .ws-answer-key { margin-top: 16px; font-size: 13px; }
  .ws-answer-key summary { cursor: pointer; color: var(--teal-700); font-weight: 500; }
  .ws-answer-key ol { margin-top: 8px; padding-left: 20px; }
  
  .lp-export-row {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
  }
  .lp-export-row button {
    font-size: 13px;
    padding: 6px 12px;
    border: 1px solid var(--teal-700);
    color: var(--teal-700);
    border-radius: 6px;
    background: white;
    cursor: pointer;
  }
  .lp-export-row button:hover { background: var(--teal-100); }
  .lp-export-row a { color: var(--teal-700); text-decoration: underline; }
  
  .cm-history-list { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
  .cm-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--paper);
    border-radius: 6px;
  }
  .cm-history-type {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--teal-700);
    background: var(--teal-100);
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
  }
  .cm-history-title { font-weight: 500; margin-right: 6px; }
  .cm-history-item a { color: var(--teal-700); text-decoration: none; font-size: 12px; }
  .cm-history-item a:hover { text-decoration: underline; }
  
  .lp-header-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 24px;
    font-size: 13px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .lp-standard { font-size: 13px; color: var(--ink-600); margin: 2px 0; }
  .lp-indicator-text { font-size: 14px; margin: 8px 0 12px; }
  .lp-phase {
    background: #fafaf8;
    border-left: 3px solid var(--teal-600);
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    margin-bottom: 12px;
  }
  .lp-phase h4 { font-size: 13px; font-weight: 600; margin: 0 0 6px; color: var(--teal-700); }
  .lp-phase p, .lp-phase ul, .lp-phase ol { font-size: 13px; margin: 4px 0; }
  .lp-phase ol { padding-left: 20px; }
  
  .ws-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-700);
    margin: 18px 0 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .ws-short-answer { margin-bottom: 10px; }
  
  input.cm-select { font-family: inherit; }
  
  .pres-slide {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  .pres-slide-title { font-size: 14px; margin: 0 0 4px; }
  .pres-slide ul { font-size: 13px; margin: 4px 0 10px; padding-left: 20px; }
  .pres-image-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
  .pres-image-controls input { flex: 1; min-width: 160px; }
  .pres-suggest-btn {
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid var(--teal-700);
    color: var(--teal-700);
    background: white;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
  }
  .pres-suggest-btn:hover { background: var(--teal-100); }
  .pres-image-results { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
  .pres-thumb {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
  }
  .pres-thumb:hover { border-color: var(--teal-600); }
  .pres-thumb-selected { border-color: var(--teal-700) !important; }
  .pres-selected-label { font-size: 12px; margin: 4px 0 0; }
  .pres-video-block { margin: 16px 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; }
  
  .ts-days-row { display: flex; gap: 14px; font-size: 13px; }
  .ts-days-row label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
  
  /* ---- Payment modal ---- */
  .pay-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 61, 58, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
  }
  .pay-modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 380px;
    padding: 24px;
  }
  .pay-modal-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ink-900);
  }
  .pay-modal-price {
    font-size: 26px;
    font-weight: 800;
    color: var(--teal-700);
    margin: 0 0 18px;
  }
  .pay-modal-price span {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-600);
  }
  .pay-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 14px 0 6px;
  }
  .pay-network-row { display: flex; gap: 8px; }
  .pay-network-btn {
    flex: 1;
    padding: 10px 6px;
    border: 1.5px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-600);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
  }
  .pay-network-btn:hover { border-color: var(--teal-600); }
  .pay-network-btn.pay-network-selected {
    border-color: var(--teal-700);
    background: var(--teal-100);
    color: var(--teal-700);
  }
  .pay-primary-btn {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: var(--teal-700);
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .pay-primary-btn:hover { background: var(--teal-900); }
  .pay-primary-btn:disabled { background: var(--border-strong); cursor: not-allowed; }
  .pay-cancel-btn {
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border: none;
    background: transparent;
    color: var(--ink-400);
    font-size: 13px;
    cursor: pointer;
  }
  .pay-cancel-btn:hover { color: var(--ink-600); }
  .pay-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 12px;
    background: var(--teal-50);
    border-radius: 8px;
    font-size: 13px;
    color: var(--teal-700);
  }
  .pay-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--teal-100);
    border-top-color: var(--teal-700);
    border-radius: 50%;
    animation: pay-spin 0.8s linear infinite;
    flex-shrink: 0;
  }
  @keyframes pay-spin { to { transform: rotate(360deg); } }
  .pay-modal-error {
    margin-top: 14px;
    padding: 10px 12px;
    background: #FEF0EF;
    color: #9A2A24;
    border: 1px solid #F3C6C2;
    border-radius: 8px;
    font-size: 13px;
  }
  
  .pres-ai-btn {
    background: none;
    border: none;
    color: var(--teal-700);
    text-decoration: underline;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
  }
  .pres-ai-btn:hover { color: var(--teal-900); }
  
  /* ---- Mobile responsive: hamburger drawer + larger touch targets ---- */
  .mobile-topbar { display: none; }
  .mobile-menu-close { display: none; }
  .mobile-sidebar-backdrop { display: none; }
  
  @media (max-width: 900px) {
    .mobile-topbar {
      display: flex;
      align-items: center;
      gap: 10px;
      position: sticky;
      top: 0;
      z-index: 40;
      width: 100%;
      background: var(--teal-900);
      padding: 12px 16px;
    }
    .mobile-menu-btn {
      background: none;
      border: none;
      color: white;
      font-size: 22px;
      line-height: 1;
      padding: 4px 8px;
      cursor: pointer;
    }
    .mobile-topbar .app-brand-mark { color: var(--amber-500); font-weight: 800; }
    .mobile-topbar .app-brand-name { color: rgba(255,255,255,0.9); font-weight: 600; font-size: 14px; }
  
    .flex.min-h-screen { flex-direction: column; }
  
    .app-sidebar {
      position: fixed;
      top: 0; left: 0; bottom: 0;
      width: 260px;
      max-width: 80vw;
      transform: translateX(-100%);
      transition: transform 0.2s ease;
      z-index: 60;
      overflow-y: auto;
    }
    .app-sidebar.sidebar-open { transform: translateX(0); }
    .app-sidebar .app-brand { display: none; } /* already shown in the mobile top bar */
    .mobile-menu-close {
      display: block;
      background: none;
      border: none;
      color: rgba(255,255,255,0.7);
      font-size: 18px;
      align-self: flex-end;
      padding: 4px 8px;
      cursor: pointer;
    }
  
    .mobile-sidebar-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(10, 61, 58, 0.5);
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }
    .mobile-sidebar-backdrop.backdrop-visible { opacity: 1; pointer-events: auto; }
  
    .app-main { padding: 20px 16px; max-width: 100%; }
    .app-header-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .app-signin-block { text-align: left; }
  
    /* Larger touch targets on mobile -- buttons, inputs, checkboxes */
    .cm-select, .cm-actions button, .lp-export-row button, .pay-primary-btn {
      min-height: 44px;
      font-size: 15px;
    }
    .ts-days-row label { padding: 6px 4px; }
    .ts-days-row input[type="checkbox"] { width: 20px; height: 20px; }
    .app-page-title { font-size: 20px; }
  }