:root{
  --bg-lowest: 18 18 20;
  --bg-base:   26 26 30;
  --bg-low:    32 32 36;
  --bg-raised: 39 39 44;

  --text-normal: 219 222 225;
  --text-head:   242 243 245;
  --text-muted:  150 151 158;
  --text-inter:  181 186 193;

  --brand: 88 101 242;
  --brand-hover: 70 84 192;
  --danger: 218 62 68;
  --positive: 61 158 96;

  --ssr:  253 184 51;
  --sr:   180 115 255;
  --rare: 88 101 242;
  --norm: 150 151 158;
  --hp:   218 62 68;
  --mp:   88 101 242;

  --line: 151 151 159;

  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px;

  --rail-w:72px;
  --sidebar-w:240px;
  --members-w:264px;
  --topbar-h:48px;
  --row-h:32px;

  color-scheme: dark;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:rgb(var(--bg-lowest));
  color:rgb(var(--text-normal));
  font-family:"Noto Sans","gg sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.25;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
[un-cloak]{ visibility:hidden }
img{ display:block; max-width:100% }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
input{ font:inherit }
svg.lucide{ width:20px; height:20px; stroke-width:2; flex-shrink:0 }
.row{ display:flex; align-items:center }

.app{
  display:grid;
  grid-template-columns:var(--rail-w) var(--sidebar-w) minmax(0,1fr) var(--members-w);
  height:100vh;
}

.rail{
  background:rgb(var(--bg-lowest));
  display:flex; flex-direction:column; align-items:center;
  padding:12px 0; gap:8px; overflow:hidden;
}
.rail-item{ position:relative; display:flex; justify-content:center; width:100% }
.rail-sep{ width:32px; height:2px; border-radius:1px; background:rgb(var(--line) / .18); margin:4px 0 }
.pill{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:8px; border-radius:0 4px 4px 0;
  background:rgb(var(--text-head)); opacity:0;
  transition:height .15s ease, opacity .15s ease;
}
.rail-item.is-active .pill{ opacity:1; height:40px }
.rail-item:hover .pill{ opacity:1; height:20px }
.rail-item.is-active:hover .pill{ height:40px }
.guild{
  width:48px; height:48px; border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  background:rgb(var(--bg-low)); color:rgb(var(--text-inter));
  transition:border-radius .15s ease, background .15s ease, color .15s ease;
  overflow:hidden;
}
.guild:hover{ border-radius:var(--r-md); background:rgb(var(--brand)); color:#fff }
.guild-active{ border-radius:var(--r-md) }
.rail-item.is-active .guild{ border-radius:var(--r-md); background:rgb(var(--brand)); color:#fff }

.sidebar{
  background:rgb(var(--bg-low));
  display:flex; flex-direction:column; min-height:0;
}
.sb-head{
  height:var(--topbar-h); flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; cursor:default;
  box-shadow:0 1px 0 rgb(0 0 0 / .2), 0 1px 2px rgb(0 0 0 / .06);
}
.sb-title{ font-size:15px; font-weight:600; color:rgb(var(--text-head)) }
.sb-scroll{ flex:1; overflow-y:auto; overscroll-behavior:contain; min-height:0 }
.sb-foot{
  flex-shrink:0; height:58px; padding:0 8px; gap:8px;
  display:flex; align-items:center;
  background:rgb(var(--bg-lowest) / .6);
}

.sr-only{
  position:absolute;
  inline-size:1px; block-size:1px;
  margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

.search{ position:relative; display:flex; align-items:center }
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration{ appearance:none }
.search input{
  flex:1; min-width:0; min-height:32px; border-radius:var(--r-sm);
  background:rgb(0 0 0 / .3); border:0; color:rgb(var(--text-normal));
  padding-inline:30px 28px; font-size:14px; outline:0;
}
.search input::placeholder{ color:rgb(var(--text-muted)) }
.search input:focus{ box-shadow:0 0 0 1px rgb(var(--brand)) }
.search > svg{ position:absolute; left:8px; width:16px; height:16px; color:rgb(var(--text-muted)); pointer-events:none }
.q-clear{ position:absolute; right:6px; display:flex; color:rgb(var(--text-muted)) }
.q-clear svg{ width:14px; height:14px }
.q-clear:hover{ color:rgb(var(--text-head)) }

.cat{
  display:flex; align-items:center;
  height:18px; padding:18px 8px 4px 10px; box-sizing:content-box;
  font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:rgb(var(--text-muted));
}

.navrow{
  display:flex; align-items:center; gap:6px; align-self:stretch;
  min-height:var(--row-h); padding:4px 8px; border-radius:var(--r-sm);
  color:rgb(var(--text-inter)); font-size:15px; font-weight:500;
  cursor:pointer; user-select:none; transition:background .1s ease, color .1s ease;
  text-align:left;
}
.navrow:hover{ background:rgb(255 255 255 / .04); color:rgb(var(--text-head)) }
.navrow.is-on{ background:rgb(255 255 255 / .08); color:rgb(var(--text-head)) }
.navrow .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0 }

.cat-toggle{
  display:flex; align-items:center; gap:3px;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:inherit; cursor:pointer; padding:0;
  transition:color .1s ease;
}
.cat-toggle:hover{ color:rgb(var(--text-head)) }
.cat-toggle:focus-visible{ outline:2px solid rgb(var(--brand)); outline-offset:2px; border-radius:2px }
.cat-toggle svg{ inline-size:12px; block-size:12px; transition:transform .1s ease }
.cat-toggle[aria-expanded='false'] svg{ transform:rotate(-90deg) }

.cat-state,.cat-action{
  margin-inline-start:auto; font-size:11px; font-weight:600;
  letter-spacing:0; text-transform:none;
}
.cat-state{ color:rgb(var(--text-muted) / .7) }
.cat-state[hidden],.cat-action[hidden]{ display:none }
.cat-action{ color:rgb(var(--brand)); cursor:pointer }
.cat-action:hover{ text-decoration:underline }
.cat-action:focus-visible{ outline:2px solid rgb(var(--brand)); outline-offset:2px; border-radius:2px }

.cbrow{ gap:12px }
.cb{
  inline-size:20px; block-size:20px; flex-shrink:0;
  border-radius:var(--r-xs);
  border:1px solid rgb(var(--line) / .64);
  background:rgb(0 0 0 / .08);
  display:flex; align-items:center; justify-content:center;
  transition:background .1s ease, border-color .1s ease;
}
.cb svg{ inline-size:14px; block-size:14px; stroke-width:3; color:#fff; opacity:0; transition:opacity .1s ease }
.cbrow:hover .cb{ border-color:rgb(var(--line) / .8) }
.cbrow.is-on .cb{ border-color:rgb(var(--line) / .12) }
.cbrow.is-on .cb svg{ opacity:1 }
.cbrow.is-on .cb-ssr{ background:rgb(var(--ssr)) }
.cbrow.is-on .cb-sr{ background:rgb(var(--sr)) }
.cbrow.is-on .cb-rare{ background:rgb(var(--rare)) }
.cbrow.is-on .cb-norm{ background:rgb(var(--norm)) }
.cbrow.is-on .cb-ssr svg{ color:#1a1a1e }
.cbrow.is-on{ background:none }
.cbrow.is-on:hover{ background:rgb(255 255 255 / .04) }
.cbrow:not(.is-on){ color:rgb(var(--text-muted)) }
.cbrow:not(.is-on) .count{ color:rgb(var(--text-muted) / .6) }
.navrow .count{ margin-left:auto; font-size:12px; color:rgb(var(--text-muted)); font-variant-numeric:tabular-nums }
.navrow.is-on .count{ color:rgb(var(--text-inter)) }
.navrow .tick{ margin-left:auto; opacity:0; display:flex }
.navrow.is-on .tick{ opacity:1 }
.navrow .tick svg{ width:16px; height:16px }

.scrim{ display:none }

.main{ background:rgb(var(--bg-base)); display:flex; flex-direction:column; min-width:0; min-height:0 }
.topbar{
  min-height:var(--topbar-h); flex-shrink:0;
  display:flex; align-items:center; gap:8px;
  padding:8px 8px 8px 16px;
  box-shadow:0 1px 0 rgb(0 0 0 / .2), 0 1px 2px rgb(0 0 0 / .06);
}
.burger{ display:none; color:rgb(var(--text-inter)) }
.stat{
  display:inline-flex; align-items:baseline; gap:4px;
  font-size:12px; color:rgb(var(--text-muted));
  padding:4px 8px; border-radius:var(--r-sm); background:rgb(255 255 255 / .04);
}
.stat b{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums }
.content{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px }
.res{ font-size:12px; color:rgb(var(--text-muted)); margin-bottom:12px; font-variant-numeric:tabular-nums }

.pgrid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); align-items:start }
.pcard{
  background:rgb(var(--bg-raised)); border-radius:var(--r-sm);
  border:1px solid rgb(var(--line) / .08);
  padding:12px; display:flex; flex-direction:column; gap:10px;
}
.pcard-head{ display:grid; grid-template-columns:24px 40px minmax(0,1fr) auto; gap:10px; align-items:center }
.rank{ font-size:15px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums }
.pav{ width:40px; height:40px; border-radius:50%; object-fit:cover; background:rgb(var(--bg-low)) }
.pname{
  display:block; font-size:15px; font-weight:600; color:rgb(var(--text-head));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-decoration:none; width:fit-content; max-width:100%;
}
.pname:hover{ text-decoration:underline }
.pname:focus-visible{ outline:2px solid rgb(var(--brand)); outline-offset:2px; border-radius:2px }
.phandle{ font-size:12px; color:rgb(var(--text-muted)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ppow{ font-size:12px; color:rgb(var(--text-muted)); white-space:nowrap }
.ppow b{ font-size:15px; font-weight:700; color:rgb(var(--text-head)); font-variant-numeric:tabular-nums }
.shelf{ position:relative }
.pcards{
  display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scroll-padding-inline:10px;
  scroll-behavior:smooth; scrollbar-width:none;
  background:rgb(0 0 0 / .18); border-radius:var(--r-xs); padding:10px;
}
.pcards::-webkit-scrollbar{ display:none }
.shelf-nav{
  position:absolute; inset-block-start:50%; translate:0 -50%; z-index:2;
  inline-size:28px; block-size:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgb(var(--bg-lowest) / .92); color:rgb(var(--text-head));
  box-shadow:0 2px 10px rgb(0 0 0 / .55);
  opacity:0; transition:opacity .12s ease;
}
.shelf-nav svg{ inline-size:16px; block-size:16px }
.shelf-nav[hidden]{ display:none }
.shelf-nav.prev{ inset-inline-start:2px }
.shelf-nav.next{ inset-inline-end:2px }
.shelf:hover .shelf-nav,
.shelf-nav:focus-visible{ opacity:1 }
.shelf-nav:hover{ background:rgb(var(--bg-lowest)) }

.thumb{
  flex:0 0 auto; scroll-snap-align:start;
  position:relative; border-radius:var(--r-xs); overflow:hidden; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.thumb img{ block-size:150px; inline-size:auto }
.thumb:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgb(0 0 0 / .45) }

.ggrid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(148px,100%),1fr)) }
.gcell{ cursor:pointer; display:flex; flex-direction:column; gap:6px }
.gart{ border-radius:var(--r-sm); overflow:hidden; transition:transform .12s ease, box-shadow .12s ease }
.gcell:hover .gart{ transform:translateY(-3px); box-shadow:0 8px 20px rgb(0 0 0 / .5) }
.gart img{ width:100% }
.gcap{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; padding:0 2px }
.gcap .gn{ font-size:13px; font-weight:600; color:rgb(var(--text-head)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.gcap .gp{ font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; flex-shrink:0 }

.members{ background:rgb(var(--bg-low)); overflow-y:auto; overscroll-behavior:contain; min-height:0 }
.lbrow{
  display:grid; grid-template-columns:20px 32px minmax(0,1fr) auto;
  gap:8px; align-items:center;
  height:42px; padding:0 8px; border-radius:var(--r-sm);
  cursor:pointer; transition:background .1s ease;
}
.lbrow:hover{ background:rgb(255 255 255 / .04) }
.lbn{ font-size:12px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums }
.lbrow img{ width:32px; height:32px; border-radius:50%; object-fit:cover; background:rgb(var(--bg-lowest)) }
.lbname{ font-size:14px; font-weight:500; color:rgb(var(--text-inter)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lbrow:hover .lbname{ color:rgb(var(--text-head)) }
.lbp{ font-size:12px; font-weight:600; color:rgb(var(--text-muted)); font-variant-numeric:tabular-nums }

.overlay{
  position:fixed; inset:0; z-index:60;
  background:rgb(0 0 0 / .8);
  display:flex; align-items:center; justify-content:center; padding:24px;
  animation:fade .12s ease;
}
.overlay.hidden{ display:none }
.modal{
  position:relative; display:grid; grid-template-columns:300px minmax(0,1fr);
  width:100%; max-width:700px; max-height:90vh; overflow:auto;
  background:rgb(var(--bg-raised)); border-radius:var(--r-md);
  box-shadow:0 8px 32px rgb(0 0 0 / .55);
  animation:pop .14s cubic-bezier(.2,.8,.3,1);
}
@keyframes fade{ from{ opacity:0 } }
@keyframes pop{ from{ opacity:0; transform:scale(.96) } }
.m-close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgb(0 0 0 / .45); color:rgb(var(--text-inter));
}
.m-close:hover{ background:rgb(0 0 0 / .7); color:#fff }
.m-close svg{ width:18px; height:18px }
.m-art{ background:rgb(var(--bg-lowest)); display:flex; align-items:center; justify-content:center; padding:16px }
.m-art img{ width:100%; border-radius:var(--r-sm) }
.m-body{ padding:24px }
.m-rar{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase }
.m-name{ margin:6px 0 0; font-size:24px; font-weight:700; color:rgb(var(--text-head)); line-height:1.2 }
.m-owner{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:14px; color:rgb(var(--text-muted)) }
.m-owner img{ width:24px; height:24px; border-radius:50%; object-fit:cover }
.m-owner > span{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0 }
.m-owner-link{ font-weight:600; color:rgb(var(--text-head)); text-decoration:none }
.m-owner-link:hover{ text-decoration:underline }
.m-owner-link:focus-visible{ outline:2px solid rgb(var(--brand)); outline-offset:2px; border-radius:2px }
.m-owner-tag{ color:rgb(var(--text-muted)) }
.m-role{
  font-size:11px; font-weight:600; line-height:1;
  padding:4px 8px; border-radius:var(--r-xs);
  background:rgb(255 255 255 / .06); border:1px solid rgb(var(--line) / .2);
}
.m-stats{ margin-top:20px; display:flex; flex-direction:column; gap:12px }
.m-lbl{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:rgb(var(--text-muted)); margin-bottom:5px }
.m-lbl span{ display:inline-flex; align-items:center; gap:6px }
.m-lbl svg{ inline-size:16px; block-size:16px }
.m-lbl b{ color:rgb(var(--text-head)); font-variant-numeric:tabular-nums }
.bar{ height:8px; border-radius:var(--r-xs); background:rgb(0 0 0 / .35); overflow:hidden }
.bar i{ display:block; height:100%; border-radius:var(--r-xs) }
.m-meta{ margin:20px 0 0; padding-top:14px; border-top:1px solid rgb(var(--line) / .12); font-size:12px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px }
.m-meta dt{ color:rgb(var(--text-muted)) }
.m-meta dd{ margin:0; color:rgb(var(--text-inter)); font-variant-numeric:tabular-nums }

.m-share{
  margin-block-start:18px; display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:var(--r-sm);
  background:rgb(var(--brand)); color:#fff; font-size:13px; font-weight:600;
  transition:background .1s ease;
}
.m-share:hover{ background:rgb(var(--brand-hover)) }
.m-share svg{ inline-size:15px; block-size:15px }

.empty{ padding:72px 20px; text-align:center; color:rgb(var(--text-muted)); display:flex; flex-direction:column; align-items:center; gap:12px }
.empty svg{ width:32px; height:32px; stroke-width:1.5 }
.reset{
  margin-block-start:4px; padding:8px 14px; border-radius:var(--r-sm);
  background:rgb(var(--brand)); color:#fff; font-size:13px; font-weight:600;
  transition:background .1s ease;
}
.reset:hover{ background:rgb(var(--brand-hover)) }

.sb-scroll::-webkit-scrollbar,
.content::-webkit-scrollbar,
.members::-webkit-scrollbar,
.modal::-webkit-scrollbar{ width:8px }
.sb-scroll::-webkit-scrollbar-track,
.members::-webkit-scrollbar-track{ background:transparent }
.content::-webkit-scrollbar-track{ background:rgb(var(--bg-lowest) / .4); border-radius:4px }
.sb-scroll::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.members::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb{ background:rgb(var(--bg-lowest)); border-radius:4px }
.content::-webkit-scrollbar-thumb:hover{ background:rgb(0 0 0 / .8) }

@media (max-width:1100px){
  .app{ grid-template-columns:var(--rail-w) var(--sidebar-w) minmax(0,1fr) }
  .members{ display:none }
}

@media (max-width:820px){
  .app{ grid-template-columns:minmax(0,1fr) }
  .rail{ display:none }
  .burger{ display:flex }
  .hash{ display:none }
  .stats{ display:none }
  .content{ padding:12px }

  .sidebar{
    position:fixed; inset:0 auto 0 0; z-index:50;
    width:min(84vw,var(--sidebar-w));
    transform:translateX(-100%);
    transition:transform .18s cubic-bezier(.2,.8,.3,1);
    box-shadow:4px 0 24px rgb(0 0 0 / .5);
  }
  .sidebar.is-open{ transform:none }
  .scrim{
    display:block; position:fixed; inset:0; z-index:45;
    background:rgb(0 0 0 / .6);
  }
  .scrim[hidden]{ display:none }

  .modal{ grid-template-columns:1fr }
  .m-body{ padding:0 20px 20px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}