:root{--bg:#fff6fb;--card:#fff;--ink:#2b1d4a;--mut:#6b5a86;--teal:#14c3b4;--pink:#ff4fa3;--purple:#8b5cf6;--sun:#ffd23f;--mint:#b8f2e6;--lav:#e4d7ff;--peach:#ffd6c9;--line:#2b1d4a}
*{box-sizing:border-box}
body{margin:0;font-family:"Nunito",system-ui,sans-serif;background:var(--bg);color:var(--ink);padding-bottom:96px;position:relative;min-height:100vh}
.memphis{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;background-image:
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cpath d='M20 40q15-20 30 0t30 0 30 0' fill='none' stroke='%2314c3b4' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='200' cy='50' r='12' fill='%23ffd23f'/%3E%3Cpath d='M150 170l20-30 20 30z' fill='%23ff4fa3'/%3E%3Crect x='40' y='180' width='22' height='22' rx='3' fill='none' stroke='%238b5cf6' stroke-width='5' transform='rotate(20 51 191)'/%3E%3Cpath d='M210 210q10-15 20 0t20 0' fill='none' stroke='%23ff4fa3' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='110' cy='110' r='5' fill='%238b5cf6'/%3E%3Ccircle cx='240' cy='130' r='6' fill='none' stroke='%2314c3b4' stroke-width='4'/%3E%3Cpath d='M95 230h24M107 218v24' stroke='%23ffd23f' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E")}
h1,h2,h3,.dh,#label,.fab{font-family:"Righteous","Nunito",sans-serif;font-weight:400;letter-spacing:.3px}
header{text-align:center;padding:22px 12px 8px}
h1{margin:0;font-size:clamp(1.6rem,6vw,2.6rem);color:var(--purple);text-shadow:3px 3px 0 var(--sun),6px 6px 0 var(--pink)}
.sub{margin:10px auto 0;color:var(--ink);display:inline-block;background:var(--mint);border:2px solid var(--line);border-radius:999px;padding:4px 14px;font-weight:700;font-size:.9rem}
.bar{position:sticky;top:0;z-index:5;padding:10px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;background:rgba(255,246,251,.92);backdrop-filter:blur(6px);border-bottom:3px solid var(--line)}
button{font:inherit;font-weight:800;border:2.5px solid var(--line);border-radius:14px;padding:7px 14px;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--line);transition:transform .08s,box-shadow .08s}
button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line)}button:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--line)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}.tabs button.on{background:var(--pink);color:#fff}
.navd{display:flex;gap:6px;align-items:center}#label{min-width:150px;text-align:center;font-size:1.1rem;color:var(--purple)}
main{max-width:1000px;margin:auto;padding:12px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.dow{font-family:Righteous;text-align:center;color:var(--purple)}
.day{background:var(--card);border:2.5px solid var(--line);border-radius:14px;min-height:88px;padding:5px;font-size:.75rem;cursor:pointer;overflow:hidden;box-shadow:3px 3px 0 var(--lav)}
.day:nth-child(7n+1),.day:nth-child(7n){background:#fffbe6}
.day.other{opacity:.4}.day.today{background:var(--mint);box-shadow:3px 3px 0 var(--teal)}
.dn{font-weight:800}
.chip{display:block;background:var(--sun);border:1.5px solid var(--line);border-radius:8px;padding:1px 5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.chip:nth-of-type(3n+2){background:var(--peach)}.chip:nth-of-type(3n){background:var(--lav)}.chip.mine{background:var(--teal);color:#fff}
.card{background:var(--card);border:3px solid var(--line);border-radius:20px;padding:14px 16px;margin:12px 0;box-shadow:6px 6px 0 var(--purple);cursor:pointer;position:relative;transition:transform .1s}
.card:nth-of-type(4n+1){box-shadow:6px 6px 0 var(--pink)}.card:nth-of-type(4n+2){box-shadow:6px 6px 0 var(--teal)}.card:nth-of-type(4n+3){box-shadow:6px 6px 0 var(--sun)}
.card:hover{transform:translate(-2px,-2px)}.card.mine::after{content:"yours ★";position:absolute;top:-12px;right:14px;background:var(--teal);color:#fff;border:2px solid var(--line);border-radius:999px;padding:0 10px;font-size:.75rem;font-weight:800}
.card h3{margin:0 0 6px;font-size:1.15rem}.meta{color:var(--mut);font-size:.9rem;margin:2px 0}
.dh{display:inline-block;margin:18px 0 0;background:var(--sun);border:2.5px solid var(--line);border-radius:12px;padding:3px 12px;transform:rotate(-1.5deg);box-shadow:3px 3px 0 var(--line)}
.fab{position:fixed;right:16px;bottom:16px;background:var(--pink);color:#fff;font-size:1.1rem;padding:14px 22px;border-radius:18px;box-shadow:5px 5px 0 var(--line);z-index:6}
dialog{border:3px solid var(--line);border-radius:24px;padding:0;width:min(560px,94vw);max-height:90vh;background:var(--card);color:var(--ink);box-shadow:8px 8px 0 var(--purple)}
dialog::backdrop{background:rgba(43,29,74,.55)}
#dlgBody{padding:20px;background:linear-gradient(var(--card),var(--card)) padding-box}
#dlgBody>h2:first-child{color:var(--purple)}
label{display:block;margin:10px 0 3px;font-weight:800;font-size:.9rem}
input,textarea{width:100%;font:inherit;padding:10px;border:2.5px solid var(--line);border-radius:12px;background:#fff;outline:none}
input:focus,textarea:focus{box-shadow:3px 3px 0 var(--teal)}textarea{min-height:80px}
.row{display:flex;gap:10px}.row>*{flex:1}.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.pri{background:var(--pink);color:#fff}.grn{background:var(--teal);color:#fff}.danger{color:#d61f69}button.danger{background:#ffe3ef}
.rs{background:var(--lav);border:2px solid var(--line);border-radius:12px;padding:6px 10px;margin:6px 0;display:flex;justify-content:space-between;align-items:center}
footer{text-align:center;color:var(--mut);font-size:.88rem;padding:24px}a{color:var(--purple);font-weight:800}
.pass{text-align:center}.pass .emoji{font-size:3.4rem;display:inline-block;animation:wig 2s ease-in-out infinite}
.pass h2{color:var(--purple);text-shadow:2px 2px 0 var(--sun)}
.pass .confetti{height:16px;margin:-20px -20px 14px;background:repeating-linear-gradient(90deg,var(--pink) 0 20px,var(--sun) 20px 40px,var(--teal) 40px 60px,var(--purple) 60px 80px);border-bottom:3px solid var(--line)}
@keyframes wig{50%{transform:rotate(12deg) scale(1.08)}}
.wk .day{min-height:auto}.wk .chip{white-space:normal}
@media(max-width:600px){.day{min-height:54px;border-radius:10px;padding:3px}.chip{font-size:0;height:8px;padding:0}.wk .chip{font-size:.8rem;height:auto;padding:2px 5px}.wk.grid{grid-template-columns:1fr}#label{min-width:100px;font-size:1rem}.bar{justify-content:center}button{padding:6px 11px}}

a.btn{display:inline-block;text-decoration:none;font-weight:800;border:2.5px solid var(--line);border-radius:14px;padding:7px 14px;background:var(--card);color:var(--ink);box-shadow:3px 3px 0 var(--line)}a.btn.pri{background:var(--pink);color:#fff}a.btn.grn{background:var(--teal);color:#fff}a.btn:active{transform:translate(3px,3px);box-shadow:none}

.opt{display:flex;width:100%;position:relative;overflow:hidden;margin-top:8px;text-align:left;padding:10px 12px;box-shadow:3px 3px 0 var(--lav)}.opt .fill{position:absolute;left:0;top:0;bottom:0;background:var(--mint);z-index:0;transition:width .3s}
.opt .ol,.opt .oc{position:relative;z-index:1}.opt .ol{flex:1}.opt .oc{font-family:Righteous}.opt.on{border-color:var(--pink);box-shadow:3px 3px 0 var(--pink)}.opt.on .fill{background:#ffc6e2}
.names{font-size:.8rem;color:var(--mut);margin:3px 4px 0}
.inout{display:flex;gap:8px;flex-wrap:wrap}.io.on.io-yes{background:var(--teal);color:#fff}.io.on.io-maybe{background:var(--sun)}.io.on.io-no{background:#ffc6e2}
.sugtop{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}.heart{flex:none;font-size:1rem;border-radius:999px}.heart.on{background:#ffe3ef;border-color:var(--pink)}
.comments{margin-top:10px;border-top:2px dashed var(--lav);padding-top:8px}.cm{font-size:.9rem;margin:4px 0}.cf{display:flex;gap:6px;margin-top:6px}.cf input{padding:7px}

/* Trip ideas: school bus cards */
.card.bus{background:#ffc928;border:3px solid var(--line);border-radius:22px 70px 18px 22px;padding:58px 64px 22px 18px;margin:18px 6px 36px 0;box-shadow:6px 6px 0 var(--line)!important;overflow:visible}
.card.bus::before{content:"";position:absolute;left:0;right:0;bottom:34px;height:6px;background:var(--line);opacity:.85;pointer-events:none}
.card.bus .bus-win{position:absolute;top:10px;left:14px;right:70px;display:flex;gap:7px;pointer-events:none}
.card.bus .bus-win i{flex:1;max-width:46px;height:32px;background:linear-gradient(160deg,#dff6ff 55%,#a9e3f5 55%);border:2.5px solid var(--line);border-radius:8px}
.card.bus::after{content:"";position:absolute;top:10px;right:18px;width:40px;height:34px;background:linear-gradient(160deg,#dff6ff 55%,#a9e3f5 55%);border:2.5px solid var(--line);border-radius:6px 30px 6px 6px;pointer-events:none}
.card.bus .bus-light{position:absolute;right:-4px;bottom:46px;width:16px;height:16px;border-radius:50%;background:#fff6b0;border:2.5px solid var(--line);box-shadow:0 0 0 4px rgba(255,246,176,.6)}
.card.bus .bus-stop{position:absolute;left:-14px;top:50px;width:34px;height:34px;background:#e8283c;color:#fff;font:800 .55rem/34px "Nunito",sans-serif;text-align:center;border:2.5px solid var(--line);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.card.bus .bus-wheel{position:absolute;bottom:-22px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#cfd3da 0 7px,var(--line) 8px 12px,#222 13px);border:3px solid var(--line);pointer-events:none}
.card.bus .bus-wheel.l{left:34px}.card.bus .bus-wheel.r{right:54px}
.card.bus h3{position:relative;z-index:1;margin-bottom:8px;padding-left:12px}
.card.bus .meta{color:var(--ink);position:relative;z-index:1;padding-left:12px}
.card.bus .acts{position:relative;z-index:2;margin:14px 0 26px;padding-left:12px}
.card.bus .acts a.btn{background:var(--pink);color:#fff}
.card.bus:hover,.card.bus:focus-within{transform:translate(-2px,-2px);outline:4px solid var(--pink);outline-offset:4px}
.card.bus:hover .bus-wheel,.card.bus:focus-within .bus-wheel{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:600px){.card.bus{padding-right:24px}.card.bus .bus-win{right:66px;gap:5px}}

/* Lesson plans */
.chip.lesson{background:var(--mint)!important;border-style:dashed}
.card.lesson{background:#f4fffc;box-shadow:6px 6px 0 var(--teal)!important}.card.lesson.joined{background:#e6fff8;outline:3px solid var(--teal);outline-offset:3px}
.card.lesson:hover{outline:3px solid var(--pink);outline-offset:3px}
.subj{display:inline-block;background:var(--lav);border:2px solid var(--line);border-radius:999px;padding:0 10px;font-weight:800;font-size:.78rem;margin-bottom:6px}
.spots{display:inline-block;margin-top:8px;background:var(--sun);border:2px solid var(--line);border-radius:10px;padding:2px 10px;font-weight:800;font-size:.85rem}.spots.full{background:#ffc6e2}.spots.big{font-size:1rem;margin-top:14px}
.lessonhead{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.rs.me{background:var(--mint);border-color:var(--teal)}.joinedmsg{background:var(--mint);border:2.5px solid var(--line);border-radius:12px;padding:8px 12px;font-weight:800}

/* Month view: clean calendar grid */
.mgrid{gap:0;background:var(--card);border:3px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:5px 5px 0 var(--pink)}
.mgrid .dow{font-family:"Righteous",sans-serif;font-size:.8rem;padding:7px 0;background:var(--sun);border-bottom:2.5px solid var(--line);color:var(--ink)}
.mgrid .day{border:0;border-radius:0;box-shadow:none;border-right:1px solid #e6dcef;border-bottom:1px solid #e6dcef;min-height:96px;height:96px;padding:4px 3px;background:var(--card);display:flex;flex-direction:column;gap:2px}
.mgrid .day:nth-child(7n){border-right:0}.mgrid .day:nth-child(7n+1),.mgrid .day:nth-child(7n){background:#fffcf0}
.mgrid .day.other{opacity:1;background:#faf7fc}.mgrid .day.other .dn{color:#b9aecb}.mgrid .day.other .chip{opacity:.5}
.mgrid .dn{text-align:center;font-weight:800;font-size:.95rem;line-height:1}.mgrid .dn span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%}
.mgrid .day.today{background:var(--card);box-shadow:none}.mgrid .day.today .dn span{background:var(--pink);color:#fff;border:2px solid var(--line)}
.mgrid .day.sel{background:var(--mint)!important;box-shadow:inset 0 0 0 3px var(--teal)}
.mgrid .chip{margin:0;font-size:.68rem;line-height:1.35;padding:1px 4px;border-radius:6px;border:1.5px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:auto;background:var(--sun);color:var(--ink)}
.mgrid .chip:nth-of-type(3n+2){background:var(--peach)}.mgrid .chip:nth-of-type(3n){background:var(--lav)}
.mgrid .chip.mine{background:var(--teal)!important;color:#fff}.mgrid .chip.lesson{background:var(--mint)!important;border-style:solid;border-color:var(--teal)}
.mgrid .more{font-size:.66rem;font-weight:800;color:var(--purple);padding-left:3px}
@media(max-width:600px){.mgrid .day{min-height:84px;height:84px;padding:3px 2px}.mgrid .chip{font-size:.6rem;height:auto;padding:0 3px}.mgrid .dn span{width:24px;height:24px;font-size:.85rem}}
.navd #prev,.navd #next{font-size:1.3rem;line-height:1;padding:4px 14px}
.chip i.ct{font-style:normal}@media(max-width:600px){.mgrid .chip i.ct{display:none}}
