/* xtiera Teach: the tutor-facing pages share the lessons' look (ink outlines, sky-to-sakura), toned down for daily admin work. */
:root{
  --sky:#BFE9FF; --sky2:#FFE7F3; --ink:#2B2350; --soft:#5B5480; --paper:#fff; --line:#E4DDF7;
  --pink:#F15BB5; --pink-soft:#FDE0F1; --sun:#FFC93C; --grass:#2EB872; --grass-soft:#DDF5E8; --red:#D93A40; --red-soft:#FFE3E1; --amber-soft:#FFF0B8;
  --kana:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif; --round:"Fredoka","M PLUS Rounded 1c",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
html{background:linear-gradient(160deg,var(--sky),#E7F7FF 45%,var(--sky2));min-height:100%}
body{font-family:var(--round);color:var(--ink);background:transparent;min-height:100vh;font-size:17px;line-height:1.45}
a{color:var(--ink)}
.jp{font-family:var(--kana);font-weight:800}
.muted{color:var(--soft)}.small{font-size:14px}
h1{font-size:34px;margin:0 0 6px;text-wrap:balance}h2{font-size:22px;margin:0 0 14px}h3{font-size:18px;margin:22px 0 10px}
.wrap{max-width:1080px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-left,0px)) 60px max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px}
body.center .wrap{min-height:100vh;justify-content:center;align-items:center}

/* top bar */
.topnav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px max(16px,env(safe-area-inset-left,0px));background:var(--paper);border-bottom:4px solid var(--ink)}
.brand{font-weight:700;font-size:20px;text-decoration:none;margin-right:auto}
.topnav nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.topnav nav a,.linkbtn{font:600 15px var(--round);text-decoration:none;padding:6px 12px;border-radius:999px;background:none;border:0;color:var(--ink);cursor:pointer}
.topnav nav a:hover,.linkbtn:hover{background:var(--pink-soft)}
.topnav form{margin:0}

