/* KURINJI demo — plain CSS, nothing loaded from the internet. */
:root { --bg:#FBF7F0; --panel:#fff; --ink:#1F2A24; --muted:#5F6A64; --line:#E4DDD0; --green:#3D6B4F; --green-dark:#2F5540;
  --green-soft:#E6F0EA; --amber:#B8860B; --amber-soft:#FFF4D6; --red:#B23A3A; --red-soft:#FBE5E5; --radius:16px; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font-size:18px; line-height:1.45;
  font-family:-apple-system,"Helvetica Neue",Arial,"Noto Sans Tamil","Tamil Sangam MN","Tamil MN",sans-serif; }
small { font-weight:400; color:var(--muted); font-size:.78em; }
h1 { font-size:1.7rem; margin:0 0 .6rem; } h1 small, h2 small { display:block; } h2 { font-size:1.2rem; margin:0 0 .5rem; }
.hint { color:var(--muted); margin:.2rem 0 1rem; } .muted { color:var(--muted); } .hidden { display:none !important; }
code { background:#F1EBE0; padding:.1em .35em; border-radius:6px; font-size:.9em; }
a { color:var(--green-dark); }

.top { display:flex; align-items:center; gap:1rem; padding:.6rem 1.4rem; background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5; flex-wrap:wrap; }
.brand { background:none; border:none; padding:0; cursor:pointer; font:inherit; color:inherit; text-align:left; display:flex; flex-direction:column; margin-right:auto; }
body.teacher .brand { margin-right:0; }
.brand .logo { font-size:1.5rem; font-weight:700; color:var(--green-dark); line-height:1.1; } .brand .sub { font-size:.8rem; color:var(--muted); }
.tabs { display:flex; gap:.3rem; flex:1; flex-wrap:wrap; }
.tabs button { background:none; border:1px solid transparent; border-radius:10px; padding:.35rem .8rem; cursor:pointer; font:inherit; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; line-height:1.15; }
.tabs button small { font-size:.7rem; } .tabs button.active { background:var(--green-soft); border-color:#C9DCD0; color:var(--green-dark); }
.teacher-link { font:inherit; font-size:.8rem; color:var(--muted); background:none; border:1px solid var(--line); border-radius:999px; padding:.25rem .7rem; cursor:pointer; }
.teacher-link.on { background:var(--green-soft); color:var(--green-dark); border-color:#C9DCD0; }
body:not(.teacher) .teacher-only { display:none !important; }
body:not(.admin) .admin-only { display:none !important; }
body:not(.hosted) .hosted-only { display:none !important; }
body:not(.auth) .login-only { display:none !important; }
.role-badge { font-size:.8rem; font-weight:700; color:#fff; background:var(--green-dark); border-radius:999px; padding:.25rem .7rem; }
.landing { text-align:center; max-width:760px; margin:2rem auto 0; }
.lead { font-size:1.15rem; color:var(--muted); margin:0 auto 1.6rem; max-width:620px; }
.start { font:inherit; min-height:120px; min-width:320px; border-radius:999px; border:none; background:var(--green); color:#fff; cursor:pointer;
  box-shadow:0 6px 18px rgba(47,85,64,.25); padding:.8rem 2.4rem; } .start:hover { background:var(--green-dark); }
.start .en { font-size:2.2rem; font-weight:700; } .start .ta { color:#E6F0EA; font-size:1.1rem; }
.modal-box label.login-only { display:block; margin-bottom:.6rem; } .modal-box select { font:inherit; padding:.3rem .5rem; }

main { max-width:1180px; margin:0 auto; padding:1.2rem 1.4rem 2rem; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.4rem; margin-bottom:1rem; }
.btn { font:inherit; border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:12px; padding:.7rem 1.2rem; cursor:pointer; }
.btn:hover { background:#F6F1E7; } .btn:disabled { opacity:.45; cursor:default; }
.btn.primary { background:var(--green); border-color:var(--green); color:#fff; } .btn.primary:hover { background:var(--green-dark); }
.btn.small { padding:.4rem .8rem; font-size:.9rem; } .btn.danger { color:var(--red); }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(61,107,79,.35) } 50% { box-shadow:0 0 0 14px rgba(61,107,79,0) } }
@keyframes pop { from { transform:scale(.96); opacity:0 } to { transform:scale(1); opacity:1 } }

/* ---- Child view: English big, Tamil small underneath; every button at least 64px tall ---- */
.en, .ta { display:block; } .ta { color:var(--muted); font-size:.62em; font-weight:400; margin-top:.1em; }
.ask { font-size:2.3rem; text-align:center; margin:1rem 0 1.4rem; line-height:1.2; } .ask small { font-size:1.1rem; margin-top:.35rem; }
.placeholder-card { color:var(--muted); font-size:1.6rem; text-align:center; } .placeholder-card .ta { font-size:1.05rem; }

.choice-grid { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem; }
.choice { width:320px; min-height:210px; border-radius:28px; border:3px solid transparent; font:inherit; font-size:2.8rem; font-weight:700; color:var(--ink);
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.choice.badaga { background:#E5F3E8; } .choice.marwari { background:#FFF1DC; }
.choice:hover, .choice:focus-visible { border-color:var(--green); }

.back-btn { font:inherit; font-size:1.1rem; min-height:64px; padding:.5rem 1.4rem; border-radius:999px; border:2px solid var(--line); background:var(--panel);
  color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:.6rem; }
.back-btn:hover { border-color:var(--green); } .back-btn small { font-size:.85rem; }

.term-tabs { display:flex; gap:1rem; justify-content:center; margin-bottom:1.4rem; flex-wrap:wrap; }
.term { font:inherit; font-size:1.4rem; font-weight:700; min-height:72px; min-width:190px; padding:.4rem 1.6rem; border-radius:999px; border:3px solid var(--line);
  background:var(--panel); color:var(--ink); cursor:pointer; }
.term.selected { border-color:var(--green); background:var(--green-soft); color:var(--green-dark); }

.unit-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.2rem; }
.unit-card { font:inherit; color:var(--ink); background:var(--panel); border:3px solid var(--line); border-radius:24px; padding:1rem; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; text-align:center; }
.unit-card:hover, .unit-card:focus-visible { border-color:var(--green); }
.unit-card .art { width:150px; height:150px; margin-bottom:.5rem; }
.unit-card .unit-no { font-size:.95rem; color:var(--muted); } .unit-card .en { font-size:1.7rem; font-weight:700; line-height:1.2; }
.unit-card .ta { font-size:1.05rem; } .unit-card .ready { font-size:1rem; color:var(--green-dark); margin-top:.4rem; }

/* A picture, or a soft coloured tile with the English word when there is no approved picture */
.art { border-radius:18px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none; }
.art img { width:100%; height:100%; object-fit:contain; }
.art.soft span { color:#1F2A44; font-weight:700; font-size:1.6rem; line-height:1.15; text-align:center; padding:.3rem; text-transform:capitalize; overflow-wrap:anywhere; }
.art.soft.long span { font-size:1.2rem; }

.unit-head { display:flex; align-items:center; gap:1.2rem; margin-bottom:1rem; flex-wrap:wrap; }
.unit-head h1 { margin:0; font-size:2rem; } .unit-head h1 small { display:inline; font-size:1rem; margin-left:.3rem; }
.unit-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:1.6rem; align-items:start; }
.unit-main { position:sticky; top:90px; text-align:center; }
.mic { font:inherit; width:100%; min-height:124px; border-radius:999px; border:3px solid var(--green); background:var(--green); color:#fff; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:.7rem 1.6rem; box-shadow:0 6px 18px rgba(47,85,64,.25); }
.mic:hover { background:var(--green-dark); }
.mic .icon { font-size:2.1rem; line-height:1; } .mic .en { font-size:1.9rem; font-weight:700; line-height:1.2; } .mic .ta { color:#E6F0EA; font-size:1.05rem; }
.mic.listening { background:#fff; color:var(--green-dark); animation:pulse 1s infinite; } .mic.listening .ta { color:var(--muted); }
.mic[data-mode=checking] { opacity:.8; cursor:progress; }
.unit-words h2 { font-size:1.25rem; }
.speak-in { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.8rem; } .speak-in .label { font-weight:700; } .speak-in .label small { margin-left:.3rem; }
.speak-in-buttons { display:flex; gap:.5rem; }
.speak-in-buttons button { flex:1; font:inherit; font-size:1.25rem; font-weight:700; min-height:64px; border:3px solid var(--line); border-radius:18px; background:var(--panel);
  color:var(--ink); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.15; }
.speak-in-buttons button small { font-size:.8rem; } .speak-in-buttons button.selected { border-color:var(--green); background:var(--green-soft); color:var(--green-dark); }

.result-area { min-height:380px; display:flex; flex-direction:column; align-items:stretch; justify-content:center; margin-top:.6rem; }
.result-card { background:var(--panel); border:1px solid var(--line); border-radius:28px; padding:1.2rem 1.6rem 1.4rem; width:100%;
  display:flex; flex-direction:column; align-items:center; animation:pop .25s ease-out; }
.result-card .art { width:220px; height:220px; } .result-card .art.soft span { font-size:2.4rem; }
.result-card .english { font-size:4rem; font-weight:700; color:var(--green-dark); line-height:1.1; margin-top:.4rem; text-transform:capitalize; }
.result-card .tamil { font-size:1.3rem; color:var(--muted); }
.result-card .home-word { font-size:1.8rem; margin-top:.4rem; } .result-card .home-word .lang { display:block; font-size:.9rem; color:var(--muted); }
.result-card .credit { color:var(--muted); font-size:.9rem; margin-top:.4rem; }
.hear { font:inherit; margin-top:.9rem; min-height:72px; padding:.4rem 1.8rem; border-radius:999px; border:3px solid var(--green); background:var(--green-soft);
  color:var(--green-dark); cursor:pointer; }
.hear:hover { background:#D6E8DC; } .hear .en { font-size:1.5rem; font-weight:700; } .hear .ta { font-size:.95rem; }
.hear-row { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.hear-row .hear { margin-top:.3rem; display:flex; flex-direction:column; align-items:center; justify-content:center; } .hear .en { white-space:nowrap; }
.hear.selected { background:var(--green); color:#fff; } .hear.selected .ta { color:#E6F0EA; }
.details { font-size:.85rem; color:var(--muted); margin-top:.7rem; }
.say-row { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:.3rem; }
.voice-label { margin-top:1rem; font-size:.9rem; color:var(--muted); } .voice-label .en { font-weight:700; } .voice-label .ta { margin-left:.4rem; font-size:.8rem; }
.say-word { font:inherit; min-height:64px; padding:.3rem 1.3rem; border-radius:999px; border:2px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.say-word:hover { border-color:var(--green); } .say-word.selected { border-color:var(--green); background:var(--green-soft); } .say-word .en { font-size:1.2rem; font-weight:700; } .say-word .ta { font-size:.75rem; color:var(--muted); }

.word-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); gap:.8rem; }
.word-tile { font:inherit; color:var(--ink); background:var(--panel); border:3px solid var(--line); border-radius:20px; padding:.6rem .4rem; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; text-align:center; }
.word-tile:hover, .word-tile:focus-visible { border-color:var(--green); } .word-tile.playing { border-color:var(--green); background:var(--green-soft); }
.word-tile .art { width:96px; height:96px; } .word-tile .art.soft span, .word-tile .art.soft.long span { font-size:1.05rem; }
.word-tile .en { font-size:1.15rem; font-weight:700; text-transform:capitalize; margin-top:.3rem; } .word-tile .ta { font-size:.85rem; }

.again-card { background:var(--amber-soft); border-radius:28px; padding:1.6rem 1.8rem; width:100%; text-align:center; animation:pop .25s ease-out; }
.again-card > .en { font-size:2.4rem; font-weight:700; line-height:1.2; } .again-card > .ta { font-size:1.2rem; }
.again-card .pick { margin-top:1rem; font-size:1.25rem; }
.again-card .choices { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:.6rem; }
.again-card .choices .word-tile { width:150px; }

.modal { position:fixed; inset:0; background:rgba(31,42,36,.45); display:flex; align-items:center; justify-content:center; z-index:30; }
.modal-box { background:var(--panel); border-radius:20px; padding:1.6rem 2rem; min-width:320px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.modal-box input { font:inherit; font-size:2rem; letter-spacing:.5em; text-align:center; width:210px; padding:.4rem; border:2px solid var(--line); border-radius:12px; }
.pin-error { color:var(--red); min-height:1.5em; margin-top:.4rem; }

.waking { position:fixed; top:84px; left:50%; transform:translateX(-50%); z-index:25; display:flex; gap:.8rem; align-items:center;
  background:var(--amber-soft); border:2px solid #E9D49A; border-radius:16px; padding:.8rem 1.4rem; font-size:1.25rem; font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.12); } .waking .ta { font-size:.8em; font-weight:400; }
.spinner { width:26px; height:26px; border:4px solid #E9D49A; border-top-color:var(--amber); border-radius:50%; animation:spin 1s linear infinite; flex:none; }
@keyframes spin { to { transform:rotate(360deg) } }

.judge-tools { text-align:center; margin-top:2.4rem; }
.samples { max-width:720px; margin:1rem auto 0; text-align:left; }
.sample { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; padding:.5rem .7rem; border-bottom:1px solid var(--line); }
.sample .label { flex:1; } .sample .btn { min-height:44px; }
.tools { margin-top:1rem; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:.6rem 1rem; }
.tools summary { cursor:pointer; font-weight:700; min-height:44px; display:flex; align-items:center; gap:.5rem; }
.upload { display:block; margin:.8rem 0; } .upload input { display:block; margin-top:.4rem; font:inherit; }
.expected { margin-top:.8rem; font-size:1.3rem; font-weight:700; padding:.6rem 1rem; border-radius:12px; }
.expected.ok { background:var(--green-soft); color:var(--green-dark); } .expected.bad { background:var(--red-soft); color:var(--red); }

/* ---- Teacher pages ---- */
.seg { display:inline-flex; border:2px solid var(--line); border-radius:999px; overflow:hidden; }
.seg button { font:inherit; border:none; background:var(--panel); color:var(--ink); padding:.5rem 1rem; cursor:pointer; min-height:48px; }
.seg button.selected { background:var(--green-soft); color:var(--green-dark); font-weight:700; }
#screen-reverse .stage { max-width:720px; } #screen-reverse .choices { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:.8rem; }
#screen-reverse .choices .word-tile { width:150px; }
.not-recorded { margin-top:.8rem; background:var(--amber-soft); border-radius:14px; padding:.6rem 1rem; font-size:1.1rem; } .not-recorded .ta { font-size:.85rem; }
.stage { max-width:820px; margin:0 auto; text-align:center; }
.mode-line { color:var(--muted); margin-bottom:.6rem; }
.meter { height:14px; background:#ECE6DA; border-radius:999px; overflow:hidden; margin:.8rem auto .3rem; max-width:520px; }
.meter-fill { height:100%; width:0; background:linear-gradient(90deg,var(--green),#8DBF9A); transition:width .06s linear; } .meter-fill.hot { background:var(--red); }
.rec-status { min-height:1.4em; color:var(--muted); }
.actions { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:.8rem; align-items:center; }
.correct { margin-top:.8rem; background:var(--panel); border:1px dashed var(--line); border-radius:12px; padding:.8rem; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; align-items:center; }
.correct select { font:inherit; padding:.4rem .5rem; border-radius:8px; border:1px solid #CFC6B5; max-width:320px; }
.strip { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; margin-top:1rem; }
.chip { padding:.25rem .7rem; border-radius:999px; background:var(--green-soft); color:var(--green-dark); font-size:.9rem; }
.chip.again { background:var(--amber-soft); color:var(--amber); } .chip.none { background:#EEE8DB; color:var(--muted); }

.summary { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.7rem 1rem; min-width:150px; } .stat b { display:block; font-size:1.8rem; }
.table-wrap { overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); }
table { border-collapse:collapse; width:100%; font-size:.95rem; } th, td { padding:.45rem .7rem; border-bottom:1px solid var(--line); text-align:left; }
th { background:#F6F1E7; }
td.bad { color:var(--red); font-weight:700; } td.good { color:var(--green-dark); font-weight:700; }

label.inline { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; } label.inline input[type=text], label.inline input:not([type]) { font:inherit; padding:.45rem .6rem; border:1px solid #CFC6B5; border-radius:10px; min-width:260px; }
label.inline select { font:inherit; padding:.4rem .5rem; border-radius:8px; border:1px solid #CFC6B5; }
.pic-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.8rem; }
.pic { background:#FAF6EE; border:1px solid var(--line); border-radius:12px; padding:.7rem; text-align:center; }
.pic img { width:120px; height:120px; object-fit:contain; background:#fff; border-radius:10px; } .pic .none { width:120px; height:120px; margin:0 auto; border-radius:10px; background:#EEE8DB; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.pic .meta { font-size:.8rem; color:var(--muted); margin:.3rem 0; } .pic.approved { border-color:#C9DCD0; background:var(--green-soft); }
.corr { display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; padding:.7rem 0; border-bottom:1px solid var(--line); }
.corr select { font:inherit; padding:.4rem .5rem; border-radius:8px; border:1px solid #CFC6B5; }

.toast { position:fixed; top:84px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:12px; z-index:20; max-width:90vw; box-shadow:0 6px 20px rgba(0,0,0,.2); }
.toast.error { background:var(--red); } .toast.ok { background:var(--green); }
@media (max-width:900px) { .unit-layout { grid-template-columns:1fr; } .unit-main { position:static; } .ask { font-size:1.9rem; } }
@media (max-width:600px) { .sample .label { flex-basis:100%; } .result-card .english { font-size:3rem; } .choice { width:100%; min-height:150px; }
  .result-card { padding:1rem .8rem 1.2rem; } .say-row { gap:.4rem; } .say-word { padding:.3rem .7rem; } .say-word .en { font-size:1.05rem; }
  .hear-row { gap:.5rem; flex-wrap:nowrap; } .hear-row .hear { flex:1; padding:.5rem .4rem; border-radius:22px; } .hear .en { font-size:1.1rem; } }