:root{
  --cream:#fff6e5; --paper:#fffaf0; --peach:#ffd8b1; --orange:#ff8c42; --coral:#ff6b6b;
  --yellow:#ffd166; --tomato:#e85d3f; --ink:#5b3a29; --soft:#8a6a55; --mint:#c9e4b4;
  --radius:22px; --shadow:4px 5px 0 rgba(91,58,41,.9);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Baloo 2","Comic Sans MS",system-ui,sans-serif; color:var(--ink); font-size:17px;
  background:var(--cream);
  background-image:radial-gradient(circle at 20% 10%,#ffe3c2 0 12%,transparent 13%),
                   radial-gradient(circle at 85% 80%,#ffd9cc 0 10%,transparent 11%),
                   radial-gradient(#f6d7b0 1.5px,transparent 1.5px);
  background-size:100% 100%,100% 100%,22px 22px;
  background-attachment:fixed; min-height:100vh;
}
h1,h2,h3,.hand{font-family:"Patrick Hand","Baloo 2",cursive;letter-spacing:.5px}
h1{font-size:2.4rem;margin:.2em 0}
h2{font-size:1.8rem;margin:.2em 0 .5em}
a{color:var(--tomato)}

/* ---------- doodle layer ---------- */
.doodles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.doodles img{position:absolute;opacity:.55;animation:bob 6s ease-in-out infinite}
.doodles img:nth-child(2n){animation-duration:7.5s;animation-delay:-2s}
.doodles img:nth-child(3n){animation-name:spin;animation-duration:9s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(6deg)}}
@keyframes spin{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(10deg) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.doodles img{animation:none}}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  padding:10px 22px;background:var(--orange);border-bottom:4px solid var(--ink)}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;
  font-family:"Patrick Hand",cursive;font-size:1.9rem;text-shadow:2px 2px 0 var(--ink)}
.logo img{width:44px;height:44px}
.nav{display:flex;gap:8px;margin-left:12px}
.nav a{color:var(--ink);background:var(--yellow);text-decoration:none;padding:4px 14px;
  border:3px solid var(--ink);border-radius:999px;font-weight:700}
.nav a.on{background:#fff}
.me{margin-left:auto;position:relative}
.me-btn{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);
  border-radius:999px;padding:4px 14px 4px 4px;cursor:pointer;font:inherit;font-weight:700;color:var(--ink);
  box-shadow:3px 3px 0 var(--ink)}
.me-btn img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);background:var(--peach)}
.crown{font-size:1.1rem}
.me-menu{display:none;position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:3px solid var(--ink);
  border-radius:16px;box-shadow:var(--shadow);min-width:190px;overflow:hidden}
.me-menu.open{display:block}
.me-menu a,.me-menu button{display:block;width:100%;text-align:left;padding:10px 16px;background:none;border:0;
  font:inherit;color:var(--ink);text-decoration:none;cursor:pointer}
.me-menu a:hover,.me-menu button:hover{background:var(--cream)}

/* ---------- layout ---------- */
main{position:relative;z-index:1;max-width:1150px;margin:0 auto;padding:26px 18px 120px}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:26px;align-items:start}
@media (max-width:900px){.grid{grid-template-columns:1fr}.nav{display:none}}
.card{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;position:relative}
.card.tilt{transform:rotate(-.6deg)}
.card .stick{position:absolute;width:74px;top:-34px;right:-14px}
.tape{position:absolute;top:-14px;left:50%;width:110px;height:28px;margin-left:-55px;
  background:rgba(255,209,102,.75);border:2px dashed rgba(91,58,41,.4);transform:rotate(-3deg)}
.muted{color:var(--soft)}
.flash{background:var(--yellow);border:3px solid var(--ink);border-radius:14px;padding:10px 16px;margin-bottom:16px;font-weight:600}

/* ---------- forms ---------- */
label{font-weight:700;display:block;margin:10px 0 4px}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:3px solid var(--ink);
  border-radius:12px;padding:6px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid var(--orange);outline-offset:1px}
.row{display:grid;gap:8px;align-items:center;margin-bottom:8px}
.row.task{grid-template-columns:1fr 72px 122px 38px}
.row.cls{grid-template-columns:1fr 128px 128px 38px}
.row.day{grid-template-columns:1fr 1fr 1fr}
@media (max-width:560px){.row.task,.row.cls{grid-template-columns:1fr 1fr}.row.task input:first-child,.row.cls input:first-child{grid-column:1/-1}}
.btn{font:inherit;font-weight:800;cursor:pointer;border:3px solid var(--ink);border-radius:999px;
  padding:8px 20px;background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .1s}