/* building blocks */
.card{background:var(--paper);border:4px solid var(--ink);border-radius:26px;box-shadow:0 6px 0 var(--ink);padding:22px 24px;min-width:0}
.card.narrow{width:min(420px,100%)}.narrowish{max-width:620px}
.card.empty{text-align:center}
.hello{font-size:36px;color:var(--pink)}
.head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.head h1{display:flex;align-items:center;gap:12px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;font:700 16px var(--round);color:var(--ink);text-decoration:none;background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:8px 18px;box-shadow:0 4px 0 var(--ink);cursor:pointer;white-space:nowrap}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.primary{background:var(--sun)}.btn.danger{background:var(--red);color:#fff}
.btn.small{font-size:14px;padding:5px 14px}.btn.ghost{opacity:.6}
.linkbtn.danger{font-size:16px}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.form{display:flex;flex-direction:column;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600}
input,textarea{font:500 16px var(--round);color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:9px 14px;min-width:0}
input:disabled{background:#F3F1FA;color:var(--soft)}
.inline{display:flex;gap:10px;flex-wrap:wrap}.inline input{width:240px;max-width:100%}
.flash{border:3px solid var(--ink);border-radius:16px;padding:10px 16px;font-weight:600;background:var(--grass-soft)}
.flash.error{background:var(--red-soft)}.flash.info{background:#EEF4FF}
.flash code{background:#fff;border-radius:6px;padding:1px 6px;font-size:16px}
.pill{font-size:12px;background:var(--pink-soft);border-radius:999px;padding:1px 8px}

/* students */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.scard{display:flex;align-items:center;gap:14px;text-decoration:none;background:var(--paper);border:4px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--ink);padding:14px 16px;transition:transform .15s}
.scard:hover{transform:translateY(-3px)}
.avatar{width:52px;height:52px;flex:none;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:700;border:3px solid var(--ink)}
.avatar.big{width:58px;height:58px}
.sinfo{display:flex;flex-direction:column;min-width:0}.sinfo b{font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snums span{white-space:nowrap}
.snums{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.stats div{flex:1 1 140px;background:#F7F4FF;border-radius:18px;padding:12px 16px;display:flex;flex-direction:column}
.stats b{font-size:28px;font-variant-numeric:tabular-nums}.stats span{color:var(--soft);font-size:14px}
.letters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
.lname{font-weight:700;margin-right:6px}
.lt{width:64px;height:72px;border:3px solid var(--ink);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--kana);font-weight:800;font-size:28px;line-height:1.05;background:#F3F1FA}
.lt i{font-style:normal;font-size:17px}
.g2{background:var(--grass-soft)}.g1{background:var(--amber-soft)}.g0{background:var(--red-soft)}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;color:var(--soft);font-weight:600;border-bottom:3px solid var(--line);padding:8px}
.tbl td{border-bottom:2px solid var(--line);padding:9px 8px;vertical-align:top}
.tbl tr.paused td{opacity:.5}
.card:has(.tbl){overflow-x:auto}
.danger-zone{margin-top:22px;border-top:2px dashed var(--line);padding-top:14px}
.danger-zone summary{cursor:pointer;color:var(--red);font-weight:600}
.danger-zone .form{margin-top:12px;max-width:420px}

.lessons{display:flex;flex-direction:column;gap:10px}
.lrow{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:3px solid var(--line);border-radius:20px;padding:10px 14px}
.lrow.done{border-color:var(--grass);background:#F4FCF7}
.lnum{width:34px;height:34px;flex:none;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700}
.lrow .lname{width:140px;font-size:22px;margin:0}
.lletters{display:flex;gap:8px;flex-wrap:wrap}
.lrow .lt{width:52px;height:60px;font-size:24px}.lrow .lt i{font-size:14px}
.lacts{margin-left:auto;display:flex;gap:8px}
.ltag{position:absolute;top:-10px;left:60px;font-size:12px;font-weight:700;background:var(--sun);border:2px solid var(--ink);border-radius:999px;padding:0 8px}
.course{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.course+.course{margin-top:10px}
.lcourse{margin:18px 0 8px;font-size:18px}.lcourse:first-of-type{margin-top:4px}.lcourse .jp{color:var(--soft);font-weight:600}
.rgrid{border-collapse:separate;border-spacing:6px;margin:-6px}
.rgrid th{font-size:15px;text-align:left;padding-right:8px;white-space:nowrap}
.rgrid td{width:64px;height:58px;border:2px solid var(--ink);border-radius:12px;text-align:center;vertical-align:middle;line-height:1.05}
.rgrid td .jp{display:block;font-size:24px}.rgrid td i{font-style:normal;font-size:14px}
.rgrid td.gx{background:#F7F5FC;border-color:var(--line)}.rgrid td.blank{border:0}
/* printable pages */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:900px;margin:0 auto}
.paper{background:#fff;border:4px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink);margin:0 auto;width:100%;max-width:900px}
.report{padding:40px 46px}
.rhead{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:4px solid var(--ink);padding-bottom:18px;margin-bottom:20px}
.rtitle{font-size:38px;font-weight:700}.rsub{color:var(--pink);font-size:20px}
.rmeta{display:grid;grid-template-columns:auto auto;gap:4px 14px;align-content:center}
.rmeta div{display:contents}.rmeta span{color:var(--soft)}
.rstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rstats div{border:3px solid var(--ink);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column}
.rstats b{font-size:22px}.rstats span{color:var(--soft);font-size:13px}
.rletters{display:flex;gap:12px;flex-wrap:wrap}
.rl{width:96px;border:3px solid var(--ink);border-radius:16px;display:flex;flex-direction:column;align-items:center;padding:8px 4px}
.rl .jp{font-size:40px;line-height:1.1}.rl i{font-style:normal;font-size:20px}.rl small{font-size:12px;color:var(--soft)}
.comment{min-height:110px;border:3px dashed var(--line);border-radius:16px;padding:14px 16px;font-size:16px}
.comment:focus{border-color:var(--pink);outline:none}
.rfoot{display:flex;justify-content:space-between;margin-top:30px;padding-top:12px;border-top:2px solid var(--line);color:var(--soft);font-size:14px}
.cert{aspect-ratio:297/210;padding:22px;background:linear-gradient(135deg,#FFF6FB,#EEF8FF)}
.cinner{height:100%;border:6px double var(--ink);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px}
.ctop{font-size:44px}
.ctitle{font-size:46px;font-weight:700;letter-spacing:.02em}
.csub{color:var(--pink);font-size:22px;margin-top:-6px}
.cline{margin:6px 0 0;font-size:19px;color:var(--soft)}
.cname{font-size:60px;font-weight:700;color:var(--pink);border-bottom:4px solid var(--ink);padding:0 40px;line-height:1.2}
.clesson{display:flex;flex-direction:column;align-items:center}.clesson .jp{font-size:46px;letter-spacing:.12em}.clesson small{font-size:16px;color:var(--soft)}
.csign{display:flex;gap:90px;margin-top:16px}
.csign div{display:flex;flex-direction:column;align-items:center;border-top:3px solid var(--ink);padding-top:6px;min-width:200px}
.csign span{color:var(--soft);font-size:14px}

@media (max-width:640px){
  .lrow .lname{width:auto}.lacts{margin-left:0}
  h1{font-size:28px}.rstats{grid-template-columns:repeat(2,1fr)}.report{padding:24px 18px}
  .csign{gap:24px}.cname{font-size:40px;padding:0 10px}.ctitle{font-size:30px}
}
@media print{
  html,body{background:#fff}
  .no-print,.topnav,.toolbar,.flash{display:none!important}
  .wrap{padding:0;max-width:none}
  .paper{border:0;box-shadow:none;border-radius:0;max-width:none}
  .report{padding:14mm 16mm}
  .cert{width:297mm;height:210mm;aspect-ratio:auto;padding:12mm}
  .comment{border-style:solid}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* class start + lesson cards */
.startbox{max-width:720px;width:100%;margin:30px auto 0;display:flex;flex-direction:column;gap:18px;text-align:center}
.search{display:flex;align-items:center;gap:12px;background:var(--paper);border:4px solid var(--ink);border-radius:999px;padding:6px 10px 6px 22px;box-shadow:0 6px 0 var(--ink);font-size:28px}
.search input{flex:1;border:0;font-size:26px;padding:10px 6px;background:transparent}
.search input:focus{outline:none}.search:focus-within{outline:4px solid var(--pink);outline-offset:4px}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;text-align:left}
.pick{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--paper);border:4px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--ink);padding:12px 16px;font-size:20px}
.pick b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pick .go{font-size:18px;color:var(--soft)}
.pick:hover{transform:translateY(-3px)}
.startacts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.newform{justify-content:center}
.classhead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.classhead h1{display:flex;align-items:center;gap:12px}
.lcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.lcard{display:flex;flex-direction:column;text-decoration:none;background:var(--paper);border:4px solid var(--ink);border-radius:28px;box-shadow:0 7px 0 var(--ink);overflow:hidden;transition:transform .2s}
.lcard:hover{transform:translateY(-5px) rotate(-.5deg)}
.lcard.next{outline:5px solid var(--sun);outline-offset:4px}
.lcard .band{position:relative;background:var(--c);background-image:radial-gradient(#ffffff40 2.5px,transparent 3px);background-size:22px 22px;padding:38px 12px 18px;border-bottom:4px solid var(--ink)}
.lcard .tag{position:absolute;top:10px;left:12px;background:var(--sun);border:3px solid var(--ink);border-radius:999px;padding:0 10px;font-size:13px;font-weight:700}
.nexttag{position:absolute;top:10px;right:12px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:0 10px;font-size:13px;font-weight:700}
.nexttag.done{background:var(--grass-soft)}
.kk{display:flex;justify-content:center;gap:6px}
.kk span{width:42px;height:46px;border-radius:12px;border:3px solid var(--ink);background:#fff;color:var(--c);display:grid;place-items:center;font-size:28px;box-shadow:0 3px 0 var(--ink)}
.lcard .dots{display:flex;justify-content:center;gap:10px;padding:12px}
.lcard .dots i{width:18px;height:18px;border-radius:50%;border:3px solid var(--ink)}
.lcard .dots i.gx{background:#E9E5F5;border-color:#C9C2E3}.lcard .dots i.g2{background:var(--grass)}.lcard .dots i.g1{background:var(--sun)}.lcard .dots i.g0{background:#FF8FA3}

/* course cards, continue, teacher name button */
.who2{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ctag{font-size:20px;background:var(--pink-soft);border-radius:999px;padding:2px 14px;color:var(--pink)}
.tchip{position:relative;height:52px;min-width:120px;font:700 18px var(--round);color:var(--pink);background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:0 18px;box-shadow:0 4px 0 var(--ink);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;display:grid;place-items:center;transition:background .15s,border-color .15s,box-shadow .15s}
.tchip img{position:absolute;left:50%;top:50%;width:84px;height:84px;border-radius:50%;object-fit:cover;transform:translate(-50%,-50%) scale(.3);opacity:0;transition:all .25s cubic-bezier(.3,1.6,.5,1);pointer-events:none;filter:drop-shadow(0 4px 6px #2B235040);z-index:5}
.tchip.show{background:transparent;border-color:transparent;box-shadow:none}.tchip.show .tn{opacity:0}.tchip.show img{opacity:1;transform:translate(-50%,-50%) scale(1)}
.continue{display:flex;align-items:center;gap:18px;text-decoration:none;background:var(--paper);border:4px solid var(--ink);border-radius:28px;box-shadow:0 7px 0 var(--ink);padding:14px 22px;max-width:520px}
.continue:hover{transform:translateY(-3px)}
.cplay{width:64px;height:64px;flex:none;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:30px;border:4px solid var(--ink)}
.ctext{display:flex;flex-direction:column}.ctext small{color:var(--soft);font-weight:600}.ctext b{font-size:34px;line-height:1.1}
.section{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:700}
.section::after{content:"";flex:1;height:4px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--ink) 0 12px,transparent 12px 22px);opacity:.25}
.ccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.ccard{display:flex;flex-direction:column;text-decoration:none;background:var(--paper);border:4px solid var(--ink);border-radius:30px;box-shadow:0 8px 0 var(--ink);overflow:hidden;transition:transform .2s}
a.ccard:hover{transform:translateY(-5px) rotate(-.6deg)}
.ccard.locked{opacity:.55;filter:grayscale(.6);cursor:not-allowed}
.ccard .band{position:relative;height:140px;display:grid;place-items:center;background:var(--c);background-image:radial-gradient(#ffffff40 2.5px,transparent 3px);background-size:22px 22px;border-bottom:4px solid var(--ink)}
.ccard .tag{position:absolute;top:10px;left:12px;background:var(--sun);border:3px solid var(--ink);border-radius:999px;padding:0 10px;font-size:13px;font-weight:700}
.ccard .tiles{display:flex;gap:8px}
.ccard .tiles span{width:66px;height:66px;border-radius:18px;border:4px solid var(--ink);background:#fff;color:var(--c);display:grid;place-items:center;font-size:42px;box-shadow:0 4px 0 var(--ink)}
.ccard .tiles span.two{font-size:26px;letter-spacing:-.06em}
.cbody{display:flex;flex-direction:column;gap:4px;padding:14px 18px 18px}
.ccard .cjp{color:var(--c);font-size:15px}.ccard .ctitle{font-size:24px;color:var(--ink)}.ccard .cdesc{color:#5B5480;font-size:15px}
.pbar{height:12px;border-radius:999px;background:#EEEAF8;border:2px solid var(--ink);overflow:hidden;margin-top:8px}.pbar i{display:block;height:100%;background:var(--grass)}
.pnum2{font-size:14px;font-weight:700}
.tav{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--line);display:block}
.avform{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.linkbtn.small{font-size:12px;padding:2px 6px}

.demotag{font-weight:700;background:var(--sun,#FFC93C);color:#2B2350;border:2px solid #2B2350;border-radius:999px;padding:2px 12px;font-size:14px}
.ccards+.section{margin-top:36px}
.rtalk{display:flex;flex-direction:column;gap:8px}.rtl{display:flex;gap:12px;align-items:flex-start}.rtl>b{font-size:15px;min-width:118px;padding-top:6px;white-space:nowrap}
.rtl>span{display:flex;flex-wrap:wrap;gap:6px}.rph{border:2px solid var(--ink);border-radius:12px;padding:3px 10px;font-size:15px;white-space:nowrap}
.rph i{font-style:normal}.rph.gx{background:#F7F5FC;border-color:var(--line)}