:root{
  --navy:#18364D; --deep:#1B445C; --teal:#1C819F; --pink:#DD406C; --orange:#E99247; --aqua:#D0E0D0;
  --bg:#EEF4F5; --card:#fff; --ink:#18364D; --muted:#6B8190; --line:#E3EAEE;
  --blue-t:#DDF0F8; --green-t:#E6F5EC; --peach-t:#FDEBE3; --pink-t:#FBE3EA; --yellow-t:#FFF3C9;
  --radius:22px; --shadow:0 8px 30px rgba(27,68,92,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:"Heebo","Assistant","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--ink);background:var(--bg);
  background-image:radial-gradient(900px 500px at 85% -10%,rgba(28,129,159,.14),transparent 60%),radial-gradient(700px 400px at 0% 0%,rgba(221,64,108,.07),transparent 60%);
  background-attachment:fixed;min-height:100vh;line-height:1.5;font-size:16px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--teal)}
.boot{height:100vh;display:grid;place-items:center;align-content:center;gap:18px}
.boot img{width:84px}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--teal);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hidden{display:none!important}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{background:var(--card);border-radius:30px;box-shadow:var(--shadow);padding:34px 28px;max-width:420px;width:100%;text-align:center}
.login-card img.banner{width:min(260px,70%);display:block;margin:0 auto 16px;border-radius:0}
.login-card h1{margin:0 0 6px;font-size:26px;color:var(--deep)}
.login-card p{margin:0 0 22px;color:var(--muted)}
.btn{border:0;border-radius:999px;padding:13px 22px;font-weight:600;background:var(--deep);color:#fff;display:inline-flex;align-items:center;gap:10px;justify-content:center;transition:transform .12s,opacity .12s}
.btn:active{transform:scale(.97)}
.btn.google{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 10px rgba(27,68,92,.08);width:100%;padding:14px}
.btn.accent{background:var(--teal)}
.btn.ghost{background:transparent;color:var(--deep);border:1px solid var(--line)}
.btn.danger{background:var(--pink)}
.btn.small{padding:8px 14px;font-size:14px}
.btn[disabled]{opacity:.5;cursor:default}
.err{color:var(--pink);font-size:14px;margin-top:14px;min-height:20px}

/* shell */
.shell{max-width:1240px;margin:0 auto;padding:18px 18px 110px}
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--deep);font-weight:700;font-size:19px;white-space:nowrap}
.brand img{height:42px}
.topbar .spacer{flex:1}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--aqua);border:2px solid #fff;box-shadow:var(--shadow)}
.sidenav{display:none}
.bottomnav{position:fixed;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));z-index:20;display:flex;gap:4px;padding:8px 10px;border-radius:999px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 40px rgba(24,54,77,.18);border:1px solid rgba(255,255,255,.7);max-width:calc(100vw - 24px)}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border-radius:999px;color:var(--muted);text-decoration:none;font-size:11px;min-width:58px;border:0;background:none}
.nav-item svg{width:22px;height:22px}
.nav-item.active{background:var(--deep);color:#fff}
@media(min-width:900px){
  .shell{padding-bottom:40px;display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start}
  .shell .topbar{grid-column:1/-1;margin-bottom:0}
  .bottomnav{display:none}
  .sidenav{display:flex;flex-direction:column;gap:6px;position:sticky;top:18px;background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
  .sidenav .nav-item{flex-direction:row;gap:12px;font-size:15px;padding:12px 14px;border-radius:14px;min-width:0;justify-content:flex-start}
}
.main{min-width:0}
h2.page-title{margin:0 0 4px;font-size:28px;color:var(--deep)}
.sub{color:var(--muted);margin:0 0 18px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.grid-home{display:grid;gap:18px}
@media(min-width:1000px){.grid-home{grid-template-columns:minmax(0,1fr) 380px;align-items:start}}

/* search */
.search{position:relative}
.search input{width:100%;border:1px solid var(--line);background:#fff;border-radius:999px;padding:15px 52px 15px 20px;font-size:16px;outline:none;box-shadow:var(--shadow)}
.search input:focus{border-color:var(--teal)}
.search svg{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:14px;color:var(--ink)}
.chip.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.filters select{flex:1 1 140px;min-width:0;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-size:14px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.stat{border-radius:18px;padding:14px 16px}
.stat b{display:block;font-size:28px;line-height:1.1}
.stat span{font-size:13px;color:var(--muted)}
.stat.s1{background:var(--blue-t)} .stat.s2{background:var(--green-t)} .stat.s3{background:var(--peach-t)}

/* lessons list */
.section-title{display:flex;align-items:center;justify-content:space-between;margin:22px 0 10px}
.section-title h3{margin:0;font-size:19px}
.lesson-list{display:grid;gap:10px}
.lesson-row{display:flex;gap:14px;align-items:center;background:#fff;border-radius:18px;padding:12px;box-shadow:var(--shadow);text-decoration:none;color:inherit;border:0;text-align:right;width:100%}
.thumb{width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg,var(--aqua),var(--blue-t));flex:none;object-fit:cover;display:grid;place-items:center;color:var(--teal)}
.thumb svg{width:26px;height:26px}
.lesson-row .t{font-weight:600;font-size:16px}
.lesson-row .m{font-size:13px;color:var(--muted)}
.tag{display:inline-block;font-size:12px;padding:2px 10px;border-radius:999px;background:var(--blue-t);color:var(--deep);margin-inline-start:6px}
.tag.shared{background:var(--peach-t)}
.empty{text-align:center;color:var(--muted);padding:34px 10px}
.empty svg{width:42px;height:42px;color:var(--aqua);margin-bottom:8px}
.skeleton{height:86px;border-radius:18px;background:linear-gradient(90deg,#fff 25%,#f0f5f7 50%,#fff 75%);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
.more{display:block;margin:14px auto 0}

/* calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-head .ttl{font-weight:700;font-size:17px}
.cal-head .ttl small{font-weight:400;color:var(--muted);display:block;font-size:13px}
.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink)}
.icon-btn svg{width:18px;height:18px}
.cal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;text-align:center}
.cal-dow{font-size:12px;color:var(--muted);padding:6px 0}
.cal-day{aspect-ratio:1/1;border:0;background:none;border-radius:50%;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;color:var(--ink)}
.cal-day.dim{color:#B7C4CC}
.cal-day.today{outline:2px solid var(--teal)}
.cal-day.sel{background:var(--navy);color:#fff}
.cal-day .dots{position:absolute;bottom:5px;display:flex;gap:3px}
.cal-day .dots i{width:5px;height:5px;border-radius:50%;display:block}
.dot-lesson{background:#3CB371}.dot-change{background:var(--pink)}.dot-holiday{background:#E2B100}
.cal-day .hd{font-size:9px;color:var(--muted);line-height:1}
.cal-day.sel .hd{color:#cfe}
.agenda{margin-top:16px;display:grid;gap:10px}
.agenda h4{margin:6px 0 0;font-size:17px}
.ev{border-radius:16px;padding:12px 14px;display:block;text-decoration:none;color:inherit;border:0;text-align:right;width:100%}
.ev .k{font-size:12px;color:var(--muted)}
.ev .n{font-weight:600}
.ev .w{font-size:13px;color:var(--muted)}
.ev.lesson{background:var(--green-t)}.ev.change{background:var(--pink-t)}.ev.holiday{background:var(--yellow-t)}.ev.special{background:var(--blue-t)}.ev.na{background:#EEF1F3;color:var(--muted)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:12px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:8px;height:8px;border-radius:50%}

/* week */
.week-grid{display:grid;gap:12px}
@media(min-width:900px){.week-grid{grid-template-columns:repeat(6,1fr);align-items:start}}
.day-col{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;min-height:140px}
.day-col h4{margin:0 0 2px}
.day-col .hdt{font-size:12px;color:var(--muted);margin-bottom:10px}
.day-col.today{outline:2px solid var(--teal)}
.day-tabs{display:flex;gap:6px;overflow:auto;margin-bottom:12px}
@media(min-width:900px){.day-tabs{display:none}}
.add-slot{width:100%;border:1.5px dashed var(--line);background:none;border-radius:14px;padding:10px;color:var(--muted);margin-top:8px}

/* lesson page */
.lesson-hero{display:grid;gap:16px}
@media(min-width:900px){.lesson-hero{grid-template-columns:260px 1fr}}
.lesson-hero img,.lesson-hero .ph{width:100%;border-radius:20px;aspect-ratio:4/3;object-fit:cover;background:linear-gradient(135deg,var(--aqua),var(--blue-t));display:grid;place-items:center;color:var(--teal)}
.meta-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.part{margin-top:14px;border-radius:18px;padding:16px}
.part.p1{background:var(--blue-t)}.part.p2{background:var(--green-t)}.part.p3{background:var(--peach-t)}
.part h4{margin:0 0 6px}
.part .lbl{font-size:12px;color:var(--muted);margin-top:8px}
.pill{display:inline-block;background:#fff;border-radius:999px;padding:3px 12px;margin:2px 0 2px 6px;font-size:14px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
pre.txt{white-space:pre-wrap;font-family:inherit;margin:0}

/* modal + toast */
.modal-bg{position:fixed;inset:0;background:rgba(24,54,77,.45);display:grid;place-items:center;z-index:50;padding:18px;animation:fade .15s}
.modal{background:#fff;border-radius:24px;padding:24px;max-width:420px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal h3{margin:0 0 8px}
.modal .row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.modal input,.modal select{width:100%;border:1px solid var(--line);border-radius:14px;padding:11px 14px;margin-top:8px}
@keyframes fade{from{opacity:0}}
.toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%,20px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.banner-note{background:var(--yellow-t);border-radius:14px;padding:10px 14px;font-size:14px;margin-bottom:14px}
.list-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line)}
.list-item:last-child{border:0}
.form-row{display:flex;gap:10px;margin-top:12px}
.form-row input{flex:1;border:1px solid var(--line);border-radius:999px;padding:11px 16px}
@media print{
  body{background:#fff}.topbar,.bottomnav,.sidenav,.actions,.toast{display:none!important}
  .shell{display:block;padding:0}.card,.part{box-shadow:none}
}

@media(max-width:999px){
  .grid-home{display:flex;flex-direction:column}
  #left{display:contents}
  #left>.search{order:1}#filters{order:2}#stats{order:3}.grid-home>#cal{order:4}#left>.section-title{order:5}#list{order:6}
  .brand img{height:40px;border-radius:50%}
}
.brand img{border-radius:50%}
.draft{border:1.5px dashed var(--teal)}
.draft-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.btn.small{padding:8px 14px;font-size:14px}
@media(min-width:600px) and (max-width:899px){.lesson-hero{grid-template-columns:240px 1fr;align-items:start}}
.lesson-hero .ph svg{width:30%;height:auto}

/* inline form rows must never overflow on narrow phones */
*,*::before,*::after{box-sizing:border-box}
.form-row{flex-wrap:nowrap;max-width:100%}
.form-row input{min-width:0;width:100%}
.form-row .btn{flex:none}
@media(max-width:420px){.form-row{flex-wrap:wrap}.form-row .btn{flex:1 1 100%}}
.btn.ghost.danger{background:transparent;color:var(--pink);border-color:var(--pink)}
.actions{flex-wrap:wrap}
input,select,textarea{max-width:100%}
.icon-btn.add{background:var(--deep);color:#fff;border-color:var(--deep);font-size:22px;line-height:1}
.cal-head .grp{display:flex;gap:8px;align-items:center}
.ev{--kc:transparent;border-inline-start:5px solid var(--kc);position:relative}
.ev .x{position:absolute;left:8px;top:8px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(255,255,255,.7);color:var(--muted);font-size:16px;line-height:1}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.swatch{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);background:var(--c)}
.swatch.on{box-shadow:0 0 0 3px var(--deep)}
.kgdot{display:inline-block;width:14px;height:14px;border-radius:50%;margin-inline-end:8px;vertical-align:-2px;background:var(--c,#ccc)}
.sheet-btn{display:block;width:100%;margin:8px 0}
.editor label{display:block;margin:12px 0 4px;font-weight:600;font-size:14px}
.editor input,.editor textarea,.editor select{width:100%;border:1px solid var(--line);border-radius:14px;padding:11px 14px;font:inherit;background:#fff}
.editor textarea{min-height:84px}
.editor .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.editor .sec{background:var(--aqua-t,#EAF3F1);border-radius:18px;padding:6px 14px 14px;margin-top:14px}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal label{display:block;margin:10px 0 4px}
.modal input,.modal select{width:100%}
a.btn{text-decoration:none}
.ev{padding-left:38px}
@media(max-width:480px){.day-tabs{gap:4px}.day-tabs .chip{padding:8px 0;flex:1 1 0;min-width:0;text-align:center;font-size:13px}}
.week-grid .ev{padding-left:12px}.week-grid .ev .x{top:6px}.week-grid .ev .k{padding-left:28px}
.trails{display:grid;gap:10px}
.trail{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.trail i{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);margin-top:2px;background:#fff}
.trail.ok{color:var(--ink)}.trail.ok i{background:var(--teal);border-color:var(--teal);box-shadow:inset 0 0 0 3px #fff}
.filters select{width:calc(50% - 4px)!important;flex:none!important}@media(min-width:1000px){.filters select{width:calc(50% - 4px)!important}}
.filters select{box-sizing:border-box}

.search .fbtn{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:var(--blue-t);color:var(--deep);display:grid;place-items:center;font-size:12px}
.search .fbtn svg{position:static;transform:none;width:20px;height:20px;color:var(--deep)}
.search input{padding-left:58px}
.fcount{position:absolute;top:-3px;left:-3px;min-width:18px;height:18px;border-radius:9px;background:var(--pink);color:#fff;font-size:11px;display:none;align-items:center;justify-content:center;padding:0 4px}
.chips.act{margin:10px 0 0}.chip.clr{border-style:dashed;color:var(--muted)}
.sheet-bg{align-items:end;padding:0}
.fsheet{background:#fff;width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;border-radius:28px 28px 0 0;box-shadow:0 -10px 50px rgba(0,0,0,.25);animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.fs-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 8px}.fs-head h3{margin:0}
.fs-body{overflow:auto;padding:4px 24px 12px}.fgroup h4{margin:16px 0 4px;color:var(--deep)}.fgroup .chips{margin:6px 0}
.fs-foot{display:flex;gap:10px;padding:14px 24px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}.fs-foot .btn:last-child{flex:1}
@media(min-width:700px){.sheet-bg{align-items:center;padding:18px}.fsheet{border-radius:26px}}
.fwide{background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 18px 14px;margin-top:12px;box-shadow:var(--shadow)}
.fwide .fgroup{display:flex;gap:12px;align-items:flex-start}.fwide .fgroup h4{margin:12px 0 0;min-width:44px;line-height:34px;font-size:14px}.fwide .fgroup .chips{margin:8px 0 0}
@media(min-width:1000px){.search .fbtn{display:none}.search input{padding-left:20px}}
.cal-day{aspect-ratio:auto;height:56px;max-width:64px;width:100%;margin:0 auto}