/* Suite styles (themeable + configurable 3D animations) */
.edu-srs{
  --edu-accent:#22c55e; --edu-bg:#f6f7f9; --edu-surface:#fff; --edu-text:#111827;
  --edu-btn-bg:#ffffff; --edu-btn-text:var(--edu-text); --edu-btn-hover:#f3f4f6;
  --edu-btn-radius:8px; --edu-card-radius:16px; --edu-shadow:0 4px 20px rgba(0,0,0,0.06);
  --edu-pill-bg:var(--edu-surface); --edu-pill-text:var(--edu-text);
  --edu-progress:var(--edu-accent);
  --edu-btn-again-bg:#fff3f3; --edu-btn-again-border:#fca5a5; --edu-btn-again-text:var(--edu-text);
  --edu-btn-next-bg:#f0fdf4; --edu-btn-next-border:#86efac; --edu-btn-next-text:var(--edu-text);
  --anim-duration:.5s; --anim-ease:ease; --anim-perspective:1000px;
  color:var(--edu-text);background:var(--edu-bg);padding:16px;border-radius:12px;box-shadow:var(--edu-shadow);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif
}
.edu-srs__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.edu-srs__title{font-weight:700;font-size:18px}
.pill{background:var(--edu-pill-bg);color:var(--edu-pill-text);border:1px solid #e5e7eb;border-radius:999px;padding:4px 10px;margin-left:6px;font-size:12px}

.edu-srs__toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.edu-srs__toolbar select,.edu-srs__toolbar button{border:1px solid #e5e7eb;background:var(--edu-btn-bg);color:var(--edu-btn-text);border-radius:var(--edu-btn-radius);padding:6px 10px;cursor:pointer}
.edu-srs__toolbar button:hover{background:var(--edu-btn-hover);border-color:var(--edu-accent)}

.edu-srs__progress{height:6px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:10px 0}
.edu-srs__progress-bar{height:6px;background:var(--edu-progress);width:0%}

.edu-srs__card{background:var(--edu-surface);border:1px solid #e5e7eb;border-radius:var(--edu-card-radius);padding:16px;min-height:160px;position:relative;box-shadow:var(--edu-shadow);
  transform-style:preserve-3d; perspective:var(--anim-perspective); transition:transform var(--anim-duration) var(--anim-ease), box-shadow var(--anim-duration) var(--anim-ease)}

.edu-srs.anim-flip3d .edu-srs__front,.edu-srs.anim-flip3d .edu-srs__back{backface-visibility:hidden; transition:transform var(--anim-duration) var(--anim-ease), opacity var(--anim-duration) var(--anim-ease)}











.edu-srs__card.is-entering{animation:eduSrsEnter var(--anim-duration) var(--anim-ease)}
@keyframes eduSrsEnter{from{transform:translateY(6px);opacity:.0} to{transform:translateY(0);opacity:1}}

.edu-srs__front{font-size:18px}
.edu-srs__back{margin-top:10px;border-top:1px dashed #ddd;padding-top:10px}

.edu-srs__typing{margin-top:12px;display:none}
.edu-srs__typing input{width:100%;padding:8px;border:1px solid #ddd;border-radius:var(--edu-btn-radius);margin-bottom:8px}

.edu-srs__mcq{margin-top:12px;display:none}
.edu-srs__choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.edu-srs__choice{border:1px solid #e5e7eb;background:var(--edu-btn-bg);color:var(--edu-btn-text);border-radius:var(--edu-btn-radius);padding:10px;cursor:pointer}
.edu-srs__choice:hover{background:var(--edu-btn-hover);border-color:var(--edu-accent)}

.edu-srs__controls{display:flex;gap:8px;justify-content:center;margin-top:12px}
.edu-srs__btn{border:1px solid #e5e7eb;background:var(--edu-btn-bg);color:var(--edu-btn-text);border-radius:var(--edu-btn-radius);padding:8px 12px;cursor:pointer}
.edu-srs__btn:hover{background:var(--edu-btn-hover);border-color:var(--edu-accent)}
.edu-srs__btn--again{background:var(--edu-btn-again-bg);border-color:var(--edu-btn-again-border);color:var(--edu-btn-again-text)}
.edu-srs__btn--next{background:var(--edu-btn-next-bg);border-color:var(--edu-btn-next-border);color:var(--edu-btn-next-text)}

.edu-srs__summary{margin-top:14px;padding:12px;border-radius:12px;background:#f9fafb;border:1px solid #e5e7eb}

.edu-srs .cloze{background:linear-gradient(90deg,#e5e7eb,#f3f4f6);color:transparent;border-radius:4px;padding:0 4px}

/* Confetti canvas overlay */
.edu-srs__confetti{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:99999}


/* Hint & Forecast panels (toggle) and sound label */
.edu-srs__hintbox,.edu-srs__forecastbox{margin-top:10px;padding:10px;border-radius:10px;background:var(--edu-surface);border:1px solid rgba(0,0,0,.08)}
.edu-srs__forecastgrid{margin-top:8px;display:grid;gap:6px}
.edu-srs__frow{display:grid;grid-template-columns:80px 1fr 30px;align-items:center;gap:8px}
.edu-srs__bar{height:8px;background:var(--edu-progress);border-radius:999px;opacity:.85}
.edu-srs__sound{margin-left:8px;font-size:12px;user-select:none}
.edu-srs__sound input{vertical-align:middle;margin-right:4px}


/* ===== Edu SRS Modern UI Pack v3.1.6.8-modern1 ===== */
.edu-srs{
  --edu-accent: var(--edu-accent, #22c55e);
  --edu-accent-2: color-mix(in oklab, var(--edu-accent) 70%, black);
  --edu-bg: var(--edu-bg, #f6f7f9);
  --edu-surface: var(--edu-surface, #ffffff);
  --edu-text: var(--edu-text, #111827);
  --edu-muted: #6b7280;
  --edu-ring: color-mix(in oklab, var(--edu-accent) 55%, white);
  --edu-ring-strong: color-mix(in oklab, var(--edu-accent) 80%, white);
  --edu-btn-bg: var(--edu-btn-bg, #ffffff);
  --edu-btn-hover: var(--edu-btn-hover, #f3f4f6);
  --edu-shadow: 0 10px 30px rgba(0,0,0,.08);
  --edu-card-radius: max(14px, var(--edu-card-radius, 16px));
  --edu-btn-radius: max(10px, var(--edu-btn-radius, 10px));
  background: radial-gradient(1200px 800px at 90% -10%, rgba(34,197,94,.09), transparent 35%),
              linear-gradient(180deg, #fafafa, var(--edu-bg));
  border: 1px solid rgba(17,24,39,.06);
}

/* Card */
.edu-srs__card{
  border-radius: var(--edu-card-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.85), var(--edu-surface));
  backdrop-filter: saturate(1.2) blur(4px);
  box-shadow: var(--edu-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.edu-srs__card:hover{ transform: translateY(-1px); box-shadow: 0 14px 40px rgba(0,0,0,.10); }

/* Toolbar */
.edu-srs__toolbar{
  display:flex; gap:10px; align-items:center; justify-content:space-between; margin:8px 0 14px;
}
.edu-srs__toolbar .pill{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  border: 1px solid rgba(17,24,39,.06);
}

/* Buttons – base */
.edu-srs__btn,
.edu-srs__toolbar button,
.edu-srs__choice{
  position: relative;
  border-radius: var(--edu-btn-radius);
  border: 1px solid rgba(17,24,39,.08);
  background: var(--edu-btn-bg);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 0 0 0 rgba(34,197,94,.0);
  transition: background .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease;
}
.edu-srs__btn:hover, .edu-srs__toolbar button:hover, .edu-srs__choice:hover{
  background: color-mix(in oklab, var(--edu-btn-bg) 85%, white);
  border-color: var(--edu-ring);
}
.edu-srs__btn:active, .edu-srs__toolbar button:active, .edu-srs__choice:active{ transform: translateY(1px); }

/* Buttons – primary actions */
.edu-srs__btn--next{
  background: linear-gradient(180deg, #f0fdf4, #dcfce7);
  border-color: color-mix(in oklab, var(--edu-progress,#22c55e) 50%, white);
}
.edu-srs__btn--again{
  background: linear-gradient(180deg, #fff1f2, #ffe4e6);
  border-color: #fecaca;
}

/* Choice grid modern look */
.edu-srs__choices{ gap:12px; }
.edu-srs__choice{
  padding: 12px 14px;
  text-align:left;
  font-weight:600;
  color: var(--edu-text);
}
.edu-srs__choice::after{
  content:''; position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(34,197,94,.0);
  transition: box-shadow .2s ease;
}
.edu-srs__choice:focus-visible::after,
.edu-srs__btn:focus-visible::after,
.edu-srs__toolbar button:focus-visible::after{
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--edu-ring) 45%, white);
}

/* Controls row */
.edu-srs__controls{ gap:10px; margin-top:16px; }
.edu-srs__btn{ padding: 10px 14px; font-weight:600; }
.edu-srs__btn--ghost{
  background: linear-gradient(180deg, #ffffff, #f9fafb);
}

/* Progress */
.edu-srs__bar{ position:relative; overflow:hidden; height:10px; }
.edu-srs__bar::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.6), transparent 30%);
  transform: translateX(-100%);
  animation: eduBarSheen 2.6s linear infinite;
}
@keyframes eduBarSheen{ to{ transform: translateX(100%); } }

/* Typing input */
.edu-srs__typing input{
  border: 1px solid rgba(17,24,39,.12);
  background: linear-gradient(180deg, #ffffff, #f9fafb);
  outline: none;
}
.edu-srs__typing input:focus{
  border-color: var(--edu-ring-strong);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--edu-ring) 45%, white);
}

/* Hint/Forecast panels */
.edu-srs__hintbox, .edu-srs__forecastbox{
  border-radius: 14px;
  border:1px solid rgba(17,24,39,.08);
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .edu-srs{
    --edu-bg:#0b1220; --edu-surface:#0f172a; --edu-text:#e5e7eb;
    --edu-btn-bg:#0f172a; --edu-btn-hover:#111827; --edu-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  .edu-srs__card{ background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.98)); }
  .edu-srs__btn, .edu-srs__toolbar button, .edu-srs__choice{ border-color: rgba(148,163,184,.18); }
  .edu-srs__choice:hover, .edu-srs__btn:hover{ background: #111827; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .edu-srs *{ transition: none!important; animation: none!important; }
}
/* ===== End Modern UI Pack ===== */


/* === Modern2: Flip the whole card (not only text) === */
.edu-srs.anim-flip3d{ perspective: var(--anim-perspective, 1000px); }
.edu-srs.anim-flip3d .edu-srs__card{
  transform-style: preserve-3d;
  transition: transform var(--anim-duration) var(--anim-ease);
}
/* Faces become absolute and backface hidden so the container flip reveals back */
.edu-srs.anim-flip3d .edu-srs__front,
.edu-srs.anim-flip3d .edu-srs__back{
  position:absolute; inset:0;
  backface-visibility: hidden;
  width:100%; height:100%;
}
/* Back faces rotated initially */
.edu-srs.axis-y.anim-flip3d .edu-srs.axis-x.anim-flip3d /* When flipped, rotate the entire card container */
.edu-srs.axis-y.anim-flip3d .edu-srs__card.is-flipped{ transform: rotateY(180deg); }
.edu-srs.axis-x.anim-flip3d .edu-srs__card.is-flipped{ transform: rotateX(180deg); }


/* === Modern2: Icon buttons and pills === */
.edu-srs__btn--icon{ width:40px; height:40px; padding:0; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; }
.edu-srs__btn--icon .edu-icon{ width:18px; height:18px; display:inline-block; }
.edu-srs__btn--icon .edu-label{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } /* keep text for a11y */

/* Mic icon */
.edu-srs__mic.edu-srs__btn--icon::before{
  content:""; width:18px; height:18px; display:block;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 1 0-6 0v4a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 1 0-6 0v4a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/></svg>') center / contain no-repeat;
  background: currentColor;
}
/* Speaker (TTS) */
.edu-srs__tts.edu-srs__btn--icon::before{
  content:""; width:18px; height:18px; display:block;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M3 10v4h4l5 5V5L7 10H3zm13.54-2.46l-1.42 1.42A4.977 4.977 0 0 1 16 12c0 1.38-.56 2.63-1.46 3.54l1.42 1.42A6.96 6.96 0 0 0 18 12c0-1.93-.78-3.68-2.46-5.46zm2.83-2.83l-1.41 1.41C20.02 7.71 21 9.76 21 12s-.98 4.29-3.04 5.88l1.41 1.41C22.16 17.29 23 14.76 23 12s-.84-5.29-3.63-7.29z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M3 10v4h4l5 5V5L7 10H3zm13.54-2.46l-1.42 1.42A4.977 4.977 0 0 1 16 12c0 1.38-.56 2.63-1.46 3.54l1.42 1.42A6.96 6.96 0 0 0 18 12c0-1.93-.78-3.68-2.46-5.46zm2.83-2.83l-1.41 1.41C20.02 7.71 21 9.76 21 12s-.98 4.29-3.04 5.88l1.41 1.41C22.16 17.29 23 14.76 23 12s-.84-5.29-3.63-7.29z"/></svg>') center / contain no-repeat;
  background: currentColor;
}
/* Hint (lightbulb) */
.edu-srs__hint.edu-srs__btn--icon::before{
  content:""; width:18px; height:18px; display:block;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 21h6v-1H9v1zm3-20a7 7 0 0 0-4 12.9V17h8v-3.1A7 7 0 0 0 12 1z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 21h6v-1H9v1zm3-20a7 7 0 0 0-4 12.9V17h8v-3.1A7 7 0 0 0 12 1z"/></svg>') center / contain no-repeat;
  background: currentColor;
}

/* Pills: goals (streak) and due with icons */
.edu-srs__streak::before{
  content:""; display:inline-block; width:14px; height:14px; margin-right:6px; vertical-align:-2px;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l3 7 7 .5-5.3 4.7 1.6 7.3L12 17l-6.3 4.5 1.6-7.3L2 9.5 9 9z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l3 7 7 .5-5.3 4.7 1.6 7.3L12 17l-6.3 4.5 1.6-7.3L2 9.5 9 9z"/></svg>') center / contain no-repeat;
  background: currentColor;
}
.edu-srs__due::before{
  content:""; display:inline-block; width:14px; height:14px; margin-right:6px; vertical-align:-2px;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2v2H5a2 2 0 0 0-2 2v1h18V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm14 7H3v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9zm-7 3h2v2h-2v-2z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2v2H5a2 2 0 0 0-2 2v1h18V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm14 7H3v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9zm-7 3h2v2h-2v-2z"/></svg>') center / contain no-repeat;
  background: currentColor;
}


/* Modern2 fix: ensure only the visible face accepts interaction */
.edu-srs.anim-flip3d .edu-srs__front{ transform: rotateY(0deg) rotateX(0deg); z-index:2; }
.edu-srs.anim-flip3d .edu-srs__back{ z-index:1; }
.edu-srs.anim-flip3d .edu-srs__card:not(.is-flipped) .edu-srs__back{ pointer-events:none; }
.edu-srs.anim-flip3d .edu-srs__card.is-flipped .edu-srs__front{ pointer-events:none; }

.edu-srs__card{ overflow:hidden; }
.edu-srs.anim-flip3d .edu-srs__front, .edu-srs.anim-flip3d .edu-srs__back{ display:flex; align-items:center; justify-content:center; }

/* FIX1: robust 3D flip */
.edu-srs{
  perspective: var(--anim-perspective, 1000px);
}
.edu-srs.anim-flip3d .edu-srs__front,
.edu-srs.anim-flip3d .edu-srs__back{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.edu-srs.anim-flip3d .edu-srs__front{
  transform: rotateY(0deg) rotateX(0deg);
}
.edu-srs.axis-y.anim-flip3d .edu-srs.axis-x.anim-flip3d .edu-srs.axis-y.anim-flip3d .edu-srs__card.is-flipped{ transform: rotateY(180deg); }
.edu-srs.axis-x.anim-flip3d .edu-srs__card.is-flipped{ transform: rotateX(180deg); }


/* FIX2: axis-scoped back-face pre-rotation only */
.edu-srs.axis-y.anim-flip3d .edu-srs__back{ transform: rotateY(180deg); }
.edu-srs.axis-x.anim-flip3d .edu-srs__back{ transform: rotateX(180deg); }
.edu-srs.axis-y.anim-flip3d .edu-srs__card.is-flipped{ transform: rotateY(180deg); }
.edu-srs.axis-x.anim-flip3d .edu-srs__card.is-flipped{ transform: rotateX(180deg); }
.edu-srs.anim-flip3d .edu-srs__front,
.edu-srs.anim-flip3d .edu-srs__back{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.edu-srs.anim-flip3d .edu-srs__front{ transform: rotateY(0deg) rotateX(0deg); }