/* Main navigation: one consistent, compact control group. */
:root,:root[data-accent]{--app-header-height:85px}
.app-header.sidebar{background:#0e141fec;border-bottom:1px solid #a5c3ff17;box-shadow:0 5px 24px #00000024;backdrop-filter:blur(22px)}
.app-header-inner{display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);grid-template-areas:"brand nav profile";min-height:84px;height:84px;gap:24px;padding:0 32px;max-width:1510px}
.app-header .brand{grid-area:brand;justify-self:start;min-height:0;font-size:23px;letter-spacing:-.9px;gap:11px;line-height:1}
.app-header .brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:var(--accent);font-size:29px;font-weight:700;background:linear-gradient(145deg,#aac7ff24,#aac7ff08);border:1px solid #aecbff35;box-shadow:inset 0 1px #ffffff12}
.app-header nav{grid-area:nav;display:flex;justify-content:center;align-items:center;gap:5px;height:54px;padding:5px;background:#1b25338c;border:1px solid #b3caff15;border-radius:14px;margin:0;min-width:0}
.app-header .nav-item{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:9px;min-height:44px;height:44px;min-width:112px;padding:0 17px;border:1px solid transparent;border-radius:9px;font-size:15px;font-weight:550;color:#a6b4c9;white-space:nowrap;background:transparent}
.app-header .nav-item>svg{display:block;width:18px;height:18px;opacity:.85;flex-shrink:0}
.app-header .nav-item>span{display:block}
.app-header .nav-item:after{display:none}
.app-header .nav-item:hover{background:#ffffff08;color:var(--text)}
:root[data-accent] .app-header .nav-item.active,.app-header .nav-item.active{color:#ecf3ff;background:linear-gradient(120deg,#364c70,#2a3a54);border-color:#a5c3ff36;box-shadow:0 2px 7px #0002,inset 0 1px #ffffff09}
.app-header .nav-item.active>svg{color:var(--accent);opacity:1}
.app-header .header-account{grid-area:profile;justify-self:end;display:flex;align-items:center;gap:10px;width:auto;max-width:220px;min-height:46px;height:46px;margin:0;padding:5px 11px 5px 5px;border-radius:13px;background:#1b253366;border:1px solid #a5c3ff1a}
.app-header .header-account:hover{border-color:#a5c3ff55;background:#253248}
.app-header .header-account[aria-current=page]{background:var(--accent-soft);border-color:#a5c3ff55}
.app-header .header-account .avatar{height:34px;width:34px;min-width:34px;border-radius:9px;color:var(--accent);background:#9bbbff14;border:1px solid #aecbff20;display:grid;place-items:center;font-size:18px}
.app-header .header-account>span:nth-child(2){display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:550;color:var(--text)}
.app-header .header-account>svg{display:block;width:15px;height:15px;opacity:.55;flex-shrink:0}
@media(max-width:1100px) and (min-width:861px){.app-header-inner{grid-template-columns:minmax(160px,1fr) auto minmax(120px,1fr);gap:18px;padding:0 24px}.app-header .brand{font-size:21px}.app-header .nav-item{min-width:100px;padding:0 13px}.app-header .header-account{max-width:175px}}
@media(max-width:860px){
 :root,:root[data-accent]{--app-header-height:127px}
 .app-header-inner{height:126px;min-height:126px;padding:0 20px 12px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:62px 52px;grid-template-areas:"brand profile" "nav nav";gap:0 18px}
 .app-header .brand{font-size:22px;min-height:0}
 .app-header nav{height:52px;width:100%;padding:4px;gap:4px;justify-content:stretch;border-radius:12px}
 .app-header .nav-item{flex:1;min-width:0;height:42px;min-height:44px;padding:0 14px;font-size:15px;border-radius:8px}
 .app-header .header-account{max-width:200px;min-height:42px;height:42px;border-radius:11px}
 .app-header .header-account .avatar{height:30px;width:30px;min-width:30px;font-size:16px;border-radius:8px}
}
@media(max-width:440px){
 .app-header-inner{padding:0 16px 12px;gap:0 12px}
 .app-header .brand{font-size:21px;gap:9px}
 .app-header .brand-mark{width:30px;height:30px;font-size:25px;border-radius:9px}
 .app-header .header-account{max-width:137px;gap:7px;padding-right:8px}
 .app-header .header-account>span:nth-child(2){font-size:13px}
 .app-header .header-account>svg{display:none}
 .app-header .nav-item{font-size:13px;gap:7px;padding:0 8px}
 .app-header .nav-item>svg{width:16px;height:16px}
}

/* Personal room card in the header. */
.app-header .header-account{
 position:relative;isolation:isolate;overflow:hidden;width:246px;max-width:100%;height:64px;min-height:64px;
 gap:12px;padding:7px 11px 7px 8px;border-radius:18px;text-align:left;
 background:radial-gradient(ellipse at 0 0,var(--accent-soft),transparent 75%),linear-gradient(120deg,#1b2637,#141c29);
 border:1px solid #aac7ff29;box-shadow:inset 0 1px 0 #ffffff0b,0 3px 12px #0002;
 transition:border-color .18s,box-shadow .18s,background .18s;
}
.app-header .header-account:hover,.app-header .header-account[aria-current=page]{
 background:radial-gradient(ellipse at 0 0,var(--accent-soft),transparent 90%),linear-gradient(120deg,#26344a,#182232);
 border-color:var(--accent);box-shadow:inset 0 1px 0 #ffffff12,0 4px 20px #0003;
}
.app-header .header-account:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.app-header .header-profile-orbit{
 position:relative;display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;padding:3px;border-radius:50%;
 background:conic-gradient(from -90deg,var(--accent) var(--profile-progress),#ffffff13 0);
 box-shadow:0 0 16px #98baff0b;
}
.app-header .header-account .avatar{width:40px;height:40px;min-width:40px;border:3px solid #192334;border-radius:50%;background:#2b3c56;color:var(--accent);font-size:23px}
.app-header .header-account>.header-profile-copy{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0;max-width:none;overflow:hidden;white-space:normal;line-height:1.1}
.header-profile-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:650;color:#edf3ff}
.header-profile-detail{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;color:#aabbd2;font-variant-numeric:tabular-nums}
.header-profile-arrow{display:grid;place-items:center;flex:0 0 24px;height:24px;border:1px solid #b9d0ff1a;border-radius:8px;color:var(--accent);background:#a8c6ff08;transition:transform .18s}
.header-profile-arrow svg{width:13px;height:13px}
.header-account:hover .header-profile-arrow{transform:translateX(2px)}
@media(min-width:861px) and (max-width:1100px){
 .app-header .header-account{width:200px;gap:9px}
 .header-profile-arrow{display:none}
}
@media(max-width:860px){
 .app-header .header-account{width:214px;height:52px;min-height:48px;padding:4px 8px;gap:9px;border-radius:14px}
 .app-header .header-profile-orbit{flex-basis:40px;width:40px;height:40px}
 .app-header .header-account .avatar{width:34px;height:34px;min-width:34px;font-size:20px}
 .app-header .header-account>.header-profile-copy{gap:5px}
}
@media(max-width:440px){
 .app-header .header-account{width:154px;max-width:154px;gap:8px;padding:4px 7px}
 .header-profile-name{font-size:12px}
 .header-profile-detail{font-size:9px}
 .header-profile-arrow{display:none}
}
@media(max-width:360px){
 .app-header .header-account{width:112px;max-width:112px;gap:6px;padding:4px 5px}
 .app-header .header-profile-orbit{flex-basis:34px;width:34px;height:34px}
 .app-header .header-account .avatar{width:28px;height:28px;min-width:28px;font-size:17px;border-width:2px}
 .header-profile-detail{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.app-header .header-account,.header-profile-arrow{transition:none}}
:root[data-motion=reduced] .header-account,:root[data-motion=reduced] .header-profile-arrow{transition:none}
.header-profile-level{position:absolute;right:-3px;bottom:-2px;display:grid;place-items:center;width:23px;height:23px;border:2px solid #182232;border-radius:50%;background:var(--accent);color:#101a2b;box-shadow:0 2px 6px #0005;font-size:10px;font-weight:750;line-height:1;font-variant-numeric:tabular-nums}
@media(max-width:860px){.header-profile-level{width:20px;height:20px;font-size:9px;right:-2px;bottom:-1px}}
@media(max-width:360px){.header-profile-level{width:18px;height:18px;font-size:8px}}