#side,#feed{width:262px;flex-shrink:0;background:oklch(12% 0.08 209)}
#side.closed,#feed.closed{width:52px}
#side .shead,#feed .shead{min-height:56px;padding:14px 12px;flex-shrink:0}
#collapse:hover,#feedTog:hover{color:var(--neon)}
#guild-nav{padding:0 10px 6px}
#guild-nav a,.ribbon-button{display:flex;align-items:center;gap:10px;min-height:34px;font:11px var(--mono);color:var(--ink2);border:1px solid transparent;border-radius:6px;padding:7px 9px;background:transparent;text-align:left;cursor:pointer}
#guild-nav a::before,.ribbon-button::before{content:'';width:5px;height:5px;flex:none;border:1px solid currentColor;border-radius:50%;opacity:.7}
#guild-nav a.active::before,.ribbon-button.active::before{background:var(--neon);border-color:var(--neon);opacity:1}
.ribbon-nav{padding:3px 10px 0}
.ribbon-button{width:100%}
.ribbon-button:hover{color:var(--neon);background:var(--panel);border-color:var(--line2)}
.ribbon-button:focus-visible,#guild-nav a:focus-visible{outline:1px solid var(--neon);outline-offset:2px}
.ribbon-footer{margin-top:auto;padding:10px;border-top:1px solid var(--line);flex-shrink:0}
#chips>div{padding:0!important}
#chips{padding:3px 10px 9px}
#charSel{min-height:44px;padding:10px 12px!important;font:600 13px 'Segoe UI',sans-serif!important;color:var(--ink)!important;background:var(--panel2)!important;border:1px solid var(--line2)!important;border-left:3px solid var(--neon)!important;border-radius:7px!important;box-shadow:0 0 16px oklch(92% 0.2653 125 / .04);cursor:pointer}
#charSel:hover,#charSel:focus-visible{border-color:var(--neon)!important;box-shadow:0 0 10px var(--neonDim);outline:1px solid var(--neon)}
#pullList,#feedList{min-height:0;overflow-y:auto;padding:6px 8px 12px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.prow,.frow{padding:9px 8px;border:1px solid var(--line);border-radius:7px;background:transparent}
.prow{display:grid;grid-template-columns:18px 16px minmax(0,1fr) auto;gap:3px 6px;flex-shrink:0}
.prow .gd{grid-column:1;grid-row:1}
.prow .sic{grid-column:2;grid-row:1}
.prow .nm{grid-column:3;grid-row:1;overflow:hidden;text-overflow:ellipsis}
.prow .res{grid-column:4;grid-row:1;font-size:9px}
.prow .df{grid-column:3;grid-row:2;font-size:9px}
#side.closed .prow{display:flex}
.prow.sel,.frow:has(.fchip.sel){background:var(--panel);border-color:var(--line2)}
.frow{margin-bottom:6px}
.frow .ft{flex-wrap:wrap;gap:5px}
.frow .ft .b{flex-basis:100%;white-space:normal;line-height:1.45}
.frow .ft .r{font-size:9px;color:var(--ink3)}
.fchip{font-size:10px;border-radius:5px;padding:3px 6px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.fchip .sic{margin-right:4px}
#side.closed .ribbon-footer{padding:8px 4px}
#side.closed .ribbon-button{justify-content:center}
@media(max-width:1100px){#side,#feed{width:230px}}
@media(max-width:700px){
  body:not(.guild-open){flex-direction:column}
  body:not(.guild-open) #side,body:not(.guild-open) #feed{position:relative;width:100%;height:240px;flex:none;
    border-right:0;border-left:0;border-bottom:1px solid var(--line);margin:0}
  body:not(.guild-open) #side{overflow-y:auto}
  body:not(.guild-open) #side.closed,body:not(.guild-open) #feed.closed{height:56px;overflow:hidden}
  body:not(.guild-open) #main{width:100%;max-width:none}
}