/* PAGE INTRO */
.page-intro{background:var(--surface);padding:48px 24px;border-bottom:1px solid var(--border)}
.page-intro .inner{max-width:var(--max-w);margin:0 auto;text-align:center}
.page-intro h1{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--fg);margin-bottom:4px}
.page-intro p{font-size:14px;color:var(--muted);max-width:640px;line-height:1.6;margin:0 auto}
@media(max-width:768px){
  .page-intro{padding:36px 16px}
  .page-intro h1{font-size:19px}
  .page-intro p{font-size:13px}
}
.filter-bar{background:#fff;padding:40px 24px 20px}
.filter-bar .inner{max-width:var(--max-w);margin:0 auto}
.filter-grid{display:flex;flex-direction:column;gap:8px}
.filter-row{display:grid;gap:12px}
.filter-row.row1{grid-template-columns:1.3fr 0.8fr 0.8fr 1.3fr 0.6fr}
.filter-row.row2{grid-template-columns:120px 120px 140px 120px 1fr}
#fgScore{max-width:120px}
.filter-actions{display:flex;align-items:flex-end;gap:10px;padding-bottom:2px}
.filter-group{display:flex;flex-direction:column;gap:4px}
.filter-group label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.filter-group select,.filter-group input{height:36px;padding:0 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:var(--font-body);color:var(--fg);background:#fff;outline:none;transition:border-color .15s;appearance:auto}
.filter-group select:focus,.filter-group input:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}
.filter-group select{height:40px;padding:0 10px}
.custom-select{position:relative;height:40px}
.custom-select select{display:none}
.cs-trigger{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:var(--font-body);color:var(--fg);background:#fff;cursor:pointer;transition:border-color .15s;user-select:none;box-sizing:border-box}
.cs-trigger:hover{border-color:var(--muted)}
.cs-trigger.cs-open{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}
.cs-trigger::after{content:'';width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--muted);transition:transform .2s;flex-shrink:0;margin-left:auto}
.cs-trigger.cs-open::after{transform:rotate(180deg)}
.cs-trigger-content{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.cs-flag{width:18px;height:18px;border-radius:50%;object-fit:cover;flex-shrink:0}
.cs-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cs-options{position:fixed;top:auto;left:auto;width:max-content;min-width:0;white-space:nowrap;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.08);z-index:999;max-height:320px;overflow-y:auto;display:none}
.cs-options.open{display:block}
.cs-option{padding:8px 12px;font-size:13px;line-height:1.6;cursor:pointer;transition:background .1s;color:var(--fg);display:flex;align-items:center;gap:6px}
.cs-option:hover{background:var(--accent);color:#fff}
.cs-option.cs-selected{font-weight:600;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}
.cs-option.cs-selected:hover{color:var(--accent)}
.filter-actions button{height:36px;padding:0 20px;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font-body);transition:all .15s}
.filter-actions .btn-primary{background:var(--accent);color:#fff}
.filter-actions .btn-primary:hover{background:var(--accent-hover)}
.filter-actions .btn-reset{background:var(--surface);color:var(--muted);border:1px solid var(--border)}
.filter-actions .btn-reset:hover{color:var(--fg);border-color:var(--muted)}
.pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:24px 0 8px;flex-wrap:wrap}
.page-size-select{position:relative;height:40px}
.page-numbers{display:flex;align-items:center;gap:4px}
.page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--fg);font-size:13px;font-family:var(--font-body);cursor:pointer;transition:all .1s;user-select:none}
.page-btn:hover:not(.active):not(.disabled){border-color:var(--accent);color:var(--accent)}
.page-btn.active{background:#f0f0f0;color:var(--muted);cursor:default;border-color:#e0e0e0}
.page-btn.disabled{opacity:.35;cursor:default}
.page-dots{padding:0 4px;color:var(--muted);font-size:13px;user-select:none}
.sticky-scroll::-webkit-scrollbar{display:none}
.table-wrap{padding:20px 24px 64px;overflow:hidden}
.table-wrap .inner{max-width:var(--max-w);margin:0 auto}
.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:#fff}
.filter-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;white-space:nowrap}
.filter-table thead{z-index:10}
.filter-table thead th{padding:12px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--surface);border-bottom:2px solid var(--border);text-align:left;cursor:pointer;user-select:none;transition:background .1s;position:relative}
.filter-table thead th:hover{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.filter-table thead th .sort-icon{display:inline-block;width:14px;text-align:center;font-size:10px;color:var(--muted);margin-left:4px}
.filter-table thead th.sort-asc .sort-icon{color:var(--accent)}
.filter-table thead th.sort-desc .sort-icon{color:var(--accent)}
.filter-table tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.filter-table tbody tr{transition:background .1s}
.filter-table tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,var(--bg))}
.filter-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--border) 30%,var(--bg))}
.filter-table tbody tr:nth-child(even):hover{background:color-mix(in srgb,var(--accent) 5%,var(--bg))}
.td-logo{width:36px;text-align:center}
.td-logo .sl-logo{width:28px;height:28px;border-radius:5px;background:var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--muted)}
.td-logo img.sl-logo{object-fit:cover;display:block;background:var(--surface)}
.td-symbol{font-size:13px;font-weight:600}
.td-symbol a{color:var(--accent);text-decoration:none;transition:color .1s}
.td-name a{color:inherit;text-decoration:none;transition:color .1s}
.td-symbol a:hover,.td-name a:hover{color:var(--accent);text-decoration:none}
.td-name{font-size:13px;font-weight:500;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-sector,.td-industry{font-size:12px;color:var(--muted)}
.td-yield,.td-rate,.td-cover,.td-num,.td-pct{font-size:12px;font-weight:600}
.td-num{color:var(--fg)}
.td-pct{color:var(--fg)}
.td-yield{color:var(--fg)}
.td-rate,.td-cover{color:var(--fg)}
.score-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600}
.score-high{background:color-mix(in srgb,var(--positive) 15%,transparent);color:var(--positive)}
.score-med{background:color-mix(in srgb,#eab308 15%,transparent);color:#a16207}
.score-low{background:color-mix(in srgb,var(--negative) 12%,transparent);color:var(--negative)}
@media(min-width:769px){
.filter-table thead th:nth-child(1),
.filter-table thead th:nth-child(2),
.filter-table thead th:nth-child(3){position:sticky;z-index:12;background:var(--surface)}
.filter-table tbody td:nth-child(1),
.filter-table tbody td:nth-child(2),
.filter-table tbody td:nth-child(3){position:sticky;z-index:2;background:#fff}
.filter-table tbody tr:nth-child(even) td:nth-child(1),
.filter-table tbody tr:nth-child(even) td:nth-child(2),
.filter-table tbody tr:nth-child(even) td:nth-child(3){background:color-mix(in srgb,var(--border) 30%,var(--bg))}
.filter-table tbody tr:hover td:nth-child(1),
.filter-table tbody tr:hover td:nth-child(2),
.filter-table tbody tr:hover td:nth-child(3){background:color-mix(in srgb,var(--accent) 5%,var(--bg))!important}
.filter-table thead th:nth-child(1){left:0}
.filter-table thead th:nth-child(2){left:36px}
.filter-table thead th:nth-child(3){left:124px}
.filter-table tbody td:nth-child(1){left:0}
.filter-table tbody td:nth-child(2){left:36px}
.filter-table tbody td:nth-child(3){left:124px}
}
@media(max-width:768px){
  .filter-bar{padding:32px 16px 16px}
  .filter-row.row1{grid-template-columns:1fr 1fr;gap:8px}
  .filter-row.row1 #fgKeyword{grid-column:span 2}
  .filter-row.row2{grid-template-columns:1fr 1fr;gap:8px}
  .filter-row.row2 .filter-actions{grid-column:span 2;display:flex;gap:10px;justify-content:flex-end}
  #fgScore{max-width:none}
  .custom-select{height:36px}
  .custom-select .cs-trigger{height:36px;font-size:12px}
  .custom-select .cs-option{padding:7px 10px;font-size:12px}
  .cs-options{max-height:240px}
  .table-wrap{padding:16px 16px 48px}
  .filter-table{font-size:12px}
  .filter-table thead th,.filter-table tbody td{padding:8px 10px}
}