/* ClassroomHumor · Simplified ABA Flashcards with Correct/Incorrect */
:root{
  --surface:#ffffff;
  --ink:#0f172a;
  --ink-dim:#334155;
  --accent:#2563eb;
  --accent-ink:#ffffff;
  --danger:#dc2626;
  --radius:18px;
  --shadow:0 10px 30px rgba(2,6,23,.10), 0 3px 10px rgba(2,6,23,.06);
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  -webkit-text-size-adjust: 100%;
  font:16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans;
  color:var(--ink);
  background:#f8fafc;
}
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:14px 16px; background:var(--surface); box-shadow: var(--shadow);
  position:sticky; top:0; z-index:10;
}
.brand{ display:flex; align-items:center; gap:.75rem; min-width:0 }
.logo{ width:38px; height:38px; flex:0 0 auto }
.titles h1{ margin:0; font-size:clamp(1rem, 2.5vw, 1.35rem); letter-spacing:.2px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.subtitle{ margin:2px 0 0; color:var(--ink-dim); font-size:clamp(.85rem, 2vw, .95rem) }
.head-actions button{ border-radius:12px; border:1px solid #e2e8f0; padding:10px 12px; background:#fff; cursor:pointer }
main{ max-width:980px; margin:24px auto; padding:0 14px }

.progressbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px }
.meter{ display:flex; align-items:center; gap:.7rem }
.ring{ width:48px; height:48px; transform: rotate(-90deg) }
.ring .bg{ fill:none; stroke:#e2e8f0; stroke-width:4 }
.ring .fg{ fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; stroke-dasharray: 126; stroke-dashoffset: 126; transition: stroke-dashoffset .4s ease }
.ring-label{ position:relative; left:-54px; font-weight:700; font-size:.9rem }
.progress{ color:var(--ink-dim); font-weight:600; font-size:clamp(.9rem, 2.2vw, 1rem) }

.card-area{ display:grid; place-items:center }
.card{
  width: min(820px, 92vw);
  height: clamp(320px, 58vh, 520px);
  perspective:1000px; position:relative;
}
.card-face{
  position:absolute; inset:0; background:var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); backface-visibility:hidden; padding: clamp(18px, 3vw, 28px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid #e2e8f0;
}
.card-front{ transform: rotateY(0deg) }
.card-back{ transform: rotateY(180deg) }
.card.is-flipped .card-front{ transform: rotateY(180deg) }
.card.is-flipped .card-back{ transform: rotateY(360deg) }
.term{ font-size:clamp(1.35rem, 4.6vw, 2.2rem); font-weight:800; text-align:center; padding:0 .4rem }
.definition{ font-size:clamp(1rem, 2.5vw, 1.15rem); line-height:1.6; max-width:65ch; text-align:center; padding:0 .4rem; }
.definition.scrollable{ max-height: calc(100% - 92px); overflow:auto; padding-right: .6rem; }
.definition.scrollable::-webkit-scrollbar{ width: 8px }
.definition.scrollable::-webkit-scrollbar-thumb{ background: #cbd5e1; border-radius: 8px }
.source{ margin-top:10px; color:var(--ink-dim); font-size:clamp(.85rem, 2.2vw, .95rem) }
.hint{ margin-top:10px; color:var(--ink-dim); font-size:clamp(.85rem, 2vw, .95rem) }
kbd{ padding:.1rem .35rem; border:1px solid #cbd5e1; border-radius:6px; background:#fff; }

.toolbar{ display:flex; align-items:center; justify-content:center; margin-top:16px }
.buttons{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center }
select, button{ font: inherit; border-radius:12px; border:1px solid #e2e8f0; padding:10px 12px; background:#fff; cursor:pointer; }
button.primary{ background:var(--accent); color:var(--accent-ink); border-color:transparent }
button.danger{ background:#fff; color:var(--danger); border:1px solid #fecaca }
button.ghost{ background:#fff }
button.nav{ background:#fff }
button:focus{ outline:2px solid var(--accent); outline-offset:2px }
button:active{ transform: translateY(1px) }
button:hover{ box-shadow: 0 6px 16px rgba(2,6,23,.08) }

.site-footer{ margin:28px auto 22px; text-align:center; color:var(--ink-dim); font-size:clamp(.85rem, 2vw, .95rem) }

/* Modal */
dialog::backdrop{ background: rgba(15,23,42,.35) }
dialog{ border:none; border-radius:16px; padding:0; box-shadow: var(--shadow); width:min(720px, 94vw) }
.modal-card{ padding:0; display:flex; flex-direction:column; gap:0 }
.modal-card header{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #e2e8f0; background:#fff; border-radius:16px 16px 0 0 }
.modal-card h2{ margin:0; font-size:1.1rem }
.modal-card .close-btn{ font-size:1.2rem; line-height:1; padding:6px 10px }
.modal-card .modal-body{ padding:16px; display:flex; flex-direction:column; gap:16px; background:#fff }
.settings-row{ display:flex; gap:16px; flex-wrap:wrap }
.group{ flex:1 1 300px; border:1px solid #e2e8f0; border-radius:12px; padding:12px }
.group .label{ font-weight:700; margin-bottom:8px }
.group .options{ display:flex; flex-wrap:wrap; gap:.6rem }
.row-actions{ margin-top:8px; display:flex; gap:.5rem; flex-wrap:wrap }
.muted{ color:var(--ink-dim) }
.small{ font-size:.9rem }
.modal-card footer{ padding:12px 16px; border-top:1px solid #e2e8f0; background:#fff; border-radius:0 0 16px 16px; display:flex; justify-content:flex-end }