/* ---- Preply-style teacher cards ---- */
  .tc-toolbar{ display:flex; gap:8px; }
  .tc-toolbar .teacher-search{ margin-bottom:8px; }
  .tc-toolbar #teacherSort{ flex:0 0 150px; }
  .tc-count{ font:800 15px var(--font); margin:4px 2px 10px; }
  #teacherGrid{ display:flex; flex-direction:column; gap:12px; }
  .teacher-card.tc2{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"photo main" "side side"; gap:12px 14px; padding:14px; border-radius:22px; background:var(--card); border:1.5px solid var(--line); box-shadow:0 6px 18px rgba(6,40,34,.06); cursor:pointer; text-align:left; transition:transform .15s, box-shadow .15s, border-color .15s; }
  .teacher-card.tc2:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(6,40,34,.10); border-color:var(--cover-light); }
  @media (min-width:640px){ .teacher-card.tc2{ grid-template-columns:128px 1fr 190px; grid-template-areas:"photo main side"; padding:16px; } }
  .tc-photo{ grid-area:photo; position:relative; width:84px; height:84px; border-radius:20px; overflow:hidden; background:linear-gradient(135deg,var(--primary-tint),var(--gold-tint)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  @media (min-width:640px){ .teacher-card.tc2 .tc-photo{ width:128px; height:128px; border-radius:22px; } }
  .tc-photo img{ width:100%; height:100%; object-fit:cover; }
  .tc-photo.big{ width:112px; height:112px; border-radius:28px; margin:0 auto 6px; }
  .tc-initial{ font:800 34px var(--font-display, var(--font)); color:var(--cover-deep); }
  body.dark-mode .tc-initial{ color:var(--cover); }
  .tc-dot{ position:absolute; right:6px; bottom:6px; width:14px; height:14px; border-radius:999px; background:#22c55e; border:2.5px solid var(--card); }
  .tc-main{ grid-area:main; min-width:0; }
  .tc-name{ font:800 18px var(--font); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .tc-flag{ font-size:15px; }
  .tc-verified{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:6px; background:var(--ink); color:var(--card); font-size:10.5px; }
  .tc-sub{ font:600 12.5px var(--font); color:var(--muted); margin:3px 0 6px; }
  .tc-bio{ font:500 13px/1.45 var(--font); color:var(--ink); opacity:.85; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:6px; }
  .tc-side{ grid-area:side; display:flex; flex-direction:column; gap:6px; }
  .tc-price{ font:800 24px var(--font); line-height:1.1; }
  .tc-per{ font:600 12px var(--font); color:var(--muted); margin-top:-4px; }
  .tc-stats{ display:flex; gap:12px; margin:4px 0; }
  .tc-stats div{ display:flex; flex-direction:column; } .tc-stats b{ font:800 14px var(--font); } .tc-stats span{ font:600 11px var(--font); color:var(--muted); }
  .dm-lesson-cta{ margin-top:6px; align-self:flex-start; border:none; border-radius:999px; background:var(--cover); color:var(--on-cover); font:800 12.5px var(--font); padding:8px 14px; cursor:pointer; box-shadow:0 3px 0 var(--cover-deep); }
  .dm-lesson-cta:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--cover-deep); }
  .tm-ext-contact{ display:block; text-align:center; font:700 11.5px var(--font); color:var(--muted); margin-top:8px; text-decoration:none; }
  .tm-ext-contact:hover{ text-decoration:underline; }
  .tc-book, .tc-see{ border-radius:14px; min-height:44px; font:800 14px var(--font); cursor:pointer; }
  .tc-book{ background:var(--cover); color:var(--on-cover); border:2px solid transparent; box-shadow:0 4px 0 var(--cover-deep); }
  .tc-book:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--cover-deep); }
  .tc-see{ background:var(--card); color:var(--ink); border:2px solid var(--line); }
  @media (max-width:639px){
    .tc-side{ display:grid; grid-template-columns:1fr 1fr; gap:6px 8px; align-items:end; }
    .tc-price{ grid-column:1; } .tc-per{ grid-column:1; grid-row:2; margin-top:0; }
    .tc-stats{ grid-column:2; grid-row:1 / span 2; justify-content:flex-end; gap:10px; margin:0; }
    .tc-stats span{ white-space:nowrap; }
  }
  .tc-toolbar{ flex-wrap:wrap; } .tc-toolbar #teacherSearch{ flex:1 1 200px; } .tc-toolbar #teacherSort{ flex:1 1 140px; max-width:220px; }
  .tm-hero{ text-align:center; margin:4px 0 8px; }
  /* ---- Next-lesson card (home + portal) ---- */
  .hl-card, .tp-hero{ background:linear-gradient(180deg, var(--primary-tint) 0, var(--primary-tint) 110px, var(--card) 110px); border:1.5px solid var(--line); border-radius:24px; padding:16px; margin:14px 0; box-shadow:0 8px 24px rgba(6,40,34,.07); font-family:var(--font); }
  .hl-kicker{ font:700 13px var(--font); color:var(--muted); }
  .hl-title{ font:800 22px/1.2 var(--font-display, var(--font)); margin:2px 0 12px; }
  .hl-lesson{ display:flex; align-items:center; gap:12px; background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:12px; flex-wrap:wrap; }
  .hl-when{ flex:1; min-width:160px; display:flex; flex-direction:column; }
  .hl-when b{ font-size:15.5px; } .hl-when span{ font-size:12.5px; color:var(--muted); }
  .hl-date{ font-size:11.5px !important; }
  .hl-join{ border:none; border-radius:14px; padding:12px 16px; font:800 14px var(--font); background:var(--paper-dark); color:var(--muted); min-height:46px; }
  .hl-join.live{ background:var(--cover); color:var(--on-cover); cursor:pointer; box-shadow:0 4px 0 var(--cover-deep); animation:hlPulse 2s ease-in-out infinite; }
  @keyframes hlPulse{ 50%{ transform:scale(1.03); } }
  @media (prefers-reduced-motion: reduce){ .hl-join.live{ animation:none; } }
  .hl-before{ margin-top:12px; }
  .hl-before-t{ font:800 12px var(--font); color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:0 2px 6px; }
  .hl-item{ display:flex; justify-content:space-between; align-items:center; width:100%; background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; font:700 14px var(--font); color:var(--ink); cursor:pointer; margin-bottom:6px; min-height:48px; text-align:left; }
  .hl-item:hover{ border-color:var(--cover-light); }
  .hl-next{ margin-top:12px; }
  .hl-next-row{ display:flex; gap:10px; align-items:center; padding:8px 2px; border-left:2px solid var(--line); margin-left:6px; padding-left:14px; position:relative; font-family:var(--font); }
  .hl-next-row > div{ display:flex; flex-direction:column; } .hl-next-row b{ font-size:14.5px; } .hl-next-row span{ font-size:12px; color:var(--muted); }
  .hl-dot{ position:absolute; left:-6px; top:16px; width:10px; height:10px; border-radius:999px; background:var(--cover); border:2px solid var(--card); }
  .hl-link{ background:none; border:none; color:var(--cover-deep); font:800 13px var(--font); cursor:pointer; padding:8px 2px 0; }
  body.dark-mode .hl-link{ color:var(--cover); }
  .hl-teach{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1.5px solid var(--line); background:linear-gradient(90deg, var(--gold-tint), var(--card)); border-radius:20px; padding:12px 14px; cursor:pointer; font-family:var(--font); color:var(--ink); margin:12px 0 0; }
  .hl-teach > span:nth-child(2){ flex:1; display:flex; flex-direction:column; } .hl-teach b{ font-size:15px; } .hl-teach > span:nth-child(2) span{ font-size:12.5px; color:var(--muted); }
  .hl-teach-ic{ font-size:28px; } .hl-teach-go{ font:800 13px var(--font); color:var(--cover-deep); }
  body.dark-mode .hl-teach-go{ color:var(--cover); }
  .tp-av{ border-radius:14px; object-fit:cover; flex-shrink:0; }
  .tp-av-i{ display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--gold-tint),var(--primary-tint)); color:var(--cover-deep); font-weight:800; }
  /* ---- Teacher portal ---- */
  .tp-note{ background:var(--gold-tint); border-radius:12px; padding:8px 12px; font:600 13px var(--font); margin-top:8px; }
  .tp-warn{ font-style:normal; color:var(--stamp); font-weight:800; }
  .tp-setup{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:var(--card); border:1.5px dashed var(--gold); border-radius:18px; padding:12px; margin-bottom:12px; font:600 13px var(--font); }
  .tp-setup > b{ width:100%; }
  .tp-setup-chip{ border:1.5px solid var(--line); background:var(--paper); border-radius:999px; padding:6px 12px; font:700 12.5px var(--font); cursor:pointer; color:var(--ink); }
  .tp-setup-chip.ok{ opacity:.6; cursor:default; }
  .tp-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
  @media (max-width:520px){ .tp-stats{ grid-template-columns:repeat(2,1fr); } }
  .tp-stats button{ background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:12px 8px; display:flex; flex-direction:column; align-items:center; cursor:pointer; font-family:var(--font); color:var(--ink); }
  .tp-stats b{ font-size:24px; } .tp-stats span{ font-size:11.5px; color:var(--muted); text-align:center; }
  .tp-sec{ background:var(--card); border:1.5px solid var(--line); border-radius:22px; padding:14px; margin-bottom:14px; font-family:var(--font); scroll-margin-top:12px; }
  .tp-sec h3{ font:800 17px var(--font); margin:0 0 10px; display:flex; align-items:center; gap:8px; }
  .tp-count{ font-size:12px; background:var(--primary-tint); color:var(--cover-deep); border-radius:999px; padding:2px 8px; }
  .tp-att{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
  .tp-att:last-child{ border-bottom:none; }
  .tp-att > div{ flex:1; min-width:0; display:flex; flex-direction:column; } .tp-att b{ font-size:14px; } .tp-att span{ font-size:12px; color:var(--muted); }
  .tp-att-ic{ font-size:22px; width:36px; height:36px; border-radius:12px; background:var(--paper); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .tp-att-btn{ margin:0 !important; flex-shrink:0; min-height:40px; padding:8px 12px; }
  .tp-allgood{ font:600 13.5px var(--font); color:var(--muted); padding:6px 0; }
  .tp-students{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
  .tp-student{ border:1.5px solid var(--line); border-radius:18px; padding:12px; background:var(--paper); }
  .tp-student-top{ display:flex; gap:10px; align-items:center; }
  .tp-student-top > div{ display:flex; flex-direction:column; } .tp-student-top span{ font-size:12px; color:var(--muted); }
  .tp-student-facts{ display:flex; flex-wrap:wrap; gap:6px 12px; font:600 12px var(--font); color:var(--muted); margin:8px 0; }
  .tp-student-acts{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
  .tp-student-acts button{ margin:0 !important; min-height:42px; font-size:17px; padding:0; }
  .tp-tools{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
  .tp-tool{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; background:var(--paper); border:1.5px solid var(--line); border-radius:18px; padding:12px; cursor:pointer; font-family:var(--font); color:var(--ink); min-height:96px; transition:transform .12s, border-color .12s; }
  .tp-tool:hover{ transform:translateY(-2px); border-color:var(--cover-light); }
  .tp-tool-ic{ font-size:24px; margin-bottom:2px; } .tp-tool b{ font-size:13.5px; } .tp-tool > span:last-child{ font-size:11.5px; color:var(--muted); }
  .tp-step{ border:1.5px solid var(--line); border-radius:16px; margin-bottom:8px; background:var(--paper); }
  .tp-step > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:12px; font-size:14px; }
  .tp-step > summary::-webkit-details-marker{ display:none; }
  .tp-step-ic{ font-size:20px; } .tp-step-min{ margin-left:auto; font:700 11.5px var(--font); background:var(--card); border-radius:999px; padding:3px 9px; color:var(--muted); }
  .tp-step ul{ margin:0 12px 8px 30px; padding:0; font-size:13.5px; line-height:1.5; }
  .tp-step .tp-quick-row{ padding:0 12px 12px; }
  .tp-quick-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
  .tp-quick-row > button{ flex:1 1 140px; margin:0 !important; min-height:44px; }
  .tp-empty-hero{ text-align:center; padding:30px 10px; }
  .tp-guide-link{ text-decoration:none; margin:0 0 14px; }
  .tp-mini-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:8px; }
  .tp-mini-stats div{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px; text-align:center; display:flex; flex-direction:column; }
  .tp-mini-stats b{ font-size:15px; } .tp-mini-stats span{ font-size:11px; color:var(--muted); }
  .tp-hw-table td{ white-space:normal; vertical-align:top; } .tp-hw-row{ cursor:pointer; } .tp-hw-row:hover td{ background:var(--paper); }
  /* ---- Quiz from app words ---- */
  .cq-auto{ background:linear-gradient(135deg,var(--gold-tint),var(--primary-tint)); border-radius:18px; padding:12px; margin-bottom:6px; }
  .cq-auto-title{ font:800 14px var(--font); margin-bottom:8px; }
  .cq-auto .teacher-search{ background:var(--card); }
  .cq-style-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .cq-style-chips button{ border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:7px 11px; font:700 12.5px var(--font); cursor:pointer; min-height:36px; }
  .cq-style-chips button.on{ background:var(--cover); color:var(--on-cover); border-color:transparent; }
  .cq-audio-row{ display:flex; align-items:center; gap:6px; font:700 12.5px var(--font); margin-bottom:6px; white-space:nowrap; }
  /* ---- Softer, cuter surfaces app-wide ---- */
  .card{ border-radius:20px; }
  .bk-card{ text-align:left; }
  .teacher-modal{ border-radius:26px; }
  .vc-modal{ border-radius:24px 24px 0 0; }
  @media (min-width:700px){ .vc-modal{ border-radius:24px; } }