/* search-rank.css —— 原 HTML 行 263-451 */

  /* ─────────── 搜索排行页 ─────────── */
  .sr-page{padding:6px 2px 24px}
  .sr-header{
    display:flex;justify-content:space-between;align-items:flex-end;
    gap:16px;flex-wrap:wrap;
    padding:14px 0 22px;
  }
  .sr-title{
    margin:0 0 4px;font-size:22px;font-weight:600;
    color:var(--text);letter-spacing:-0.01em;
  }
  .sr-sub{
    margin:0;color:var(--text-3);font-size:13px;
  }
  .sr-sub b{color:var(--text);font-weight:600;font-family:"Inter"}
  .sr-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .sr-status-filter{
    display:flex;gap:0;background:var(--panel);
    border:1px solid var(--line-mid);border-radius:7px;
    overflow:hidden;
  }
  .sr-status-filter button{
    background:transparent;border:none;border-right:1px solid var(--line);
    color:var(--text-2);font-size:13px;font-weight:400;
    padding:7px 12px;cursor:pointer;font-family:inherit;
    transition:all .15s;white-space:nowrap;
    display:inline-flex;align-items:center;gap:6px;
  }
  .sr-status-filter button:last-child{border-right:none}
  .sr-status-filter button:hover:not(.active){background:var(--bg-2);color:var(--text)}
  .sr-status-filter button.active{background:var(--primary-soft);color:var(--primary);font-weight:500}
  .sr-status-filter button .st-dot{
    width:6px;height:6px;border-radius:50%;
  }
  .sr-status-filter button .st-count{
    font-family:"Inter";font-size:11px;color:var(--text-4);
    background:var(--bg-3);padding:1px 6px;border-radius:99px;
    font-weight:500;line-height:1.4;
  }
  .sr-status-filter button.active .st-count{
    background:var(--primary);color:#fff;
  }
  .sr-search{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--panel);border:1px solid var(--line);border-radius:7px;
    padding:7px 12px;width:240px;
    transition:border-color .15s;
  }
  .sr-search:focus-within{border-color:var(--primary)}
  .sr-search svg{color:var(--text-3);flex:none}
  .sr-search input{
    border:none;outline:none;background:transparent;
    font-size:13px;color:var(--text);width:100%;
    font-family:inherit;
  }
  .sr-search input::placeholder{color:var(--text-4)}
  .sr-add-btn{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--primary);color:#fff;border:none;
    padding:8px 14px;border-radius:7px;cursor:pointer;
    font-size:13px;font-weight:500;font-family:inherit;
    transition:background .15s;
  }
  .sr-add-btn:hover{background:#0e54e6}
  .sr-add-btn svg{flex:none}

  .sr-card{
    background:var(--panel);border:1px solid var(--line);border-radius:10px;
    overflow:hidden;
  }
  .sr-toolbar{
    display:flex;justify-content:space-between;align-items:center;
    padding:13px 18px;border-bottom:1px solid var(--line-soft);
    background:var(--panel);
  }
  .sr-info{font-size:13px;color:var(--text-3)}
  .sr-info b{color:var(--text);font-weight:600;font-family:"Inter"}
  .sr-table-wrap{overflow-x:auto}
  .sr-table{
    width:100%;border-collapse:separate;border-spacing:0;
    font-size:13px;
  }
  .sr-table thead th{
    background:var(--bg-2);font-weight:400;font-size:12.5px;
    color:var(--text-3);text-align:center;
    padding:11px 12px;border-bottom:1px solid var(--line);
    white-space:nowrap;
  }
  .sr-table tbody td{
    padding:11px 12px;font-size:13px;color:var(--text);
    border-bottom:1px solid var(--line-soft);
    text-align:center;
    transition:background .12s;
  }
  .sr-table tbody tr:hover td{background:var(--bg-2)}
  .sr-table tbody tr:last-child td{border-bottom:none}
  .sr-table .sr-rank{
    font-family:"Inter";font-size:13px;color:var(--text-3);
    font-weight:500;width:60px;
  }
  .sr-table .sr-rank.top1{color:#f53f3f;font-weight:700}
  .sr-table .sr-rank.top2{color:#ff7d00;font-weight:700}
  .sr-table .sr-rank.top3{color:#ffb800;font-weight:700}
  .sr-table .sr-keyword{
    color:var(--text);font-weight:500;text-align:left;
  }
  .sr-table .sr-block{
    display:inline-flex;align-items:center;gap:5px;
    padding:2px 9px;border-radius:99px;
    font-size:11.5px;font-weight:500;line-height:1.6;
  }
  .sr-table .sr-block .st-dot{
    width:5px;height:5px;border-radius:50%;flex:none;
  }
  .sr-table .sr-block.blocked{background:rgba(245,63,63,0.1);color:#f53f3f}
  .sr-table .sr-block.blocked .st-dot{background:#f53f3f}
  .sr-table .sr-block.unblocked{background:rgba(0,180,42,0.1);color:#00b42a}
  .sr-table .sr-block.unblocked .st-dot{background:#00b42a}
  .sr-table .sr-block.unknown{background:var(--bg-3);color:var(--text-3)}
  .sr-table .sr-block.unknown .st-dot{background:var(--text-4)}
  .sr-table .sr-index{
    font-family:"Inter";font-weight:600;color:var(--text);
  }
  .sr-table .sr-uid{
    font-family:"Inter",sans-serif;font-size:12.5px;color:var(--text-3);
  }
  .sr-table .sr-fans{
    font-family:"Inter";font-weight:500;color:var(--text);
  }
  .sr-table th.sr-sortable{
    cursor:pointer;user-select:none;transition:color .12s;
  }
  .sr-table th.sr-sortable:hover{color:var(--text)}
  .sr-table th.sr-sortable .sr-sort-icon{
    display:inline-block;margin-left:4px;color:var(--text-4);
    transition:all .15s;vertical-align:middle;
  }
  .sr-table th.sr-sortable .sr-sort-icon.inactive{opacity:.5}
  .sr-table th.sr-sortable .sr-sort-icon.asc{color:var(--primary);transform:rotate(180deg)}
  .sr-table th.sr-sortable .sr-sort-icon.desc{color:var(--primary)}
  .sr-table th.sr-sortable.active{color:var(--primary)}
  .sr-table .sr-action-cell{width:100px}
  .sr-table .sr-edit-btn,
  .sr-table .sr-del-btn{
    background:transparent;border:none;cursor:pointer;
    padding:5px 6px;border-radius:5px;color:var(--text-3);
    transition:all .15s;display:inline-flex;align-items:center;justify-content:center;
  }
  .sr-table .sr-edit-btn:hover{background:var(--primary-soft);color:var(--primary)}
  .sr-table .sr-del-btn:hover{background:rgba(245,63,63,0.1);color:#f53f3f}

  .sr-empty{
    padding:60px 20px;text-align:center;color:var(--text-4);
    font-size:13px;
  }
  .sr-empty svg{margin-bottom:12px;opacity:.5}

  /* 抽屉表单 */
  .sr-drawer{width:420px}
  .sr-drawer.batch-mode{width:min(620px, calc(100vw - 32px))}
  .sr-drawer .drawer-body{padding:20px 22px}
  .sr-mode-switch{
    display:grid;grid-template-columns:1fr 1fr;gap:4px;
    background:var(--bg-2);border:1px solid var(--line);
    border-radius:8px;padding:4px;margin-bottom:18px;
  }
  .sr-mode-switch[hidden],
  .sr-single-fields[hidden],
  .sr-batch-fields[hidden]{display:none}
  .sr-mode-switch button{
    border:none;background:transparent;color:var(--text-3);
    border-radius:6px;padding:8px 10px;font-size:13px;
    font-family:inherit;font-weight:500;cursor:pointer;
    transition:all .15s;
  }
  .sr-mode-switch button:hover{color:var(--text);background:var(--panel)}
  .sr-mode-switch button.active{
    color:var(--primary);background:var(--panel);
    box-shadow:0 1px 4px rgba(15,23,42,.08);
  }
  .sr-drawer .form-row{margin-bottom:16px}
  .sr-drawer .form-label{
    display:block;font-size:12.5px;color:var(--text-3);
    margin-bottom:6px;font-weight:400;
  }
  .sr-drawer .form-label .required{color:#f53f3f;margin-left:2px}
  .sr-drawer .form-input{
    width:100%;border:1px solid var(--line-mid);border-radius:6px;
    padding:9px 12px;font-size:13px;font-family:inherit;
    color:var(--text);background:var(--panel);
    transition:border-color .15s;outline:none;
    box-sizing:border-box;
  }
  .sr-drawer select.form-input{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386909c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;
    padding-right:32px;cursor:pointer;
  }
  .sr-drawer .form-input:focus{border-color:var(--primary)}
  .sr-drawer .form-help{
    font-size:11.5px;color:var(--text-4);margin-top:4px;
  }
  .sr-drawer .form-input.is-error{border-color:#f53f3f}
  .sr-drawer .form-error{
    font-size:11.5px;color:#f53f3f;margin-top:4px;display:none;
  }
  .sr-drawer .form-error.show{display:block}
  .sr-batch-textarea{
    width:100%;min-height:280px;max-height:52vh;resize:vertical;
    border:1px solid var(--line-mid);border-radius:8px;
    padding:12px 13px;font-size:13px;line-height:1.7;
    font-family:"Inter","Noto Sans SC",sans-serif;
    color:var(--text);background:var(--panel);outline:none;
    box-sizing:border-box;transition:border-color .15s;
  }
  .sr-batch-textarea:focus{border-color:var(--primary)}
  .sr-batch-textarea.is-error{border-color:#f53f3f}
  .sr-batch-preview{
    border:1px solid var(--line);border-radius:8px;background:var(--bg-2);
    color:var(--text-3);font-size:12.5px;padding:10px 12px;
  }
  .sr-batch-preview.warn{
    border-color:rgba(255,125,0,.35);background:rgba(255,125,0,.08);
    color:#c76a00;
  }