:root{--sidebar-bg:#0b0e12;--sidebar-card:#11151b;--sidebar-line:#252c35;--sidebar-text:#eef0f4;--sidebar-muted:#858d9a;--sidebar-gold:#f0bd52;--sidebar-gold-soft:#ffe3a3;--sidebar-teal:#3fe0c5}
.app-shell{max-width:1480px;gap:0;background:#07080a}
.app-shell>.sidebar{width:304px;flex:0 0 304px;min-height:calc(100vh - 64px);padding:38px 20px 24px;background:radial-gradient(420px 260px at 0 0,rgba(240,189,82,.12),transparent 62%),linear-gradient(180deg,#0c1014,#090b0e);border-right:1px solid #252c35}
.sidebar-title{position:relative;margin:0 4px 58px;color:var(--sidebar-muted);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.sidebar-title:after{content:'';position:absolute;left:-2px;right:-2px;top:36px;height:14px;background:no-repeat center/100% 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 H110 L120 1 L130 13 L140 3 L148 7 H300' fill='none' stroke='%23f0bd52' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");filter:drop-shadow(0 0 4px rgba(240,189,82,.35))}
.side-nav{display:flex;flex-direction:column;gap:18px}
.roleplays-menu-toggle{display:flex!important;align-items:center;justify-content:space-between;width:100%;padding:13px 17px 13px 48px!important;border:0!important;border-radius:13px!important;background:linear-gradient(160deg,var(--sidebar-gold-soft),var(--sidebar-gold) 78%)!important;color:#2a2007!important;font-size:15px!important;font-weight:700!important;box-shadow:0 10px 24px -10px rgba(240,189,82,.55),inset 0 1px rgba(255,255,255,.45)!important}
.roleplays-menu-toggle:before{content:'✦';position:absolute;left:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#2a2007;color:var(--sidebar-gold);font-size:14px}
.roleplays-sidebar-search{display:flex!important;flex-direction:column;gap:8px!important}.roleplays-sidebar-search span{padding:0 3px;color:var(--sidebar-muted)!important;font-size:11px!important;font-weight:800!important;letter-spacing:.12em;text-transform:uppercase}.roleplays-sidebar-search input{width:100%;padding:12px 14px!important;border:1px solid var(--sidebar-line)!important;border-radius:10px!important;background:var(--sidebar-card)!important;color:var(--sidebar-text)!important}
.roleplays-nav-link:not(.roleplays-menu-toggle){padding:0 4px!important;color:#c5cad3!important;font-size:15px!important}
.nav-section{margin:0!important;padding:17px 18px 13px!important;border:1px solid var(--sidebar-line)!important;border-radius:18px!important;background:linear-gradient(180deg,var(--sidebar-card),#0d1014)!important;box-shadow:inset 0 1px rgba(255,255,255,.035),0 14px 28px -22px #000!important}
.nav-section summary{color:var(--sidebar-text)!important;font-size:12px!important;font-weight:800!important;letter-spacing:.1em;text-transform:uppercase}.nav-section summary:after{content:'⌃';display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#2d240a;color:var(--sidebar-gold);font-size:14px}.nav-section:not([open]) summary:after{content:'⌄'}
.nav-section-links{display:flex;flex-direction:column;padding-top:10px!important}.nav-section-links a{margin:1px 0;padding:9px 12px 9px 16px!important;border-radius:9px;color:#c6cad2!important;font-size:14.5px!important;font-weight:600!important}.nav-section-links a:hover{background:rgba(255,255,255,.04)!important;color:#fff!important}.nav-section-links a.active{background:linear-gradient(90deg,rgba(240,189,82,.16),rgba(240,189,82,.03) 84%)!important;color:var(--sidebar-gold-soft)!important}.nav-section-links a.active:before{width:3px!important;background:var(--sidebar-gold)!important;box-shadow:0 0 9px rgba(240,189,82,.5)}
.sidebar-donate-button{margin-top:2px!important;padding:14px 18px!important;border:0!important;border-radius:16px!important;background:linear-gradient(160deg,#ffe3a3,#f0bd52 78%)!important;color:#2a2007!important;box-shadow:0 14px 30px -12px rgba(240,189,82,.62),inset 0 1px rgba(255,255,255,.45)!important}.sidebar-donate-button span{display:grid!important;place-items:center!important;width:43px!important;height:43px!important;border-radius:12px!important;background:#2a2007!important;color:#f0bd52!important;font-size:18px!important;font-weight:900!important}.sidebar-donate-button strong{color:#2a2007!important;font-size:14px!important;line-height:1.25!important}
.sidebar-user{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin-top:10px!important;padding:12px 14px!important;border:1px solid rgba(63,224,197,.2)!important;border-radius:15px!important;background:linear-gradient(135deg,rgba(63,224,197,.08),rgba(17,21,27,.92) 58%)!important}.sidebar-status-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--sidebar-teal);box-shadow:0 0 0 4px rgba(63,224,197,.1),0 0 12px rgba(63,224,197,.72)}.sidebar-user strong{min-width:0;max-width:160px;margin-right:auto;color:#eef0f4!important}.sidebar-user .link-button{padding:7px 10px!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:9px!important;color:#aeb5c2!important;background:rgba(255,255,255,.04)!important}
.app-shell>.sidebar>.sidebar-toggle{display:grid!important;place-items:center!important;position:absolute!important;top:18px!important;right:-14px!important;left:auto!important;width:34px!important;height:34px!important;border:1px solid #2b3440!important;border-radius:50%!important;background:#11161d!important;color:#aeb5c2!important;font:16px/1 Inter,system-ui!important;box-shadow:none!important}
.sidebar-rail{display:none;width:84px;flex:0 0 84px;min-height:calc(100vh - 64px);align-items:center;gap:14px;padding:18px 14px 20px;border-right:1px solid #252c35;background:linear-gradient(180deg,#0b0e12,#080a0d)}.sidebar-rail a,.sidebar-rail button{font:600 18px/1 Inter,system-ui;color:#7f8a9b;text-decoration:none}.rail-toggle{align-self:flex-end;width:28px;height:28px;border:1px solid #2b3440;border-radius:50%;background:#11161d;color:#b7c0cd!important;cursor:pointer}.rail-logo,.rail-link,.rail-donate,.rail-avatar{display:grid;place-items:center}.rail-logo{width:42px;height:42px;border-radius:13px;background:linear-gradient(160deg,#ffe3a3,#f0bd52);color:#2a2007!important;font-size:23px!important;box-shadow:0 8px 24px -10px rgba(240,189,82,.75)}.rail-links{display:grid;gap:8px;width:100%;padding:8px 0;border-top:1px solid #202732;border-bottom:1px solid #202732}.rail-link{width:54px;height:42px;border-radius:12px;transition:color .18s ease,background .18s ease,transform .18s ease}.rail-link:hover{background:rgba(240,189,82,.12);color:var(--sidebar-gold-soft)!important;transform:translateY(-1px)}.rail-donate{width:54px;height:46px;border:1px solid #8b6c12;border-radius:13px;background:#2a2108;color:#ffd21a!important;cursor:pointer;font-size:19px!important}.rail-avatar{width:42px;height:42px;border-radius:12px;background:#273448;color:#eef0f4!important;position:relative;font-size:14px!important}.rail-avatar:after{content:'';position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border:2px solid #0b0e12;border-radius:50%;background:var(--sidebar-teal)}
.app-shell.sidebar-collapsed>.sidebar{display:none}.app-shell.sidebar-collapsed>.sidebar-rail{display:flex;flex-direction:column}.app-shell.sidebar-collapsed>.page{max-width:calc(100% - 84px)}
@media(max-width:760px){.app-shell>.sidebar{width:304px;flex:0 0 304px;padding:28px 16px 20px}.sidebar-toggle{left:286px!important}.app-shell.sidebar-collapsed .sidebar{width:0!important;flex-basis:0!important;padding-left:0!important;padding-right:0!important}}

/* Unified full/rail component — mirrors the approved local prototype. */
.app-shell>.sidebar{overflow:visible!important}.full-mode{display:flex;flex-direction:column;gap:20px;min-width:0}.rail-mode{display:none}.sidebar.is-collapsed .full-mode{display:none}.sidebar.is-collapsed .rail-mode{display:flex}
.app-shell.sidebar-collapsed>.sidebar{display:block!important;width:84px!important;flex:0 0 84px!important;min-height:calc(100vh - 64px)!important;padding:16px 0 20px!important;border-right:0!important;background:transparent!important}.app-shell.sidebar-collapsed>.page{max-width:calc(100% - 84px)!important}.app-shell.sidebar-collapsed>.sidebar>*{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.rail-mode{width:84px;min-height:calc(100vh - 100px);flex-direction:column;align-items:center;gap:6px;padding:16px 0 18px;border:1px solid var(--sidebar-line);border-radius:20px;background:var(--sidebar-card);box-shadow:0 20px 60px -20px rgba(0,0,0,.7),inset 0 1px rgba(255,255,255,.02)}
.rail-expand{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-bottom:10px;border:1px solid var(--sidebar-line);border-radius:50%;background:#0d1014;color:var(--sidebar-muted);font-size:13px;cursor:pointer}.rail-expand:hover{color:var(--sidebar-teal);border-color:#174a42}
.rail-brand,.rail-quick,.rail-item,.rail-donate,.rail-avatar{display:flex;align-items:center;justify-content:center;text-decoration:none}.rail-brand{width:44px;height:44px;margin-bottom:6px;border-radius:14px;background:radial-gradient(120% 120% at 30% 20%,#ffe3a3,#f0bd52 70%);box-shadow:0 6px 16px -4px rgba(240,189,82,.55),inset 0 1px rgba(255,255,255,.35)}.rail-brand svg{width:20px;height:20px;stroke:#2a2007;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rail-quick{width:40px;height:40px;margin:4px 0 2px;border-radius:12px}.rail-quick svg,.rail-item svg{width:19px;height:19px;stroke:#6d7689;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}.rail-quick:hover svg,.rail-item:hover svg{stroke:#eef0f4}
.rail-divider{position:relative;width:34px;height:1px;margin:10px 0 12px;border-radius:2px;background:linear-gradient(90deg,var(--dot,#4d8dff),rgba(240,189,82,.55) 55%,transparent)}.rail-divider:before{content:'';position:absolute;left:-3px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--dot,#4d8dff);box-shadow:0 0 8px var(--dot,#4d8dff);transform:translateY(-50%)}
.rail-group{display:flex;flex-direction:column;align-items:center;gap:4px}.rail-item{width:44px;height:44px;border-radius:13px;transition:background .15s ease,transform .1s ease}.rail-item:hover{background:rgba(255,255,255,.045)}.rail-item.active{background:radial-gradient(120% 120% at 30% 20%,#ffe3a3,#f0bd52 70%);box-shadow:0 6px 18px -4px rgba(240,189,82,.6),inset 0 1px rgba(255,255,255,.35)}.rail-item.active svg{stroke:#2a2007;stroke-width:2}
.rail-donate{width:44px;height:44px;border:0;border-radius:13px;background:radial-gradient(120% 120% at 30% 20%,#ffe3a3,#f0bd52 70%);color:#2a2007;font-weight:900;cursor:pointer;box-shadow:0 6px 18px -4px rgba(240,189,82,.6),inset 0 1px rgba(255,255,255,.35)}.rail-avatar{position:relative;width:38px;height:38px;margin-top:10px;border:1px solid #2c3446;border-radius:11px;background:linear-gradient(160deg,#2a3245,#171d2b);color:#c7cde0;font-size:13px;font-weight:700}.rail-avatar:after{content:'';position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border:2px solid var(--sidebar-card);border-radius:50%;background:var(--sidebar-teal)}
[data-tip]{position:relative}[data-tip]:before{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;z-index:100;transform:translateY(-50%) translateX(-4px);padding:6px 10px;border:1px solid #2c3446;border-radius:8px;background:#1a2130;color:#dbe1ee;box-shadow:0 8px 20px rgba(0,0,0,.4);font-size:12px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}[data-tip]:hover:before{opacity:1;transform:translateY(-50%) translateX(0)}
@media(max-width:760px){.app-shell.sidebar-collapsed>.sidebar{width:84px!important;flex-basis:84px!important;padding:16px 0 20px!important}.app-shell.sidebar-collapsed>.page{max-width:calc(100% - 84px)!important}}

/* Exact geometry of navigation-ready.html. */
.app-shell{max-width:none!important;padding:40px 26px!important;gap:48px!important;align-items:flex-start!important}.app-shell>.sidebar:not(.is-collapsed){width:304px!important;flex:0 0 304px!important;min-height:calc(100vh - 144px)!important;padding:0!important;border:0!important;background:transparent!important}.app-shell>.sidebar:not(.is-collapsed) .full-mode{gap:24px!important}.app-shell>.sidebar:not(.is-collapsed) .sidebar-title{margin:0 2px!important}.app-shell>.sidebar:not(.is-collapsed) .side-nav{gap:18px!important}.app-shell>.sidebar:not(.is-collapsed) .side-nav+.side-nav{gap:16px!important}.app-shell>.sidebar:not(.is-collapsed) .nav-section{margin:0!important}.app-shell>.page{min-width:0!important;margin:0!important;max-width:none!important}
.app-shell>.sidebar:not(.is-collapsed) [data-portal-sidebar-menu]>.nav-section+.nav-section,.app-shell>.sidebar:not(.is-collapsed) [data-roleplays-sidebar-menu]>.nav-section+.nav-section{margin-top:16px!important}
@media(max-width:760px){.app-shell{padding:18px 12px!important;gap:18px!important}.app-shell>.sidebar:not(.is-collapsed){width:304px!important;flex-basis:304px!important;padding:0!important}}

/* The new two-state sidebar is part of the page layout on every viewport.
   Neutralize the legacy mobile off-canvas transform from portal-overrides.css. */
@media(max-width:760px){
  .app-shell>.sidebar,
  .app-shell.sidebar-collapsed>.sidebar{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    overflow:visible!important;
    border-right:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .app-shell.sidebar-collapsed>.sidebar{
    width:84px!important;
    flex:0 0 84px!important;
    padding:16px 0 20px!important;
  }
}

/* Reference lock: these values are copied from navigation-ready.html. */
:root{--card:#111318;--card-border:#20232b;--card-hairline:rgba(255,255,255,.035);--gold:#f0bd52;--gold-soft:#ffe3a3;--gold-deep:#2a2007;--gold-glow:rgba(240,189,82,.35);--teal:#3fe0c5;--teal-deep:#0d2b26;--text:#eef0f4;--muted:#7d8291;--link:#c2c5ce;--icon:#6d7689;--font-display:'Space Grotesk',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
.app-shell{display:flex!important;padding:40px!important;gap:48px!important;align-items:flex-start!important;max-width:none!important;margin:0!important}
.app-shell>.sidebar,.app-shell>.sidebar:not(.is-collapsed),.app-shell.sidebar-collapsed>.sidebar{position:relative!important;inset:auto!important;width:304px!important;flex:0 0 304px!important;min-height:0!important;padding:0!important;overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;transition:width .32s var(--ease)!important}
.app-shell>.sidebar.is-collapsed,.app-shell.sidebar-collapsed>.sidebar{width:84px!important;flex:0 0 84px!important}
.full-mode{display:flex!important;flex-direction:column!important;gap:24px!important;min-width:0!important;opacity:1!important}.sidebar.is-collapsed .full-mode{display:none!important}.sidebar:not(.is-collapsed) .rail-mode{display:none!important}
.sidebar-title{position:static!important;margin:0 2px!important;padding:0!important;color:var(--muted)!important;font-family:var(--font-display)!important;font-size:11.5px!important;font-weight:600!important;letter-spacing:.16em!important;text-transform:uppercase!important}.sidebar-title:after{display:none!important;content:none!important}
.pulse-rule{display:block!important;width:100%!important;height:14px!important;margin:2px 0 0!important;color:var(--gold)!important;overflow:visible!important}.pulse-rule path{fill:none!important;stroke:currentColor!important;stroke-width:1.4!important;stroke-linecap:round!important;stroke-linejoin:round!important;stroke-dasharray:340!important;stroke-dashoffset:340;filter:drop-shadow(0 0 4px var(--gold-glow))!important;animation:pulse-rule-draw .82s var(--ease) forwards,pulse-rule-breathe 2.8s ease-in-out .9s infinite!important}
@keyframes pulse-rule-draw{0%{stroke-dashoffset:340;opacity:.25}60%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes pulse-rule-breathe{0%,100%{filter:drop-shadow(0 0 3px rgba(240,189,82,.28))}50%{filter:drop-shadow(0 0 7px rgba(240,189,82,.58))}}
.side-nav{display:flex!important;flex-direction:column!important;gap:18px!important;overflow:visible!important}.side-nav+.side-nav{gap:16px!important}
.roleplays-menu-toggle{position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;padding:13px 18px 13px 48px!important;border:0!important;border-radius:13px!important;background:linear-gradient(160deg,var(--gold-soft),var(--gold) 78%)!important;color:var(--gold-deep)!important;font-family:var(--font-display)!important;font-size:14.5px!important;font-weight:600!important;box-shadow:0 10px 24px -10px rgba(240,189,82,.55),inset 0 1px 0 rgba(255,255,255,.4)!important}.roleplays-menu-toggle:before{left:11px!important;width:27px!important;height:27px!important;font-size:12.5px!important}.roleplays-sidebar-search{display:flex!important;flex-direction:column!important;gap:8px!important}.roleplays-sidebar-search-main{margin-top:16px!important}.roleplays-sidebar-search span{padding:0 2px!important;color:var(--muted)!important;font-family:var(--font-display)!important;font-size:11px!important;font-weight:600!important;letter-spacing:.1em!important}.roleplays-sidebar-search input{padding:11px 14px!important;border:1px solid var(--card-border)!important;border-radius:9px!important;background:var(--card)!important;color:var(--text)!important;font:14px var(--font-body)!important}.roleplays-sidebar-search+ a.roleplays-nav-link{margin-top:14px!important}a.roleplays-nav-link:not(.roleplays-menu-toggle){display:block!important;padding:2px 4px!important;color:var(--link)!important;font-size:14.5px!important;font-weight:600!important}
details.nav-section{margin:0!important;padding:17px 15px 13px!important;border:1px solid var(--card-border)!important;border-radius:18px!important;background:linear-gradient(180deg,var(--card),#0d0e12)!important;box-shadow:inset 0 1px 0 var(--card-hairline),0 12px 26px -18px rgba(0,0,0,.8)!important}details.nav-section summary{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:0!important;padding:0!important;background:transparent!important;color:var(--text)!important;font-family:var(--font-display)!important;font-size:12px!important;font-weight:600!important;letter-spacing:.08em!important}details.nav-section summary:after{display:none!important;content:none!important}
.nav-section-links{display:flex!important;flex-direction:column!important;gap:0!important;padding:11px 0 0!important}.nav-section-links a{display:block!important;min-height:0!important;margin:1px 0!important;padding:9px 12px 9px 16px!important;border-radius:9px!important;color:var(--link)!important;font-size:14.5px!important;font-weight:500!important}.nav-section-links a:hover{padding-left:19px!important;background:rgba(255,255,255,.035)!important;color:var(--text)!important}.nav-section-links a.active{background:linear-gradient(90deg,rgba(240,189,82,.15),rgba(240,189,82,.02) 80%)!important;color:var(--gold-soft)!important;font-weight:700!important}
.toggle-badge{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 26px!important;width:26px!important;height:26px!important;border-radius:50%!important;background:radial-gradient(120% 130% at 30% 20%,#4a3712,transparent 60%),linear-gradient(155deg,#2d2209,#17130a 75%)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.12),inset 0 -2px 4px rgba(0,0,0,.5),0 0 0 1px rgba(240,189,82,.16)!important}.toggle-badge svg{position:relative!important;z-index:1!important;width:11px!important;height:11px!important;stroke:var(--gold)!important;stroke-width:2.4!important;fill:none!important;stroke-linecap:round!important;stroke-linejoin:round!important;transition:transform .3s var(--ease)!important}details:not([open]) .toggle-badge svg{transform:rotate(180deg)!important}
.sidebar-donate-button{display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;margin-top:4px!important;padding:14px 18px!important;border:0!important;border-radius:13px!important;background:linear-gradient(160deg,var(--gold-soft),var(--gold) 78%)!important;box-shadow:0 10px 24px -10px rgba(240,189,82,.55),inset 0 1px 0 rgba(255,255,255,.4)!important}.sidebar-donate-button span{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 34px!important;width:34px!important;height:34px!important;border-radius:11px!important;background:var(--gold-deep)!important;color:var(--gold)!important;font-size:16px!important}.sidebar-donate-button strong{color:var(--gold-deep)!important;font-family:var(--font-display)!important;font-size:13.5px!important;font-weight:600!important;line-height:1.3!important;text-align:left!important}
.sidebar-user{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-top:2px!important;padding:12px!important;border:1px solid rgba(63,224,197,.16)!important;border-radius:13px!important;background:linear-gradient(135deg,rgba(63,224,197,.08),rgba(17,19,24,.88) 58%)!important}.sidebar-user .who{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important}.status-dot{flex:0 0 8px!important;width:8px!important;height:8px!important;border-radius:50%!important;background:var(--teal)!important;box-shadow:0 0 0 3px var(--teal-deep),0 0 10px var(--teal)!important}.sidebar-user .nickname-watcher{max-width:170px!important;margin:0!important;color:var(--text)!important;font-family:var(--font-display)!important;font-size:13.5px!important;font-weight:600!important}.sidebar-user form{margin:0!important}.sidebar-user .link-button{padding:6px 9px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:8px!important;background:rgba(255,255,255,.04)!important;color:#aeb5c2!important;font-size:11.5px!important}
.full-mode>.sidebar-toggle{position:absolute!important;z-index:5!important;top:0!important;right:-14px!important;left:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;padding:0!important;border:1px solid var(--card-border)!important;border-radius:50%!important;background:var(--card)!important;color:var(--muted)!important;font:14px/1 var(--font-body)!important;box-shadow:none!important;transform:none!important}
.rail-mode{display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;width:84px!important;min-height:0!important;padding:16px 0 18px!important;border:1px solid var(--card-border)!important;border-radius:20px!important;background:var(--card)!important;box-shadow:0 20px 60px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.02)!important}.rail-expand{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;margin:0 0 10px!important;padding:0!important;border:1px solid var(--card-border)!important;border-radius:50%!important;background:#0d0e12!important;color:var(--muted)!important;font-size:13px!important}.rail-brand,.rail-switch{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 44px!important;width:44px!important;height:44px!important;border:0!important;border-radius:14px!important;background:radial-gradient(120% 120% at 30% 20%,var(--gold-soft),var(--gold) 70%)!important;box-shadow:0 6px 16px -4px rgba(240,189,82,.55),inset 0 1px 0 rgba(255,255,255,.35)!important}.rail-brand{margin-bottom:6px!important}.rail-switch{opacity:.88!important;transform:scale(.93)!important}.rail-brand svg,.rail-switch svg{width:20px!important;height:20px!important;stroke:var(--gold-deep)!important;stroke-width:2!important;fill:none!important}.rail-quick{display:flex!important;width:40px!important;height:40px!important;margin:4px 0 2px!important;border:0!important;border-radius:12px!important;background:transparent!important}.rail-divider{width:34px!important;height:1px!important;margin:10px 0 12px!important}.rail-group{display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important}.rail-item{display:flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;padding:0!important;border:0!important;border-radius:13px!important;background:transparent!important}.rail-item.active{background:radial-gradient(120% 120% at 30% 20%,var(--gold-soft),var(--gold) 70%)!important}.rail-quick svg,.rail-item svg{width:19px!important;height:19px!important;stroke:var(--icon)!important;stroke-width:1.8!important;fill:none!important}.rail-item.active svg{stroke:var(--gold-deep)!important;stroke-width:2!important}.rail-donate{display:flex!important;width:44px!important;height:44px!important;padding:0!important;border:0!important;border-radius:13px!important;background:radial-gradient(120% 120% at 30% 20%,var(--gold-soft),var(--gold) 70%)!important}.rail-donate svg{width:19px!important;height:19px!important;stroke:var(--gold-deep)!important;stroke-width:2.1!important;fill:none!important}.rail-avatar{display:flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;margin-top:10px!important;border:1px solid #2c3446!important;border-radius:11px!important;background:linear-gradient(160deg,#2a3245,#171d2b)!important;color:#c7cde0!important;font-size:13px!important;font-weight:700!important}
.app-shell.sidebar-collapsed>.page{max-width:none!important}
@media(max-width:760px){.app-shell{display:flex!important;padding:40px!important;gap:48px!important}.app-shell>.sidebar,.app-shell.sidebar-collapsed>.sidebar{position:relative!important;inset:auto!important;transform:none!important}.topbar{padding-left:12px!important}}

/* Mutually exclusive portal/roleplay panels. */
.sidebar-mode-panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.sidebar-mode-panel[hidden],[data-portal-sidebar-menu][hidden]{display:none!important}
.full-mode>:not(.sidebar-toggle):not(.sidebar-user){transition:opacity .16s var(--ease),transform .2s var(--ease),filter .2s var(--ease)}
.full-mode.mode-switching-out>:not(.sidebar-toggle):not(.sidebar-user){opacity:0!important;transform:translateY(7px);filter:blur(2px)}
.full-mode.mode-switching-in>:not(.sidebar-toggle):not(.sidebar-user){animation:sidebar-mode-enter .22s var(--ease) both}
@keyframes sidebar-mode-enter{from{opacity:0;transform:translateY(-7px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.roleplays-sections>.roleplays-menu-toggle{margin-bottom:0!important}.roleplays-sections>.roleplays-sidebar-search{margin:0!important}

/* Golden hover copied from the approved local control. */
.roleplays-menu-toggle{overflow:hidden!important;isolation:isolate;transition:transform .18s var(--ease),background .24s var(--ease),box-shadow .24s var(--ease),filter .24s var(--ease)!important}
.roleplays-menu-toggle span{position:relative;z-index:2;color:rgba(42,32,7,.72)!important;transition:transform .2s var(--ease),color .2s var(--ease)!important}
.roleplays-menu-toggle:after{content:''!important;position:absolute!important;z-index:1!important;top:-20%!important;left:-48%!important;width:34%!important;height:140%!important;background:linear-gradient(110deg,transparent,rgba(255,255,255,.72),transparent)!important;transform:skewX(-18deg)!important;transition:left .58s var(--ease)!important;pointer-events:none!important}
.roleplays-menu-toggle:hover,.roleplays-menu-toggle:focus-visible{transform:translateY(-2px)!important;border-color:transparent!important;background:linear-gradient(155deg,#fff1c2 0%,#ffdc7b 43%,#f0bd52 100%)!important;color:var(--gold-deep)!important;box-shadow:0 16px 34px -10px rgba(240,189,82,.78),0 0 24px rgba(240,189,82,.24),inset 0 1px 0 rgba(255,255,255,.72)!important;filter:saturate(1.08) brightness(1.035)!important}
.roleplays-menu-toggle:hover:after,.roleplays-menu-toggle:focus-visible:after{left:128%!important}
.roleplays-menu-toggle:hover span,.roleplays-menu-toggle:focus-visible span{color:var(--gold-deep)!important;transform:translateX(2px)!important}
.roleplays-menu-toggle:active{transform:translateY(0) scale(.985)!important;box-shadow:0 8px 20px -10px rgba(240,189,82,.6),inset 0 1px 0 rgba(255,255,255,.55)!important}

/* Roleplays is an action, not a second logo. */
.rail-switch{opacity:1!important;transform:scale(.93)!important;border:1px solid rgba(240,189,82,.38)!important;background:linear-gradient(155deg,#191a1f,#101116)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 18px -12px rgba(0,0,0,.9)!important;transition:transform .2s var(--ease),background .22s var(--ease),border-color .22s ease,box-shadow .22s ease!important}
.rail-switch svg{width:21px!important;height:21px!important;stroke:var(--gold)!important;stroke-width:1.65!important;transition:stroke .2s ease,transform .24s var(--ease)!important}
.rail-switch:hover,.rail-switch:focus-visible{transform:scale(1) translateY(-1px)!important;border-color:var(--gold)!important;background:linear-gradient(155deg,var(--gold-soft),var(--gold) 78%)!important;box-shadow:0 10px 24px -8px rgba(240,189,82,.58),inset 0 1px 0 rgba(255,255,255,.5)!important}
.rail-switch:hover svg,.rail-switch:focus-visible svg{stroke:var(--gold-deep)!important;transform:scale(1.05)!important}

/* Polished cross-page navigation: keep server routes, remove the abrupt flash. */
html .page{transition:opacity .14s ease,transform .18s var(--ease),filter .18s ease}
html.is-page-leaving .page{opacity:.28;transform:translateY(5px);filter:blur(1px);pointer-events:none}
html.is-page-leaving:after{content:'';position:fixed;z-index:1000;top:56px;left:0;width:32%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-soft));box-shadow:0 0 10px var(--gold-glow);animation:portal-route-progress .32s ease-out forwards}
@keyframes portal-route-progress{from{width:8%;opacity:.4}to{width:76%;opacity:1}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:portal-page-out .14s ease both}
::view-transition-new(root){animation:portal-page-in .22s var(--ease) both}
@keyframes portal-page-out{to{opacity:.35}}
@keyframes portal-page-in{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Mobile application shell. Kept last so the desktop-reference rules above
   cannot force the 304px navigation rail into a phone viewport. */
@media(max-width:760px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body.sidebar-mobile-open{overflow:hidden!important}
  .topbar{position:sticky!important;top:0!important;z-index:180!important;width:100%!important;height:56px!important;min-height:56px!important;padding:0 12px!important}
  .app-shell,.app-shell.sidebar-collapsed{display:block!important;width:100%!important;max-width:100%!important;min-height:calc(100vh - 56px)!important;margin:0!important;padding:0!important;gap:0!important}
  .app-shell>.page,.app-shell.sidebar-collapsed>.page,.app-shell:not(.sidebar-collapsed)>.page{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:24px 16px 52px!important}
  .app-shell>.page>*{max-width:100%}
  .app-shell:not(.mobile-menu-open):before,.login-page .app-shell:before{content:none!important;display:none!important;pointer-events:none!important}
  .app-shell.mobile-menu-open:before{content:''!important;position:fixed!important;z-index:200!important;inset:0!important;background:rgba(1,3,6,.72)!important;backdrop-filter:blur(2px)!important}

  .app-shell>.sidebar:not(.is-collapsed),
  .app-shell.sidebar-collapsed>.sidebar:not(.is-collapsed){position:fixed!important;z-index:210!important;inset:0 auto 0 0!important;display:block!important;width:min(88vw,340px)!important;max-width:340px!important;height:100dvh!important;min-height:100vh!important;max-height:none!important;flex:none!important;padding:max(24px,env(safe-area-inset-top)) 16px max(32px,env(safe-area-inset-bottom))!important;overflow-x:hidden!important;overflow-y:auto!important;border:0!important;border-right:1px solid var(--card-border)!important;border-radius:0!important;background:radial-gradient(360px 220px at 0 0,rgba(240,189,82,.1),transparent 65%),#080a0d!important;box-shadow:20px 0 48px rgba(0,0,0,.58)!important;transform:none!important;overscroll-behavior:contain}
  .app-shell>.sidebar:not(.is-collapsed) .full-mode{display:flex!important;width:100%!important;gap:20px!important}
  .app-shell>.sidebar:not(.is-collapsed) .rail-mode{display:none!important}
  .app-shell>.sidebar:not(.is-collapsed) .sidebar-title{margin:0 42px 0 2px!important}
  .app-shell>.sidebar:not(.is-collapsed) .pulse-rule{width:100%!important;height:14px!important;margin:0!important}
  .app-shell>.sidebar:not(.is-collapsed) .full-mode>.sidebar-toggle{position:absolute!important;top:15px!important;right:14px!important;left:auto!important;width:40px!important;height:40px!important;border-color:#2b3440!important;background:#11161d!important;color:transparent!important}
  .app-shell>.sidebar:not(.is-collapsed) .full-mode>.sidebar-toggle:before{content:'\00d7';color:var(--sidebar-gold-soft);font:26px/1 Arial,sans-serif}
  .app-shell>.sidebar:not(.is-collapsed) .sidebar-user{display:none!important}
  .app-shell>.sidebar:not(.is-collapsed){scrollbar-width:thin;scrollbar-color:#39404a transparent}
  .app-shell>.sidebar:not(.is-collapsed)::-webkit-scrollbar{width:5px}
  .app-shell>.sidebar:not(.is-collapsed)::-webkit-scrollbar-track{background:transparent}
  .app-shell>.sidebar:not(.is-collapsed)::-webkit-scrollbar-thumb{border-radius:99px;background:#39404a}

  .app-shell>.sidebar.is-collapsed,
  .app-shell.sidebar-collapsed>.sidebar.is-collapsed{position:fixed!important;z-index:190!important;inset:6px auto auto 52px!important;display:block!important;width:44px!important;height:44px!important;min-height:0!important;max-height:44px!important;flex:none!important;padding:0!important;overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;transform:none!important;transition:opacity .18s ease,visibility .18s ease,transform .24s var(--ease)!important}
  body.mobile-nav-hidden .app-shell>.sidebar.is-collapsed{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-18px)!important}
  .sidebar.is-collapsed .full-mode{display:none!important}
  .sidebar.is-collapsed .rail-mode{display:block!important;width:44px!important;height:44px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:13px!important;background:transparent!important;box-shadow:none!important}
  .sidebar.is-collapsed .rail-mode>:not(.rail-expand){display:none!important}
  .sidebar.is-collapsed .rail-expand{display:grid!important;width:44px!important;height:44px!important;margin:0!important;place-items:center!important;border:1px solid rgba(240,189,82,.38)!important;border-radius:13px!important;background:linear-gradient(155deg,#1b180d,#101216)!important;color:transparent!important;box-shadow:0 7px 20px rgba(0,0,0,.42),0 0 15px rgba(240,189,82,.09)!important}
  .sidebar.is-collapsed .rail-expand:before{content:'\2630';color:var(--sidebar-gold-soft);font:20px/1 Arial,sans-serif}

  .cards,.stats,.profile-layout,.profile-details-grid,.developer-resource-grid,.okb-home-grid,.home-actions-grid{grid-template-columns:1fr!important}
  .table-wrap,.score-wrap,.user-admin-list,.internship-data-panel{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  img,video,canvas{max-width:100%!important;height:auto}
  input,select,textarea,button{max-width:100%;min-width:0}
  .account-menu-popover.online-popover{position:fixed!important;top:56px!important;right:8px!important;left:8px!important;width:auto!important;min-width:0!important;max-width:none!important;max-height:calc(100dvh - 64px)!important;overflow-y:auto!important}
  .news-modal-window{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important}
}