.btn:hover{transform:translate(-1px,-1px) rotate(-1deg)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.big{font-size:1.3rem;padding:12px 28px;background:var(--coral);color:#fff;text-shadow:1px 1px 0 var(--ink);width:100%}
.btn.small{padding:3px 12px;font-size:.9rem}
.btn.ghost{background:#fff}
.x{width:38px;height:38px;border-radius:50%;border:3px solid var(--ink);background:#ffd6d6;cursor:pointer;font-weight:900;color:var(--ink)}
.section-h{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.section-h h3{margin:0;font-size:1.4rem}
.hint{font-size:.9rem;color:var(--soft);margin:2px 0 8px}

/* ---------- timetable ---------- */
.tt-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tt-head .badge{font-size:.85rem;border:2px solid var(--ink);border-radius:999px;padding:1px 10px;background:var(--mint)}
.tip{background:#fff1c9;border:3px dashed var(--orange);border-radius:16px;padding:10px 14px;margin:12px 0;font-weight:600}
.timeline{list-style:none;margin:0;padding:0}
.ev{display:grid;grid-template-columns:86px 60px 1fr;gap:12px;align-items:center;padding:10px 12px;margin:10px 0;
  border:3px solid var(--ink);border-radius:18px;background:#fff;position:relative;transition:opacity .2s}
.ev:nth-child(odd){transform:rotate(-.4deg)}
.ev:nth-child(even){transform:rotate(.4deg)}
.ev .time{font-family:"Patrick Hand",cursive;font-size:1.15rem;line-height:1.1;text-align:center}
.ev .time b{display:block;font-size:1.45rem}
.ev img{width:56px;height:56px}
.ev .title{font-weight:800;font-size:1.1rem}
.ev .note{font-size:.92rem;color:var(--soft)}
.ev .chk{position:absolute;right:12px;top:50%;margin-top:-14px;width:28px;height:28px;accent-color:var(--orange);cursor:pointer}
.ev.done{opacity:.5}.ev.done .title{text-decoration:line-through wavy var(--coral)}
.ev.now{outline:4px solid var(--orange);outline-offset:3px}
.cat-class{background:#ffe0e6}.cat-homework{background:#fff3c4}.cat-meal{background:#ffe2c6}
.cat-exercise{background:#dff3d0}.cat-chores{background:#e6eefc}.cat-fun{background:#f1e2ff}
.cat-rest{background:#e2f4f4}.cat-task{background:#fff}
.empty{text-align:center;padding:30px 10px}
.empty img{width:150px}
.loading{text-align:center;padding:40px}
.loading img{width:110px;animation:spin 1s ease-in-out infinite}

/* ---------- help chat ---------- */
.help-fab{position:fixed;right:22px;bottom:22px;z-index:30;display:flex;align-items:center;gap:8px;
  font:inherit;font-weight:800;font-size:1.25rem;background:var(--coral);color:#fff;text-shadow:1px 1px 0 var(--ink);
  border:4px solid var(--ink);border-radius:999px;padding:10px 22px 10px 12px;box-shadow:var(--shadow);cursor:pointer;
  animation:bob 3s ease-in-out infinite}
.help-fab img{width:42px;height:42px}
.chat{position:fixed;right:22px;bottom:96px;z-index:31;width:min(400px,calc(100vw - 32px));height:min(560px,calc(100vh - 140px));
  display:none;flex-direction:column;background:var(--paper);border:4px solid var(--ink);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.chat.open{display:flex}
.chat header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--yellow);border-bottom:3px solid var(--ink)}
.chat header img{width:40px}
.chat header b{font-family:"Patrick Hand",cursive;font-size:1.4rem;flex:1}
.chat header button{background:none;border:0;font:inherit;cursor:pointer;color:var(--ink);font-weight:700}
.msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:85%;padding:8px 13px;border:2.5px solid var(--ink);border-radius:18px;white-space:pre-wrap;line-height:1.35}
.msg.user{align-self:flex-end;background:#ffd8b1;border-bottom-right-radius:4px}
.msg.model{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 8px}
.chips button{font:inherit;font-size:.85rem;border:2px solid var(--ink);border-radius:999px;background:#fff;padding:2px 10px;cursor:pointer}
.chat form{display:flex;gap:8px;padding:10px;border-top:3px solid var(--ink);background:#fff}
.chat textarea{resize:none;height:46px}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1}
.login{max-width:400px;width:100%;text-align:center}
.login .hero{width:120px;margin-top:-80px}
.login form{text-align:left}

/* ---------- tables ---------- */
table{width:100%;border-collapse:separate;border-spacing:0 8px}
td,th{padding:8px 10px;text-align:left}
tr.u td{background:#fff;border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink)}
tr.u td:first-child{border-left:2.5px solid var(--ink);border-radius:14px 0 0 14px}
tr.u td:last-child{border-right:2.5px solid var(--ink);border-radius:0 14px 14px 0}
.mini-av{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);vertical-align:middle;background:var(--peach)}
.secret{background:#fff;border:4px dashed var(--coral);border-radius:18px;padding:16px;margin:14px 0;font-size:1.15rem}
.secret code{background:var(--yellow);padding:2px 8px;border-radius:8px;font-size:1.2rem;user-select:all}
.inline{display:inline}