/* Mtracker.no shared application shell: identity, navigation and signal feed. */
:root{
  --shell-bg:#0b0f0d;
  --shell-panel:#121714;
  --shell-panel-2:#171d1a;
  --shell-line:rgba(225,239,230,.105);
  --shell-line-strong:rgba(225,239,230,.2);
  --shell-text:#eff5f0;
  --shell-muted:#89968f;
  --shell-green:#61dda0;
  --shell-violet:#b895ff;
  --shell-red:#ff6f6f;
  --shell-blue:#79aefa;
  --shell-amber:#f0c85b;
  --shell-cyan:#65d3e2;
}

/* Left navigation */
.side{
  width:202px;
  flex:0 0 202px;
  padding:9px 8px 8px;
  border-right:1px solid var(--shell-line);
  background:
    radial-gradient(circle at -18% -4%,rgba(97,221,160,.08),transparent 25%),
    linear-gradient(180deg,#111613 0%,#0d110f 52%,#090c0b 100%);
  box-shadow:12px 0 34px rgba(0,0,0,.16);
}
.brand{
  min-height:58px;
  padding:7px 6px;
  overflow:visible;
  border:0 !important;
  border-bottom:1px solid var(--shell-line) !important;
  border-radius:0 !important;
  background:transparent !important;
}
.brand::after{display:none}
.brandHome{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto;color:inherit;text-decoration:none}
.brandHome:hover{text-decoration:none}
.brandMark{position:relative;display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px}
.brandMark::after{content:"";position:absolute;inset:7px;border-radius:50%;background:rgba(97,221,160,.13);filter:blur(8px);pointer-events:none}
.brandMark img{position:relative;z-index:1;display:block;width:36px;height:36px}
.brandTxt{min-width:0}
.brandLogo{display:block;color:var(--shell-text);font:780 15px/1.05 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.035em;text-shadow:none}
.brandLogo::first-letter{color:inherit}
.brandDomain{color:var(--shell-green);font-weight:720}
.brandSub{display:block;margin-top:4px;color:#738078 !important;font:750 7.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace !important;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}

.nav[data-nav-accordion]{margin-top:7px;padding:0 2px 4px 0;gap:1px;scrollbar-width:none}
.nav[data-nav-accordion]::-webkit-scrollbar{display:none}
.nav[data-nav-accordion] .navSection{margin:0;padding:7px 0 4px;border-top:1px solid rgba(225,239,230,.065)}
.nav[data-nav-accordion] .navSection:first-child{padding-top:3px}
.nav[data-nav-accordion] button.navGroup{
  min-height:23px;
  padding:3px 7px 4px;
  border-radius:7px;
  color:#68756e;
  font:800 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.14em;
}
.nav[data-nav-accordion] button.navGroup:hover{background:rgba(255,255,255,.025) !important;color:#a6b3ac}
.nav[data-nav-accordion] .navChevron{border-left-width:3px;border-right-width:3px;border-top-width:4px;opacity:.55}
.nav[data-nav-accordion] .navSectionBody{gap:2px;padding-top:2px}
.nav[data-nav-accordion] .navItem{
  position:relative;
  min-height:27px;
  gap:8px;
  padding:5px 8px;
  border:1px solid transparent;
  border-radius:8px;
  color:#a1ada6;
  font:620 10px/1.15 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease;
}
.nav[data-nav-accordion] .navItem .dot{width:4px;height:4px;flex:0 0 4px;border-radius:50%;background:#4d5852;box-shadow:none;transition:.14s ease}
.nav[data-nav-accordion] .navItem:hover{border-color:rgba(225,239,230,.08);background:rgba(255,255,255,.025);color:var(--shell-text);transform:translateX(1px);text-decoration:none}
.nav[data-nav-accordion] .navItem.on{border-color:rgba(97,221,160,.2);background:linear-gradient(90deg,rgba(97,221,160,.105),rgba(97,221,160,.025));color:#effaf3;box-shadow:inset 2px 0 0 var(--shell-green)}
.nav[data-nav-accordion] .navItem.on .dot{background:var(--shell-green);box-shadow:0 0 8px rgba(97,221,160,.55)}
.nav[data-nav-accordion] .navSection[data-nav-section="crew-system"] .navItem.on{border-color:rgba(255,111,111,.2);background:linear-gradient(90deg,rgba(255,111,111,.105),rgba(255,111,111,.02));box-shadow:inset 2px 0 0 var(--shell-red)}
.nav[data-nav-accordion] .navSection[data-nav-section="crew-system"] .navItem.on .dot{background:var(--shell-red);box-shadow:0 0 8px rgba(255,111,111,.5)}
.nav[data-nav-accordion] .navSection[data-nav-section="moderator"] .navItem.on,.nav[data-nav-accordion] .navSection[data-nav-section="admin"] .navItem.on{border-color:rgba(184,149,255,.22);background:linear-gradient(90deg,rgba(184,149,255,.11),rgba(184,149,255,.02));box-shadow:inset 2px 0 0 var(--shell-violet)}
.nav[data-nav-accordion] .navSection[data-nav-section="moderator"] .navItem.on .dot,.nav[data-nav-accordion] .navSection[data-nav-section="admin"] .navItem.on .dot{background:var(--shell-violet);box-shadow:0 0 8px rgba(184,149,255,.5)}

.sideFoot{padding:8px 2px 0;border-top:1px solid var(--shell-line)}
.userBox{padding:8px 9px;border-color:var(--shell-line);border-radius:9px;background:rgba(255,255,255,.022)}
.userName{color:var(--shell-text);font:720 10px/1.2 Inter,ui-sans-serif,system-ui,sans-serif}
.userRole{margin-top:2px;color:var(--shell-violet);font:750 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.09em}
.sideBtns{margin-top:6px}.sideBtns .btn{width:100%;min-height:27px;border-color:var(--shell-line);color:var(--shell-muted);font-size:9px}
.sideClose{border-color:var(--shell-line);border-radius:9px;background:rgba(0,0,0,.22);color:var(--shell-muted)}
.sideClose:hover{border-color:rgba(255,111,111,.35);background:rgba(255,111,111,.07);color:var(--shell-text)}

/* Topbar */
.topbar{height:34px;padding:0 9px;border-bottom-color:var(--shell-line);background:rgba(10,14,12,.92);backdrop-filter:blur(12px)}
.crumb{color:#9aa79f;font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
#btnFeed{position:relative;display:none;gap:6px;min-width:51px;border-color:var(--shell-line);border-radius:9px !important;background:rgba(255,255,255,.025);color:#aebbb3}
#btnFeed::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--shell-green);box-shadow:0 0 8px rgba(97,221,160,.6)}

/* Live signal feed */
.feed{
  width:326px;
  flex:0 0 326px;
  border-left:1px solid var(--shell-line);
  background:
    radial-gradient(circle at 115% -8%,rgba(184,149,255,.08),transparent 24%),
    linear-gradient(180deg,#101512,#0b0f0d);
  box-shadow:-14px 0 36px rgba(0,0,0,.13);
}
.feedHead{min-height:68px;padding:12px 12px 10px;border-bottom-color:var(--shell-line);background:transparent}
.feedIdentity{min-width:0}
.feedKicker{display:flex;align-items:center;gap:6px;color:var(--shell-green);font:800 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
.feedLiveDot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--shell-green);box-shadow:0 0 9px rgba(97,221,160,.65);animation:feedPulse 2.2s ease-in-out infinite}
.feedTitle{margin-top:6px;color:var(--shell-text);font:780 16px/1 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.025em}
.feedSub{margin-top:5px;color:#748078;font:500 9px/1.25 Inter,ui-sans-serif,system-ui,sans-serif}
.feedHeadActions{display:flex;align-items:center;gap:6px}
.feedLiveState{padding:4px 6px;border:1px solid rgba(97,221,160,.18);border-radius:999px;background:rgba(97,221,160,.05);color:#9cedc2;font:750 7.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.08em}
#btnFeedClose{display:none;border-color:var(--shell-line);border-radius:9px !important;background:rgba(0,0,0,.2);color:var(--shell-muted)}

.feedTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:8px 10px;overflow:visible;border-bottom-color:var(--shell-line)}
.feedTabs .tab{min-width:0;min-height:25px;padding:5px 3px;border-color:var(--shell-line);border-radius:8px !important;background:rgba(255,255,255,.018);color:#7f8b84;font:680 7.5px/1 Inter,ui-sans-serif,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feedTabs .tab:hover{border-color:var(--shell-line-strong);color:#cbd5cf}
.feedTabs .tab.on{border-color:rgba(97,221,160,.28);background:rgba(97,221,160,.08);color:#baf1d3;box-shadow:inset 0 -1px 0 rgba(97,221,160,.42)}

.feedList{flex:1 1 auto;min-height:0;padding:9px 9px 18px;scrollbar-width:thin;scrollbar-color:rgba(225,239,230,.14) transparent}
.feedItem{
  --feed-accent:#7e8a83;
  position:relative;
  margin-bottom:7px;
  padding:9px 10px 9px 12px;
  overflow:hidden;
  border:1px solid var(--shell-line);
  border-radius:11px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
  box-shadow:none;
  cursor:default;
  animation:feedArrive .22s ease-out both;
  transition:border-color .14s ease,background .14s ease,transform .14s ease;
}
.feedItem::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--feed-accent);opacity:.8}
.feedItem:hover{border-color:var(--shell-line-strong);background:rgba(255,255,255,.036);transform:translateX(-1px)}
.feedItem.isLink{cursor:pointer}
.feedItem.isLink:focus-visible{outline:2px solid rgba(97,221,160,.45);outline-offset:2px}
.feedItemTop{min-height:12px;align-items:center}
.feedType{gap:6px;color:var(--feed-accent);font:780 7.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.13em}
.feedDot{width:5px;height:5px;background:var(--feed-accent) !important;box-shadow:0 0 7px color-mix(in srgb,var(--feed-accent) 60%,transparent)}
.feedTime{color:#68756e;font-size:8.5px}
.feedMsg{margin-top:7px;color:#e7eee9;font:680 10px/1.35 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.feedMeta{margin-top:7px;gap:4px}
.feedChip{min-height:18px;padding:3px 6px;border-color:var(--shell-line);border-radius:6px;background:rgba(0,0,0,.19);color:#95a29b;font-size:8.5px}
.feedChip.crew{border-color:rgba(255,111,111,.22);color:#f1a0a0}.feedChip.city{border-color:rgba(240,200,91,.22);color:#dac781}
.feedState.on{border-color:rgba(97,221,160,.3);background:rgba(97,221,160,.07);color:#a8eac7}.feedState.off{border-color:rgba(255,111,111,.3);background:rgba(255,111,111,.06);color:#f3a4a4}
.feedKind-players{--feed-accent:var(--shell-blue)}
.feedKind-crews{--feed-accent:var(--shell-red)}
.feedKind-cities{--feed-accent:var(--shell-amber)}
.feedKind-graveyard{--feed-accent:#bcc5c0}
.feedKind-life{--feed-accent:var(--shell-green)}
.feedKind-ug{--feed-accent:var(--shell-violet)}
.feedEmpty{margin:8px 0;padding:18px 12px;border:1px dashed var(--shell-line);border-radius:11px;color:#6f7b74;text-align:center;font-size:9px}

.mobileBarLogo{font:740 11px/1 Inter,ui-sans-serif,system-ui,sans-serif;color:var(--shell-text)}
.mobileBarLogo:hover{text-decoration:none}
.mobileLogoMark{display:grid;place-items:center;width:22px;height:22px}
.mobileLogoMark img{display:block;width:22px;height:22px}
.mobileBarDomain{color:var(--shell-green)}

@keyframes feedPulse{0%,100%{opacity:.55;box-shadow:0 0 4px rgba(97,221,160,.35)}50%{opacity:1;box-shadow:0 0 11px rgba(97,221,160,.75)}}
@keyframes feedArrive{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}

html[data-theme="light"] .side{background:linear-gradient(180deg,#f6f9f6,#edf2ee);border-right-color:rgba(22,35,28,.13)}
html[data-theme="light"] .brandLogo,html[data-theme="light"] .feedTitle{color:#172019}
html[data-theme="light"] .feed{background:linear-gradient(180deg,#f4f7f4,#e9eeea);border-left-color:rgba(22,35,28,.13)}
html[data-theme="light"] .feedItem{background:rgba(255,255,255,.68);border-color:rgba(22,35,28,.12)}
html[data-theme="light"] .feedMsg{color:#1d2720}
html[data-theme="light"] .topbar{background:rgba(246,249,246,.92)}

@media(max-width:1200px){
  .side{width:188px;flex-basis:188px}
  .feed{width:310px;flex-basis:310px}
}
@media(max-width:1040px){
  #btnFeed{display:inline-flex}
  #btnFeedClose{display:inline-flex}
  .feed{display:none;position:fixed;right:0;top:0;z-index:55;width:min(92vw,380px);height:100dvh}
  .feed.open{display:flex}
}
@media(max-width:900px){
  body.feedOpen{overflow:hidden}
  body.feedOpen .sideScrim{display:block;visibility:visible;opacity:1}
  .side{width:min(78vw,286px) !important;max-width:286px;padding:9px 8px}
  .brand{min-height:60px}
  .feed{bottom:42px;height:auto !important;max-height:calc(100dvh - 42px)}
}
@media(max-width:460px){
  .feed{width:100vw !important;max-width:none;bottom:40px;border-left:0}
  .feedHead{padding:11px 12px}
  .feedTabs{padding:7px 9px}
}
@media(prefers-reduced-motion:reduce){.feedLiveDot,.feedItem{animation:none}.nav[data-nav-accordion] .navItem,.feedItem{transition:none}}