/* One compact identity, with distinct navigation for desktop and phones. */
:root{--surface:#fcfeff;--shell-border:#c8dfef;--brand-filter:none}
:root[data-theme=dark]{--surface:#1b2d46;--shell-border:#3e5877;--brand-filter:none}
:root{--brand-emblem-height:14px;--brand-wordmark-height:16px;--brand-header-background:linear-gradient(90deg,#105093 0%,#076bc7 68%,#137dce 100%);--mobile-nav-active:#1768b5;--mobile-navigation-height:56px;--mobile-navigation-inset:env(safe-area-inset-bottom,0px)}
:root[data-theme=dark]{--mobile-nav-active:#acd1ff}
.sidebar{padding-top:14px}
:root{--side:224px}
.collapsed{--side:76px}
.sidebar-head{height:42px;margin-bottom:34px}
.sidebar-title{font-size:15px;font-weight:600;padding-left:10px;white-space:nowrap;color:var(--text)}
.collapsed .sidebar-title{display:none}
.sidebar-foot{white-space:normal;line-height:1.5}
.sidebar-foot strong{font-size:11px}
.sidebar-foot div>span{font-size:10px;max-width:150px}
.shell-header{height:54px;padding-inline:28px;gap:8px}
.shell-header .shared-brand{display:flex;align-items:center;gap:7px;flex:none;height:44px}
.shared-brand img{object-fit:contain;width:auto;filter:var(--brand-filter)}
.shared-brand .brand-emblem{height:var(--brand-emblem-height)}
.shared-brand .brand-wordmark{height:var(--brand-wordmark-height)}
body.home-dashboard-active .shell-header{background:linear-gradient(90deg,#105093 0%,#076bc7 68%,#137dce 100%)}
:root[data-theme=dark] body.home-dashboard-active .shell-header:not(.preparation-shell-header){background:linear-gradient(90deg,#105093 0%,#076bc7 68%,#137dce 100%)}
body.home-dashboard-active .shared-brand,body.jadwal-narrow:not(.jadwal-month-expanded) .shared-brand,.preparation-shell-header .shared-brand{--brand-filter:none}
body.home-dashboard-active .shell-header :is(.icon-button,#settings){color:#e0efff}
.shell-header .header-tools{gap:2px}
.shell-header .header-tools .icon-button{width:40px;min-width:40px;height:44px;padding:0;cursor:pointer}
.shell-header .header-tools .icon-button svg{width:21px;height:21px}
.shell-header .header-tools .subscription-button{width:72px;min-width:72px;background:transparent}
.shell-header .header-tools .premium-crown{position:relative;z-index:2;width:15.3333px;height:15.3333px;stroke-width:2.4;animation:premium-spark 3.2s ease-in-out infinite}
.shell-dialog{color:var(--text);background:var(--surface);border:1px solid var(--shell-border);border-radius:22px;width:min(430px,calc(100vw - 32px));padding:24px;box-shadow:0 22px 80px #07152c30;max-height:calc(100dvh - 48px);overflow:auto}
.shell-dialog::backdrop{background:#08192d70;backdrop-filter:blur(4px)}
.shell-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.shell-dialog h2{font-size:21px;margin:0}.shell-dialog h3{font-size:20px}.shell-dialog p{line-height:1.6}
.shell-dialog-head .icon-button{font-size:28px;color:var(--quiet)}
.shell-dialog fieldset{border:0;padding:0;margin:0 0 20px}.shell-dialog legend{font-size:14px;margin-bottom:12px;color:var(--quiet)}
.shell-theme-options{display:flex;gap:10px}.shell-theme-options button{flex:1;padding:12px;border:1px solid var(--shell-border);border-radius:12px;background:var(--canvas);color:var(--text)}
.shell-theme-options button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
.shell-setting-link{display:flex;justify-content:space-between;gap:12px;padding:16px 0;border-block:1px solid var(--shell-border);font-size:14px;font-weight:600}
.shell-dialog-note{color:var(--quiet);font-size:13px;margin-bottom:0}
#frames{overflow:hidden}
@media(max-width:767px){
 .shell-header{padding-inline:16px;height:50px}
 .shell-header .header-tools .icon-button{width:38px;min-width:38px}
 .shell-header .header-tools .subscription-button{width:72px;min-width:72px}
 #mobile-nav{grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid color-mix(in srgb,var(--quiet) 12%,transparent)}
 #mobile-nav .nav-label{font-size:10px}
 #mobile-nav .nav-icon{width:43px;height:43px;top:-7px;transform:translateY(9px)}
 #mobile-nav .nav-item[aria-current=page] .nav-icon{top:-7px}
 #mobile-nav .nav-item svg,#mobile-nav .nav-item[aria-current=page] svg{width:21px;height:21px}
 #mobile-nav .nav-icon::before{border-width:4px}
 .workspace,.collapsed .workspace{height:calc(100dvh - var(--mobile-navigation-height) - var(--mobile-navigation-inset))}
}
/* The active destination is expressed by the icon, label and a short line.
   All six links retain their full touch targets; only keyboard focus has a rim. */
@media(max-width:767px){
 #mobile-nav{height:calc(var(--mobile-navigation-height) + var(--mobile-navigation-inset));padding-bottom:var(--mobile-navigation-inset)}
 #mobile-nav .nav-item{height:var(--mobile-navigation-height)}
 #mobile-nav .nav-item{min-width:44px;min-height:44px;color:var(--quiet);background:transparent;border:0;box-shadow:none}
 #mobile-nav .nav-item:hover{background:transparent}
 #mobile-nav .nav-icon,#mobile-nav .nav-item[aria-current=page] .nav-icon{
  top:4px;width:28px;height:28px;transform:none;border:0;border-radius:0;
  background:transparent;box-shadow:none;color:inherit;isolation:auto;
 }
 #mobile-nav .nav-icon::before,#mobile-nav .nav-icon::after{
  content:none;display:none;background:none;border:0;box-shadow:none;animation:none;
 }
 #mobile-nav .nav-item[aria-current=page]{color:var(--mobile-nav-active);background:transparent;font-weight:650}
 #mobile-nav .nav-item svg,#mobile-nav .nav-item[aria-current=page] svg{
  width:21px;height:21px;fill:none;filter:none;stroke-width:1.8;
 }
 #mobile-nav .nav-item[aria-current=page] svg{stroke-width:2.1}
 #mobile-nav .nav-label,#mobile-nav .nav-item[aria-current=page] .nav-label{
  top:auto;bottom:6px;max-width:calc(100% - 2px);white-space:nowrap;line-height:12px;
 }
 #mobile-nav .nav-item[aria-current=page]::after{
  content:'';display:block;position:absolute;left:50%;right:auto;top:auto;bottom:1px;
  width:16px;height:2px;margin:0;border:0;border-radius:999px;background:currentColor;
  transform:translateX(-50%);box-shadow:none;
 }
 #mobile-nav .nav-item:focus:not(:focus-visible){outline:none}
 #mobile-nav .nav-item:focus-visible{
  outline:2px solid var(--mobile-nav-active);outline-offset:-3px;border-radius:10px;
 }
}
@media(max-width:359px){.shell-header{padding-inline:10px}.shell-header .header-tools .subscription-button{width:64px;min-width:64px}.shell-header .premium-capsule{width:56px}}
@media(prefers-reduced-motion:reduce){.premium-capsule::before,.premium-crown,.premium-plus{animation:none!important}}

/* Takayu Tab Indicator / Press Feedback: long settle, immediate selection. */
.workspace{transition:margin-left 650ms cubic-bezier(.65,0,.35,1)}
.sidebar{transition:width 650ms cubic-bezier(.65,0,.35,1)}
.nav-item{transition:background-color 225ms cubic-bezier(.33,1,.68,1),color 225ms cubic-bezier(.33,1,.68,1)}
html[data-page-motion] .premium-capsule::before{animation-duration:7.5s}
html[data-page-motion] .shell-header .premium-crown,html[data-page-motion] .shell-header .premium-plus{animation-duration:4s;animation-timing-function:cubic-bezier(.37,0,.63,1)}
@media(max-width:767px){
 #mobile-nav .nav-icon,#mobile-nav .nav-icon::before{transition-duration:650ms;transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
 #mobile-nav .nav-item svg,#mobile-nav .nav-label{transition-duration:225ms;transition-timing-function:cubic-bezier(.33,1,.68,1)}
 #mobile-nav .is-tapped .nav-icon::after{animation:nav-tap-ring 812.5ms cubic-bezier(.33,1,.68,1)}
 #mobile-nav .is-tapped .nav-icon svg{animation:nav-icon-tap 525ms cubic-bezier(.33,1,.68,1)}
}
@media(prefers-reduced-motion:reduce){.workspace,.sidebar,.nav-item{transition:none!important}}

/* The approved white/mint wordmark needs the same blue surface on every menu. */
body[data-active-app] .shell-header:not(.preparation-shell-header),
:root[data-theme=dark] body[data-active-app] .shell-header:not(.preparation-shell-header){background:var(--brand-header-background);border-bottom-color:#ffffff18}
body[data-active-app] .shell-header :is(.icon-button,#settings){color:#e0efff}
body[data-active-app] .shell-header .icon-button:hover{background:#ffffff15}
body[data-active-app] .shell-header :is(a,button):focus-visible{outline-color:#fff}
@media(max-width:359px){#mobile-nav .nav-label{font-size:9px}}

/* Approved Premium capsule, unchanged from Home. */
@media(forced-colors:active){.target-card,.shortcut-card,.schedule-row,.streak-card,.expanded-card{border:1px solid CanvasText}.hero{background:Canvas;color:CanvasText}.hero :is(h1,.target-card){color:CanvasText}.expanded-route{display:none}.agenda-status{border:1px solid CanvasText}.name-dot,.tryout-copy h3 span{color:inherit}}
.premium-capsule{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:6px;width:64px;height:32px;overflow:hidden;border-radius:999px;box-shadow:0 0 5px #ffd36d35;color:#ffdc85}
.premium-capsule::before{content:'';position:absolute;z-index:0;inset:-100%;background:conic-gradient(from 0deg,#ad791e 0deg,#ffeac1 58deg,#ffd365 95deg,#b18c37 142deg,#cab0ff 187deg,#fff3d3 235deg,#ffbf48 286deg,#ad791e 360deg);animation:premium-orbit 3.75s linear infinite}
.premium-capsule::after{content:'';position:absolute;z-index:1;inset:1px;border-radius:inherit;background:linear-gradient(110deg,#164988,#114482)}
.premium-plus{position:relative;z-index:2;font-size:18px;font-weight:800;line-height:1;animation:premium-spark 2s ease-in-out 0.1875s infinite}
@keyframes premium-orbit{to{transform:rotate(360deg)}}
@keyframes premium-spark{0%,100%{color:#f6bf50;opacity:.64;filter:drop-shadow(0 0 .3px #ffd66555)}45%,60%{color:#fff0c4;opacity:1;filter:drop-shadow(0 0 1.4px #ffe6a8)}}
@media(forced-colors:active){.premium-capsule{border:1px solid ButtonText}.premium-capsule::before,.premium-capsule::after{display:none}}
@media(prefers-reduced-motion:reduce){.premium-capsule::before,.premium-crown,.premium-plus{animation:none!important}}