:root{
 --bg:#f7f9fc;--surface:#fff;--surface2:#edf3fb;--text:#1d2736;--muted:#66758a;--line:#dce4ef;
 --blue:#1769d2;--blue-deep:#1257b4;--blue-soft:#e5f0ff;--blue-pale:#f0f6ff;--shadow:0 2px 8px rgba(34,66,110,.08),0 12px 28px rgba(34,66,110,.05);
 --radius:18px;--font:Inter,"Noto Sans JP","Yu Gothic UI",Meiryo,system-ui,sans-serif
}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 var(--font);transition:background .2s,color .2s}a{color:var(--blue);text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}::selection{background:#c9e0ff}
.sidebar{position:fixed;z-index:12;inset:0 auto 0 0;width:264px;background:var(--surface);border-right:1px solid var(--line);padding:25px 16px 18px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);padding:0 12px 32px}.brandmark{width:43px;height:43px;border-radius:15px;background:var(--blue);color:white;display:grid;place-items:center;font-size:24px;font-weight:800;box-shadow:0 4px 10px #1769d233}.brand b{display:block;font-size:17px;font-weight:750;letter-spacing:-.45px}.brand small{display:block;color:#8290a3;font-size:9px;letter-spacing:1.7px;margin-top:1px}
.sidebar nav{display:grid;gap:7px}.navitem{height:48px;display:flex;align-items:center;gap:16px;padding:0 18px;border:0;border-radius:0 28px 28px 0;background:transparent;color:#526176;text-align:left;font-weight:650;transition:background .16s,color .16s;margin-right:2px}.navitem span{width:20px;text-align:center;font-size:19px}.navitem:hover{background:#f0f5fc;color:var(--blue)}.navitem.active{background:var(--blue-soft);color:var(--blue)}.sidebottom{margin-top:auto;padding:18px 13px 8px;color:var(--muted)}.sidehint{font-size:12px;margin-bottom:8px}.sidebottom small{font-size:9px;letter-spacing:1.4px;color:#9aa7b8}
.app{min-height:100vh;margin-left:264px}.topbar{height:72px;position:sticky;top:0;z-index:8;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,4vw,62px)}.crumb{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:650}.backcrumb{border:0;background:transparent;color:var(--blue);font-weight:700;padding:7px}.topactions,#account{display:flex;align-items:center;gap:12px}.iconbtn{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:white;color:#526176;font-size:18px}.textlink{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:650}.solidbtn,.outlinebtn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 19px;border-radius:24px;font-size:13px;font-weight:700;text-decoration:none;transition:background .16s,transform .16s,box-shadow .16s}.solidbtn{border:1px solid var(--blue);background:var(--blue);color:#fff;box-shadow:0 2px 5px #1769d222}.solidbtn:hover{background:var(--blue-deep);box-shadow:0 5px 13px #1769d233;transform:translateY(-1px)}.outlinebtn{border:1px solid #b8c9df;background:var(--surface);color:var(--blue)}.outlinebtn:hover{background:var(--blue-pale);border-color:#83a9d8}.plainbtn{border:0;background:transparent;color:var(--blue);font-weight:700;font-size:12px;padding:8px}.full{width:100%;margin-top:8px}.view{width:min(1450px,100%);margin:0 auto;padding:34px clamp(22px,4vw,62px) 72px}
.welcome{min-height:238px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;overflow:hidden;margin:0 0 38px;padding:35px 42px;background:#eaf3ff;border:1px solid #d5e5fa;border-radius:24px;animation:rise .35s ease both}.welcome h1{font-size:clamp(24px,3vw,32px);letter-spacing:-.8px;line-height:1.3;margin:10px 0}.welcome p,.pageintro p{color:#536982;line-height:1.8;margin:0}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.55px;color:var(--blue)}.welcomeactions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}.welcomeart{width:220px;height:165px;position:relative;flex:none}.artcircle{position:absolute;border-radius:50%}.c1{width:155px;height:155px;right:25px;top:0;background:#c5ddff}.c2{width:86px;height:86px;right:0;bottom:0;background:#a8caff}.artpaper{position:absolute;right:58px;top:14px;width:105px;height:132px;border-radius:14px;background:white;box-shadow:0 9px 25px #315e9b25;display:grid;place-items:center;font-size:39px;color:var(--blue);transform:rotate(5deg)}.artpaper small{font-size:9px;letter-spacing:1.5px;text-align:center;color:#8194ac;line-height:1.5}
.sectionhead,.pageintro{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 20px}.sectionhead h2,.pageintro h1{font-size:21px;letter-spacing:-.4px;margin:0 0 4px}.sectionhead p{font-size:12px;color:var(--muted);margin:0}.pageintro{margin:8px 0 26px}.pageintro h1{font-size:28px;margin:7px 0}.classgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:20px}.classcard{min-width:0;overflow:hidden;border:1px solid #dce4ef;border-radius:17px;background:var(--surface);box-shadow:0 1px 3px #28466b0a;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;animation:rise .28s ease both}.classcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#b5cce9}.classcover{height:112px;position:relative;background:linear-gradient(110deg,#1769d2,#5c9de9);background-size:cover;background-position:center}.classbadge{position:absolute;left:18px;bottom:-24px}.classicon{width:54px;height:54px;object-fit:cover;border-radius:15px;border:3px solid white;background:#fff;box-shadow:0 2px 7px #1b3d6822}.classicon.placeholder{display:grid;place-items:center;color:var(--blue);font-size:23px;font-weight:800}.classbody{padding:32px 18px 17px}.classbody h3{font-size:16px;line-height:1.4;margin:0 0 7px}.classbody p{min-height:38px;color:var(--muted);font-size:12px;line-height:1.65;margin:0 0 16px}.classmeta{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #edf1f6;padding-top:12px;color:#738197;font-size:11px}.classmeta span:last-child{color:var(--blue);font-weight:700}
.empty{grid-column:1/-1;padding:48px 20px;text-align:center;border:1px dashed #b9cce4;border-radius:18px;background:#fff;color:var(--muted);line-height:1.8}.empty b{display:block;color:var(--text);font-size:15px}.empty p{font-size:12px;margin:5px 0 15px}.emptyicon{font-size:31px;color:#6e9edb;margin-bottom:9px}
/* Classroom class page */
.classhero{min-height:225px;display:flex;align-items:flex-end;padding:30px 34px;color:#fff;border-radius:20px;overflow:hidden;position:relative;background:linear-gradient(110deg,#1559ad 0%,#2879d1 62%,#75a9e4 100%);background-size:cover;background-position:center;box-shadow:0 3px 12px #194f9222;animation:rise .3s ease both}.classhero:after{content:"";position:absolute;width:260px;height:260px;border:1px solid #ffffff33;border-radius:50%;right:8%;top:-110px;box-shadow:0 0 0 28px #ffffff0c,0 0 0 58px #ffffff09}.classherotext{position:relative;z-index:1;max-width:780px}.classherotext .eyebrow{color:#d8eaff}.classherotext h1{font-size:30px;line-height:1.25;margin:8px 0}.classherotext p{color:#e5f1ff;margin:0;font-size:13px}.hero-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:17px;color:#e3efff;font-size:12px}.classnav{display:flex;gap:24px;border-bottom:1px solid var(--line);margin:13px 0 24px;overflow-x:auto}.classnav button{position:relative;flex:none;padding:15px 5px 13px;border:0;border-bottom:3px solid transparent;background:transparent;color:#65758a;font-size:13px;font-weight:700;white-space:nowrap}.classnav button.selected{color:var(--blue);border-bottom-color:var(--blue)}.classpanel{animation:fade .18s ease}.streamlayout,.worklayout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px;align-items:start}.streammain{min-width:0}.composer,.postcard,.sidecard,.settingscard,.assignmentcard{padding:19px;margin-bottom:15px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 4px #243f6208}.composerhead,.posthead{display:flex;align-items:center;gap:11px;margin-bottom:14px}.composerhead b,.posthead b{font-size:13px}.avatar{width:36px;height:36px;object-fit:cover;border-radius:50%;background:#e4edf8;flex:none}.composer input:not([type=file]),.composer textarea,.settingscard input:not([type=file]),.settingscard textarea,.dialog input:not([type=file]),.dialog textarea,.authbox input{display:block;width:100%;padding:12px 14px;margin:7px 0 12px;border:1px solid #d5dfeb;border-radius:10px;background:#fbfdff;color:var(--text);outline:none;font-size:13px}.composer input:focus,.composer textarea:focus,.dialog input:focus,.dialog textarea:focus,.settingscard input:focus,.settingscard textarea:focus{border-color:#6ea4e8;box-shadow:0 0 0 3px #1769d21a}.composer textarea,.dialog textarea,.settingscard textarea{min-height:92px;resize:vertical}.composerfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px}.streamtitle{display:flex;justify-content:space-between;align-items:center;margin:25px 2px 12px}.streamtitle h2{font-size:18px;margin:0}.posthead small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.postcard h3,.assignmentbody h3{font-size:15px;margin:11px 0 6px}.postcard p,.assignmentbody p{white-space:pre-wrap;line-height:1.8;color:var(--text);font-size:13px}.postimage{display:block;max-width:100%;max-height:440px;object-fit:contain;border-radius:12px;margin:13px 0 0;border:1px solid var(--line)}.sidecard h3{font-size:14px;margin:0 0 13px}.sidecard p{color:var(--muted);font-size:12px;margin:0 0 9px}.joincode{padding:13px;text-align:center;margin:0 0 10px;border-radius:12px;background:var(--blue-soft);color:var(--blue);font:750 22px ui-monospace,monospace;letter-spacing:3px}.membermini>div{display:flex;align-items:center;gap:9px;margin:10px 0;font-size:12px}.membermini .avatar{width:29px;height:29px}.membermini small{color:var(--blue);margin-left:5px}.assignmentcard{display:flex;gap:14px}.assignmenticon{width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:13px;background:var(--blue-soft);color:var(--blue);font-size:21px}.assignmentbody{min-width:0;flex:1}.assignmentbody h3{margin:1px 0 5px}.assignmentbody small{color:var(--muted);font-size:11px}.peoplehead{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 22px}.peoplehead h2{font-size:22px;margin:5px 0}.peoplehead p{margin:0;color:var(--muted);font-size:12px}.peoplecount{width:70px;height:70px;display:grid;place-content:center;text-align:center;border-radius:22px;background:var(--blue-soft);color:var(--blue)}.peoplecount strong{font-size:24px;line-height:1}.peoplecount span{font-size:10px}.people-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px}.membersearch{display:flex;align-items:center;gap:8px;width:min(360px,100%);height:42px;padding:0 13px;border:1px solid var(--line);border-radius:24px;background:white;color:var(--muted)}.membersearch span{font-size:20px}.membersearch input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:12px}.peoplegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:12px}.personcard{display:flex;align-items:center;gap:12px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .16s,box-shadow .16s}.personcard:hover{border-color:#b5cce9;box-shadow:0 3px 10px #28466b0b}.personcard[hidden]{display:none}.personavatar{width:44px;height:44px;flex:none;object-fit:cover;border-radius:50%;background:#e6effb}.personfallback{display:grid;place-items:center;color:var(--blue);font-weight:800;font-size:17px}.personinfo{min-width:0}.personinfo b,.personinfo small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.personinfo b{font-size:13px}.personinfo small{margin-top:3px;color:var(--muted);font-size:10px}.rolepill{flex:none;margin-left:auto;padding:5px 10px;border-radius:20px;background:var(--blue-soft);color:var(--blue);font-size:10px;font-weight:700}.rolepill.teacher{background:#e8f1ff;color:#1457a8}
.settingscard{max-width:820px}.settingscard h2{font-size:21px}.settingscard label,.dialog label,.authbox label{display:block;margin:13px 0;color:var(--muted);font-size:12px;font-weight:650}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px}.urlcopy{display:flex;align-items:center;gap:10px;overflow:hidden;padding:11px;border-radius:11px;background:var(--surface2)}.urlcopy code{flex:1;overflow-wrap:anywhere;font-size:11px}.settingscard hr{border:0;border-top:1px solid var(--line);margin:25px 0}
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:18px;background:#152b4777;backdrop-filter:blur(5px);animation:fade .15s}.modal.hidden{display:none}.dialog{position:relative;width:min(590px,100%);max-height:90vh;overflow:auto;padding:30px;background:var(--surface);border-radius:22px;box-shadow:0 20px 70px #102e5540;animation:pop .18s}.dialog h2{font-size:22px;margin:8px 0}.dialogclose{position:absolute;right:17px;top:12px;width:35px;height:35px;border:0;border-radius:50%;background:var(--surface2);color:var(--muted);font-size:23px}.dialogactions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.muted{color:var(--muted)}.small{font-size:11px}.toast{position:fixed;z-index:40;bottom:25px;left:50%;max-width:min(90vw,520px);transform:translate(-50%,15px);padding:12px 19px;border-radius:24px;background:#24364f;color:white;font-size:13px;opacity:0;pointer-events:none;transition:.2s;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}.userchip{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:650}.userchip .avatar{width:32px;height:32px}.mobilemenu{display:none}
.authpage{min-height:100vh;display:grid;place-items:center;padding:22px;background:linear-gradient(145deg,#f2f7ff,#fff 60%,#eaf3ff)}.authbox{width:min(470px,100%);padding:36px;background:white;border:1px solid #dce6f3;border-radius:22px;box-shadow:var(--shadow)}.authbox .brand{padding:0 0 30px}.authbox h1{font-size:26px;margin:8px 0}.authbox label{display:block}.authbox .full{width:100%;margin-top:12px}.error{color:#bd3030;font-size:12px}.authbox a{font-size:12px}
.dark{--bg:#111c2b;--surface:#19283b;--surface2:#243750;--text:#e7effa;--muted:#a6b7cc;--line:#344a64;--blue:#80b6ff;--blue-deep:#5b9ae9;--blue-soft:#263f60;--blue-pale:#1d314b;--shadow:0 8px 26px #0004}.dark .topbar{background:rgba(25,40,59,.94)}.dark .welcome{background:#203a5a;border-color:#34577f}.dark .welcome p,.dark .pageintro p{color:#c0d1e5}.dark .artpaper,.dark .empty,.dark .membersearch,.dark .authbox{background:var(--surface)}.dark .classcover{filter:saturate(.85)}.dark .composer input:not([type=file]),.dark .composer textarea,.dark .settingscard input:not([type=file]),.dark .settingscard textarea,.dark .dialog input:not([type=file]),.dark .dialog textarea,.dark .authbox input{background:#142237;border-color:var(--line);color:var(--text)}.dark .navitem{color:#afc0d4}.dark .navitem.active{background:#263f60;color:#9dc6ff}.dark .classmeta{border-color:var(--line)}.dark .personcard,.dark .classcard,.dark .postcard,.dark .composer,.dark .sidecard,.dark .settingscard,.dark .assignmentcard{border-color:var(--line)}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes pop{from{opacity:0;transform:scale(.98) translateY(7px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:980px){.sidebar{width:230px}.app{margin-left:230px}.streamlayout,.worklayout{grid-template-columns:minmax(0,1fr) 250px}.view{padding-left:28px;padding-right:28px}}
@media(max-width:760px){.sidebar{width:275px;transform:translateX(-105%);transition:transform .22s;box-shadow:var(--shadow)}.navopen .sidebar{transform:translateX(0)}.app{margin-left:0}.mobilemenu{display:block;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--text);font-size:20px}.topbar{height:64px;padding:0 14px}.view{padding:22px 16px 55px}.welcome{min-height:0;padding:25px 22px}.welcome h1{font-size:24px}.welcomeart{width:112px;height:112px;opacity:.8}.artpaper{right:15px;top:0;transform:scale(.7) rotate(5deg)}.c1{width:105px;height:105px;right:0}.c2{width:55px;height:55px}.pageintro{align-items:flex-start;flex-direction:column}.pageintro .welcomeactions{margin-top:0}.classgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.classhero{min-height:190px;padding:23px}.classherotext h1{font-size:24px}.streamlayout,.worklayout{grid-template-columns:1fr}.classside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sidecard{margin:0}.twocol{grid-template-columns:1fr}.topactions{gap:6px}#account{gap:7px}.userchip span{display:none}.people-toolbar{align-items:flex-start;flex-direction:column}.peoplegrid{grid-template-columns:1fr 1fr}.dialog{padding:25px 20px}.authbox{padding:27px 22px}}
@media(max-width:480px){.welcome{align-items:flex-start}.welcomeart{position:absolute;right:0;bottom:0;opacity:.45}.welcome>div:first-child{position:relative;z-index:1}.welcomeactions{gap:8px}.welcomeactions .solidbtn,.welcomeactions .outlinebtn{padding:9px 13px}.classside,.peoplegrid{grid-template-columns:1fr}.sectionhead{align-items:flex-start}.classnav{gap:18px}.peoplehead h2{font-size:19px}.dialogactions{flex-wrap:wrap}.topbar .crumb{font-size:12px}}

/* Class management and member actions */
.postauthor{min-width:0;flex:1}.iconbtn.danger{width:auto;height:32px;min-width:48px;padding:0 12px;border:1px solid #f0c7c7;border-radius:18px;background:#fff7f7;color:#b42318;font-size:11px;font-weight:700}.iconbtn.danger:hover,.dangerbtn:hover{background:#feecec;border-color:#e7a5a5}.assignmenttop{display:flex;align-items:center;justify-content:space-between;gap:12px}.assignmenttop h3{min-width:0}.personcard .iconbtn.danger{margin-left:4px}.dangerzone{padding:16px;border:1px solid #f0caca;border-radius:14px;background:#fffafa}.dangerzone h3{margin:0 0 6px;color:#a52a2a}.dangerzone p{font-size:12px;line-height:1.7}.dangerbtn{min-height:40px;padding:9px 17px;border:1px solid #d64a4a;border-radius:22px;background:#fff;color:#b42318;font-size:12px;font-weight:750}.leavebtn{min-height:38px;padding:8px 12px;border:1px solid #d9a6a6;border-radius:20px;background:#fff;color:#a52a2a;font-size:12px;font-weight:700}.leavebtn:hover{background:#fff3f3}.dark .iconbtn.danger,.dark .dangerzone,.dark .leavebtn{background:#35252b;border-color:#70434b;color:#ffb7b7}.dark .dangerzone h3{color:#ffb7b7}.dark .dangerbtn{background:#35252b;color:#ffb7b7;border-color:#70434b}.composer .post-body-label textarea{margin-top:7px}
.postcard .post-title{font-size:18px;line-height:1.5;letter-spacing:-.25px;margin:17px 0 9px;padding-bottom:11px;border-bottom:1px solid var(--line);font-weight:750;color:var(--text)}
.postcard .post-title.post-no-title{color:var(--muted);font-size:14px;font-weight:600}
.leaveclass-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding:14px 0 0;border-top:1px solid var(--line)}
.leaveclass-wrap>div{min-width:0;display:flex;flex-direction:column;gap:3px}
.leaveclass-wrap b{font-size:12px;color:var(--text)}
.leaveclass-wrap small{font-size:10px;line-height:1.5;color:var(--muted)}
.leavebtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;min-height:38px;padding:8px 14px;border:1px solid #e2b8b8;border-radius:11px;background:#fff;color:#a33b3b;font-size:11px;font-weight:750;box-shadow:0 1px 2px #6e25220a;transition:background .16s,border-color .16s,transform .16s,box-shadow .16s}
.leavebtn span{font-size:15px;line-height:1}
.leavebtn:hover{background:#fff3f3;border-color:#d99191;box-shadow:0 3px 9px #8d343414;transform:translateY(-1px)}
.leavebtn:focus-visible{outline:3px solid #dca5a5;outline-offset:2px}.dark .leaveclass-wrap{border-color:var(--line)}
.dark .leavebtn{background:#30232a;border-color:#70434b;color:#ffb7b7}
.dark .leavebtn:hover{background:#432b33;border-color:#9a5964}
@media(max-width:480px){.leaveclass-wrap{align-items:flex-start;flex-direction:column}.leavebtn{width:100%}}