.library-filters{grid-template-columns:minmax(70px,.7fr) minmax(80px,.8fr) minmax(92px,.85fr) minmax(100px,1.6fr) auto}
.library-filters.no-online{grid-template-columns:minmax(70px,.7fr) minmax(80px,.8fr) minmax(92px,.85fr) minmax(100px,1.6fr)}
.library-title{flex:1 1 auto;flex-wrap:nowrap;align-items:center;gap:7px}
.library-title h2{display:flex;align-items:center;gap:6px;flex:none}
.library-title .library-updated{flex:1;min-width:0}
.library-title h2 button{flex:none}
.library-title h2 .small{white-space:nowrap}
.library-actions>summary,#libraryMenuUpdatedAt{display:none}
.library-actions:not([open]) .action-popover{display:none}
.library-actions .action-popover{position:static;min-width:0;padding:0;display:flex;gap:5px;border:0;box-shadow:none;background:transparent}
.ranking-dialog{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:12px;width:min(720px,calc(100vw - 20px));height:min(700px,84dvh);max-height:calc(100dvh - 20px);padding:0;overflow:hidden}
.ranking-dialog::backdrop{background:#10182788}
.ranking-dialog[open]{display:flex;flex-direction:column}
.ranking-header{padding:12px 14px 8px;flex:none;border-bottom:1px solid var(--line)}
.ranking-header h2{font-size:18px}
.ranking-header .heading{flex-wrap:nowrap}
.ranking-heading-actions{display:flex;gap:6px;flex:none}
.ranking-controls{display:flex;align-items:center;gap:10px;margin-top:10px;min-width:0}
.ranking-controls select{width:84px;flex:none;font-size:12px;padding:6px}
.ranking-tabs{display:flex;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:thin;padding:3px}
.ranking-tabs button{white-space:nowrap;flex:none;font-size:12px;padding:6px 9px;background:transparent;color:var(--muted);border-color:transparent}
.ranking-tabs button[aria-selected=true]{background:var(--brand);color:white;border-color:var(--brand)}
.ranking-summary{margin:7px 0 0;font-size:11px;line-height:1.5;color:var(--muted)}
.ranking-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 14px}
.ranking-list{list-style:none;padding:0;margin:0}
.ranking-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.ranking-number{font-size:17px;font-variant-numeric:tabular-nums;text-align:center;color:var(--muted);font-weight:600}
.ranking-number.top{color:var(--brand)}
.ranking-title{font-weight:600;line-height:1.5;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ranking-meta{font-size:11px;color:var(--muted);line-height:1.5;margin-top:2px;overflow-wrap:anywhere}
.ranking-actions{display:flex;gap:5px;align-items:center}
.ranking-actions button{padding:5px 8px;font-size:12px;white-space:nowrap}
.ranking-footer{flex:none;padding:8px 14px 10px;border-top:1px solid var(--line)}
.ranking-footer-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.ranking-footer-row .small{font-size:11px;min-width:0}
.ranking-footer button{font-size:12px;padding:5px 9px;white-space:nowrap}
.ranking-error,.ranking-action-status{font-size:12px;line-height:1.5;margin:4px 0 0;overflow-wrap:anywhere}
.ranking-error:empty,.ranking-action-status:empty{display:none}
.ranking-state{padding:28px 12px;text-align:center;color:var(--muted)}
.ranking-dialog [hidden]{display:none!important}
@media(max-width:600px){
  .library-title .library-updated{display:none}
  .library-actions>summary{display:block}
  .library-actions .action-popover{position:absolute;min-width:180px;padding:10px;display:grid;gap:6px;border:1px solid var(--line);box-shadow:0 10px 30px #0002;background:var(--panel)}
  #libraryMenuUpdatedAt{display:block;white-space:normal}
  .library-filters,.library-filters.no-online{grid-template-columns:repeat(3,minmax(0,1fr))}
  .library-filters input[type=search]{grid-column:1 / span 2}
  .library-filters.no-online input[type=search]{grid-column:1 / -1}
  .library-filters button{width:100%}
  .ranking-header{padding:10px 10px 8px}
  .ranking-controls{gap:5px}
  .ranking-controls select{width:69px}
  .ranking-tabs{gap:2px}
  .ranking-tabs button{padding:6px 7px}
  .ranking-content{padding:0 10px}
  .ranking-row{grid-template-columns:25px minmax(0,1fr) auto;gap:7px;padding:10px 0}
  .ranking-actions{flex-direction:column;gap:4px}
  .ranking-actions button{font-size:11px;padding:5px 7px;min-width:52px}
  .ranking-footer{padding:7px 10px 9px}
}
