/* The navigation uses the same ink, moss and warm paper as the learning lobby. */
body{--navigation-width:258px}
.sidebar{width:var(--navigation-width);padding:24px 14px 14px;background:#294a3d;color:#e4e9d9;border-right:1px solid #254337;overflow:hidden;isolation:isolate;box-shadow:6px 0 30px #243a2f08;transition:width .25s ease,padding .25s ease}
.sidebar::before{content:'';position:absolute;top:-90px;right:-99px;height:260px;width:260px;border:1px solid #f3e3b215;border-radius:50%;box-shadow:0 0 0 29px #f3e3b204,0 0 0 58px #f3e3b203;pointer-events:none;z-index:-1}
.sidebar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(transparent,#1d3c302b);pointer-events:none;z-index:-1}
.sidebar-header{flex-shrink:0;position:relative;padding:0 7px 17px}
.sidebar .brand{gap:12px;padding:0 0 20px;position:relative;min-width:0;outline-offset:5px}
.sidebar .brandmark{height:46px;width:46px;flex-shrink:0;border-radius:13px;color:#ffecd0;background:#bd6754;border:1px solid #e5a27b60;box-shadow:inset 0 0 0 3px #cf80671f,0 7px 13px #172e2825;position:relative;transform:rotate(-5deg);transition:transform .3s,box-shadow .3s}
.sidebar .brandmark::before{content:'';position:absolute;inset:5px;border:1px solid #f3c99975;border-radius:8px}
.sidebar .brandmark>span{font:28px/1.2 'Noto Sans JP',serif;transform:rotate(5deg);position:relative}
.sidebar .brandmark i{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;background:#e6c997;border:3px solid #294a3d;border-radius:50%}
.sidebar .brand:hover .brandmark{transform:rotate(0) translateY(-2px);box-shadow:0 9px 20px #142c2c35}
.sidebar .brand-copy{display:block;min-width:0}
.sidebar .brand-name{font-size:28px;letter-spacing:-1.3px;line-height:1.25;color:#f4efdc;font-weight:650;white-space:nowrap}
.sidebar .brand-name>span{color:#e4b98b}
.sidebar .brand-caption{font-size:9px;color:#b2c2ad;letter-spacing:1.1px;margin-top:5px;line-height:1.5;white-space:nowrap}
.sidebar-close{display:none}
.sidebar-club{display:flex;align-items:center;gap:8px;background:#d4dfba0a;border:1px solid #d6e2bb14;border-radius:9px;padding:9px 10px}
.sidebar-club-dot{width:5px;height:5px;border-radius:50%;background:#bdd298;box-shadow:0 0 0 3px #bdd2980a;flex-shrink:0}
.sidebar-club-label{font-size:8px;font-weight:600;letter-spacing:1.3px;color:#bacbb2;line-height:1.7}
.sidebar-n5{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.5px;color:#e6d2a4;background:#e8c78112;padding:3px 7px;border-radius:5px;border:1px solid #ddc58525}
.sidebar-nav{min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;padding:0 2px 10px;scrollbar-width:thin;scrollbar-color:#7e9c6c35 transparent;overscroll-behavior:contain}
.sidebar-nav::-webkit-scrollbar{width:4px}.sidebar-nav::-webkit-scrollbar-thumb{background:#78997044;border-radius:5px}
.nav-overview{padding-bottom:6px}
.sidebar .nav-link{display:flex;position:relative;align-items:center;gap:10px;padding:7px 11px;margin-bottom:4px;border-radius:11px;border:1px solid transparent;color:#d2deca;font-size:12px;font-weight:500;min-height:42px;line-height:1.4;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s,color .2s}
.sidebar .nav-link::before{content:'';position:absolute;left:-1px;top:11px;bottom:11px;width:3px;border-radius:4px;background:transparent;transition:background .2s}
.nav-icon-tile{height:28px;width:28px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;background:#b6caa20a;color:#9eb598;transition:background .2s,color .2s,transform .2s}
.sidebar .nav-icon-tile>.icon{width:17px;height:17px}
.sidebar .nav-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s}
.nav-link-arrow{margin-left:auto;display:grid;place-items:center;color:#9eb29a;opacity:0;transform:translateX(-3px);transition:opacity .2s,transform .2s}
.nav-link-arrow .icon{width:13px;height:13px}
.sidebar .nav-link:hover{background:#8db09012;border-color:#c6d2b912;color:#f1efdc;transform:translateX(2px)}
.sidebar .nav-link:hover .nav-icon-tile{background:#bdd0a514;color:#d5e3c9;transform:translateY(-1px)}
.sidebar .nav-link:hover .nav-link-arrow{opacity:1;transform:translateX(0)}
.sidebar .nav-link.active{background:#f4efdc;color:#3e5943;border-color:#f4efdc;box-shadow:0 5px 13px #17382b19;font-weight:650}
.sidebar .nav-link.active::before{background:#c78c62}
.sidebar .nav-link.active .nav-icon-tile{background:#ead4b94f;color:#b97754}
.sidebar .nav-link.active .nav-link-arrow{opacity:1;color:#a78d6a;transform:none}
.sidebar .nav-count{display:grid;place-items:center;margin-left:auto;min-width:21px;height:21px;line-height:1;font-size:9px;color:#c6d9bc;background:#b6caa20b;border:1px solid #b6caa21c;border-radius:6px}
.sidebar .nav-link.active .nav-count{color:#967649;background:#e5c68f26;border-color:#ceb38840}
.nav-group{margin-top:11px;border:0;min-width:0}
.nav-group>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;padding:7px 12px 10px;min-height:30px;border-radius:7px;color:#a5bca0;user-select:none}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary:hover{color:#e0e6cf}
.sidebar .nav-label{margin:0;font-size:9px;letter-spacing:1.4px;font-weight:600;color:inherit;line-height:1.7;flex:1}
.nav-group-symbol{display:none}
.nav-group-count{font-size:9px;color:#a3b39a;line-height:1.4}
.nav-group-chevron{width:11px;height:11px;transform:rotate(0);color:#9eb494;transition:transform .2s}
.nav-group[open] .nav-group-chevron{transform:rotate(90deg)}
.nav-group[open]>.nav-group-links{animation:nav-group-in .22s ease-out}
.sidebar-bottom{flex-shrink:0;margin-top:0;padding-top:12px;border-top:1px solid #c1d4b019;position:relative}
.sidebar-student{padding:11px 12px 10px;background:#172f2429;border:1px solid #bfcbaa19;border-radius:13px}
.sidebar-student-link{display:flex;align-items:center;gap:10px;min-width:0;padding:0;border-radius:8px}
.sidebar-student-link:hover .sidebar-student-avatar{border-color:#e0cb9577;transform:translateY(-2px)}
.sidebar-student-avatar{width:38px;height:43px;flex-shrink:0;border-radius:10px;display:block;overflow:hidden;background:#dce5ca;border:1px solid #e4ddb82a;transition:transform .2s,border-color .2s}
.sidebar-student-avatar .avatar-art{display:block;width:37px;height:50px;transform:translateY(4px) scale(1.15);transform-origin:center top}
.sidebar-student-info{flex:1;min-width:0;display:block}
.sidebar-student-info strong{display:block;font-size:12px;font-weight:600;color:#ecead5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.7}
.sidebar-student-info small{display:block;font-size:9px;color:#a9bda0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6;margin-top:2px}
.sidebar-student-link>.icon{width:13px;height:13px;color:#a7bd9b;flex-shrink:0}
.sidebar-progress-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:#acbd9c;margin:12px 0 7px}
.sidebar-progress-summary strong{font-size:10px;font-weight:600;color:#dac38f}
.sidebar-progress{height:4px;background:#abc89512;border-radius:5px;overflow:hidden}
.sidebar-progress>span{height:100%;display:block;border-radius:5px;background:#cdb985;transition:width .45s ease}
.sidebar-student-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:8px;color:#aab99a;margin-top:9px}
.sidebar-student-meta>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sidebar-wallet{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;color:#dac38f;padding:2px 0;font-size:9px}
.sidebar-wallet>span{font:12px/1.3 serif;color:#d1bd8a}
.sidebar-wallet strong{font-weight:600}
.sidebar-controls{display:flex;align-items:center;gap:7px;margin-top:8px}
.sidebar .settings-link{display:flex;align-items:center;gap:9px;flex:1;min-width:0;font-size:11px;color:#b8c7aa;min-height:37px;padding:9px 12px;border-radius:9px;transition:background .2s,color .2s}
.sidebar .settings-link>.icon{width:16px;height:16px;flex-shrink:0}
.sidebar .settings-link:hover{color:#efebd6;background:#b6c9a40c}
.sidebar-collapse{display:grid;place-items:center;width:34px;height:34px;border:1px solid #b2c49a25;background:#b6c9a404;border-radius:9px;color:#a8ba9a;transition:background .2s,color .2s}
.sidebar-collapse .icon{width:17px;height:17px}
.sidebar-collapse:hover{background:#b6c9a40f;color:#e1d9b7}
.sidebar-signature{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:7px;font-size:8px;color:#9db396;line-height:1.6;white-space:nowrap}
.sidebar-signature>span{font:11px/1.5 'Noto Sans JP',serif;color:#b5c29f}
.app-shell{margin-left:var(--navigation-width);transition:margin-left .25s ease}
.toast{left:calc(50% + var(--navigation-width)/2)}
/* A lighter command bar leaves the navigation and lesson content in focus. */
.topbar{height:78px;padding:0 34px;background:#fcfdf9ed;border-color:#e2e8dc;gap:20px;position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.breadcrumb{gap:10px;min-width:0;line-height:1.5;font-size:11px}
.breadcrumb>span:first-child{color:#899a80}
.breadcrumb .slash{color:#c2cbb8}
.breadcrumb strong{font-size:13px;font-weight:600;color:#4a6443;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{gap:13px;min-width:0}
.topbar .search-wrap{border:1px solid #e1e8d7;background:#f3f6ed;border-radius:11px;padding:9px 12px;gap:8px;min-height:39px;color:#92a184;transition:border-color .2s,background .2s,box-shadow .2s}
.topbar .search-wrap:focus-within{border-color:#9aad83;background:#fffefa;box-shadow:0 0 0 3px #a6b68b14}
.topbar .search-wrap input{width:174px;font-size:11px;color:#45623b;outline:0}
.topbar .search-wrap input::placeholder{color:#7a8b6d}
.topbar .search-wrap kbd{background:#fff;color:#889a7a;border-color:#dce4d1;font-size:9px;padding:1px 4px}
.topbar .streak-pill{border:1px solid #eddec0;background:#faf4e7;border-radius:10px;padding:9px 10px;font-size:11px;color:#a47d3d;min-height:38px}
.topbar .streak-pill .icon{color:#ba9258;width:15px;height:15px}
.topbar .top-sen{background:#ecf2e4;color:#6a8050;border:1px solid #dce6cf;border-radius:10px;padding:9px 11px;min-height:38px;font-size:11px;transition:background .2s,transform .2s}
.topbar .top-sen:hover{background:#e0ebd3;transform:translateY(-1px)}
.topbar .avatar{width:38px;height:41px;border-radius:11px;background:#e4ecd6;border:1px solid #d0ddbc;box-shadow:0 2px 8px #52734408;transition:transform .2s,border-color .2s}
.topbar .avatar:hover{transform:translateY(-2px);border-color:#b4c79b}
.topbar .avatar svg{height:51px;width:38px;transform:translateY(4px) scale(1.12)}
.topbar .mobile-menu{color:#5e7950;border:1px solid #dde6d3;background:#f0f4e8;border-radius:10px;width:37px;height:38px}
.topbar .mobile-menu .icon{width:18px;height:18px}
@keyframes nav-group-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(min-width:761px){
 body.sidebar-compact{--navigation-width:82px}
 .sidebar-compact .sidebar{padding-left:11px;padding-right:11px}
 .sidebar-compact .sidebar-header{padding-left:0;padding-right:0;padding-bottom:14px}
 .sidebar-compact .brand{justify-content:center;padding-bottom:16px}
 .sidebar-compact .brandmark{width:44px;height:44px}
 .sidebar-compact .brand-copy,.sidebar-compact .sidebar-club-label,.sidebar-compact .sidebar-club-dot{display:none}
 .sidebar-compact .sidebar-club{justify-content:center;padding:7px 6px;border:0;background:none}
 .sidebar-compact .sidebar-n5{margin:0;background:#e8c7810f}
 .sidebar-compact .sidebar-nav{padding-left:0;padding-right:0}
 .sidebar-compact .nav-link{justify-content:center;padding:7px;gap:0;height:44px}
 .sidebar-compact .nav-text,.sidebar-compact .nav-link-arrow{display:none}
 .sidebar-compact .nav-icon-tile{width:31px;height:30px}
 .sidebar-compact .nav-count{position:absolute;right:2px;top:2px;min-width:15px;height:15px;border-radius:4px;font-size:7px}
 .sidebar-compact .nav-group{margin-top:17px;padding-top:14px;border-top:1px solid #b3c39b1a}
 .sidebar-compact .nav-group>summary{display:none}
 .sidebar-compact .sidebar-student{border:0;background:none;padding:0 5px}
 .sidebar-compact .sidebar-student-link{justify-content:center}
 .sidebar-compact .sidebar-student-info,.sidebar-compact .sidebar-student-link>.icon,.sidebar-compact .sidebar-progress-summary,.sidebar-compact .sidebar-progress,.sidebar-compact .sidebar-student-meta,.sidebar-compact .sidebar-signature{display:none}
 .sidebar-compact .sidebar-controls{flex-direction:column;gap:4px;margin-top:11px}
 .sidebar-compact .settings-link{padding:10px;justify-content:center;flex:none;width:36px}
 .sidebar-compact .settings-link>span{display:none}
 .sidebar-compact .sidebar-collapse{width:36px}
 .sidebar-compact .sidebar-collapse .icon{transform:rotate(180deg)}
}
@media(max-width:1190px){body{--navigation-width:242px}.topbar{padding:0 25px}.topbar-actions{gap:9px}.topbar .search-wrap input{width:145px}.sidebar-header{padding-left:5px;padding-right:5px}.sidebar .brand-name{font-size:26px}.sidebar .brand-caption{letter-spacing:1.25px}.sidebar-club-label{letter-spacing:.9px;font-size:8px}.sidebar .nav-link{font-size:11px;padding-left:10px;padding-right:10px}.sidebar-student-meta{font-size:7px}.sidebar-wallet{font-size:8px}}
@media(max-width:1020px){.topbar .search-wrap input{width:120px}.topbar .search-wrap kbd{display:none}.topbar .streak-pill{padding:8px 9px}.topbar .top-sen{padding:8px 9px}.topbar .breadcrumb strong{font-size:12px}.topbar{gap:12px}}
@media(max-width:870px) and (min-width:761px){.topbar #global-search{display:none}.topbar-actions{gap:11px}.topbar .breadcrumb strong{font-size:13px}}
@media(max-width:760px){
 body{--navigation-width:0px}
 .app-shell{margin-left:0;transition:none}
 .sidebar{width:min(306px,calc(100vw - 44px));padding:24px 16px 15px;border-radius:0 22px 22px 0;box-shadow:15px 0 55px #142d2a30;transform:translateX(-105%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s;z-index:40;height:100%;height:100dvh;max-height:100dvh}
 .sidebar.open{transform:translateX(0);visibility:visible}
 .sidebar-header{padding-right:29px;padding-bottom:18px}
 .sidebar .brand{padding-bottom:19px;gap:12px}
 .sidebar .brand-name{font-size:28px}
 .sidebar .brand-caption{font-size:8px;letter-spacing:1.3px}
 .sidebar-close{position:absolute;right:-5px;top:-2px;display:grid!important;place-items:center;width:30px;height:31px;color:#c2d0b6;border:1px solid #bed3a525;border-radius:9px;background:#bdd1a609}
 .sidebar-close .icon{width:16px;height:16px}
 .sidebar-close:hover{background:#c1d6a613;color:#f2ebd7}
 .sidebar-club-label{font-size:9px;letter-spacing:.9px}
 .sidebar .nav-link{font-size:12px;padding:8px 12px;min-height:44px}
 .sidebar .nav-icon-tile{width:29px;height:29px}
 .sidebar .nav-label{font-size:10px;letter-spacing:1.2px}
 .nav-group>summary{padding-top:9px;padding-bottom:11px}
 .sidebar-student-info strong{font-size:13px}
 .sidebar-student-info small{font-size:10px}
 .sidebar-student-meta{font-size:8px}.sidebar-wallet{font-size:9px}
 .sidebar-signature{font-size:9px}
 .sidebar-collapse{display:none}
 .sidebar .settings-link{font-size:12px;padding-left:12px;min-height:39px}
 .sidebar .settings-link>.icon{width:17px;height:17px}
 .mobile-shade:not([hidden]){z-index:35;background:#18362f80;backdrop-filter:blur(5px)}
 body.mobile-menu-open{overflow:hidden;overscroll-behavior:none}
 .topbar{height:69px;padding:0 20px;gap:12px}
 .topbar .breadcrumb{margin-right:auto}
 .topbar .breadcrumb strong{font-size:13px}
 .topbar-actions{gap:9px!important}
 .topbar .streak-pill{padding:7px 8px;min-height:34px;font-size:10px}
 .topbar .top-sen{padding:7px 9px;min-height:34px;font-size:10px}
 .topbar .avatar{width:34px;height:37px;border-radius:10px}
 .topbar .avatar svg{width:34px;height:47px;transform:translateY(4px) scale(1.12)}
 .toast{left:50%}
}
@media(max-width:420px){.topbar{padding:0 15px;gap:9px}.topbar .breadcrumb strong{font-size:12px;max-width:105px}.topbar-actions{gap:6px!important}.topbar .streak-pill{padding:7px 6px;font-size:9px;gap:4px}.topbar .streak-pill .icon{width:13px;height:13px}.topbar .top-sen{padding:7px;font-size:9px}.topbar .avatar{width:31px;height:34px}.topbar .avatar svg{width:32px;height:44px}.topbar .mobile-menu{width:33px;height:35px;flex-shrink:0}}
@media(max-height:700px){.sidebar-signature{display:none}.sidebar-student-meta{display:none}.sidebar-progress-summary{margin-top:9px}.sidebar-bottom{padding-top:10px}.sidebar-header{padding-bottom:12px}.sidebar .brand{padding-bottom:15px}}
.navigation-motion-off .sidebar,.navigation-motion-off .app-shell,.navigation-motion-off .sidebar *,.navigation-motion-off .sidebar *::before,.navigation-motion-off .topbar *{transition:none!important;animation:none!important}
.navigation-motion-off .sidebar a:hover,.navigation-motion-off .sidebar a:hover *,.navigation-motion-off .topbar button:hover{transform:none!important}
@media(prefers-reduced-motion:reduce){.sidebar,.app-shell,.sidebar *,.sidebar *::before,.topbar *{transition:none!important;animation:none!important}.sidebar a:hover,.sidebar a:hover *,.topbar button:hover{transform:none!important}}