:root{
    --ink:#14131F;
    --panel:#1E1D2C;
    --panel-2:#262536;
    --line:#38364E;
    --text:#E9E7F2;
    --muted:#9C99B4;
    --gold:#D9A441;
    --cyan:#6FB3C9;
    --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--ink); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
  button,input,select{font:inherit; color:inherit}
  :focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

  header{border-bottom:1px solid var(--line); padding:34px 24px 26px}
  .wrap{max-width:1120px; margin:0 auto}
  h1{font-family:var(--serif); font-weight:600; font-size:34px; margin:0 0 22px; letter-spacing:.2px}
  h1 span{color:var(--gold)}
  .claim{color:var(--muted); margin:0 0 22px; max-width:62ch}

  .controls{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
  .field{display:flex; flex-direction:column; gap:5px}
  .field label{color:var(--muted); font-size:13px}
  .field.grow{flex:1 1 240px}
  input[type=search], select{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%}
  input[type=search]::placeholder{color:#6C6984}

  .seg{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
  .seg button{background:var(--panel); border:none; padding:9px 15px; cursor:pointer; color:var(--muted)}
  .seg button.on{background:var(--panel-2); color:var(--text)}
  .linkish{background:none; border:none; color:var(--cyan); cursor:pointer; padding:9px 4px; text-decoration:underline; text-underline-offset:3px}

  .adv{margin-top:16px; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:10px}
  .adv-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
  .adv-grid .s{display:flex; flex-direction:column; gap:4px; font-size:13px}
  .adv-grid .s .top{display:flex; justify-content:space-between; color:var(--muted)}
  .adv-grid .s .top b{color:var(--text); font-variant-numeric:tabular-nums}
  .dual{position:relative; height:24px; margin-top:2px}
  .dual .rail, .dual .fill{position:absolute; top:10px; height:4px; border-radius:2px}
  .dual .rail{left:0; right:0; background:var(--panel-2)}
  .dual .fill{background:var(--gold)}
  .dual input[type=range]{
    position:absolute; top:0; left:0; width:100%; height:24px; margin:0;
    background:none; pointer-events:none; -webkit-appearance:none; appearance:none;
  }
  .dual input[type=range]::-webkit-slider-runnable-track{height:24px; background:none; border:none}
  .dual input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; pointer-events:auto; cursor:pointer;
    width:15px; height:15px; margin-top:4px; border-radius:50%;
    background:var(--gold); border:2px solid var(--ink);
  }
  .dual input[type=range]::-moz-range-track{height:24px; background:none; border:none}
  .dual input[type=range]::-moz-range-thumb{
    pointer-events:auto; cursor:pointer;
    width:15px; height:15px; border-radius:50%;
    background:var(--gold); border:2px solid var(--ink);
  }

  main{max-width:1120px; margin:0 auto; padding:22px 24px 70px}
  .count{color:var(--muted); font-size:14px; margin:0 0 14px}

  table{width:100%; border-collapse:collapse; font-size:14px}
  th{text-align:left; color:var(--muted); font-weight:500; font-size:13px; padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
  th.sortable{cursor:pointer; user-select:none}
  th.sortable:hover{color:var(--text)}
  th .dir{color:var(--gold)}
  td{padding:9px 10px; border-bottom:1px solid #2B2A3C; vertical-align:middle}
  tbody tr{cursor:pointer}
  tbody tr:hover{background:var(--panel-2)}
  th.num, td.num{text-align:center; width:46px}
  .thumb{width:40px;height:40px;border-radius:6px;object-fit:cover;background:var(--panel-2);display:block}
  .noimg{width:40px;height:40px;border-radius:6px;background:var(--panel-2)}
  .nome{font-family:var(--serif); font-size:16px}
  .universo{color:var(--muted); font-size:13px}
  .val{display:inline-grid; place-items:center; width:31px; height:26px; background:var(--panel-2); border-radius:5px; font-variant-numeric:tabular-nums}
  .val.hi{background:#3A3018; color:var(--gold)}

  .cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
  .card{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer; text-align:left; padding:0; width:100%}
  .card:hover{border-color:var(--gold)}
  .card .img, .card img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:var(--panel-2)}
  .card .body{padding:13px 14px 15px}
  .card h3{font-family:var(--serif); font-size:19px; margin:0 0 2px}
  .card .universo{margin-bottom:10px}
  .bars{display:grid; gap:5px}
  .bars .b{display:grid; grid-template-columns:34px 1fr 22px; gap:8px; align-items:center; font-size:12px; color:var(--muted)}
  .track{height:5px; background:var(--panel-2); border-radius:3px; overflow:hidden}
  .track i{display:block; height:100%; background:var(--gold)}
  .bars .b b{color:var(--text); font-weight:500; text-align:right; font-variant-numeric:tabular-nums}

  .empty{padding:60px 20px; text-align:center; color:var(--muted)}
  .empty p{max-width:46ch; margin:0 auto 16px}
  .btn{background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:9px 15px; cursor:pointer}
  .btn:hover{border-color:var(--gold)}

  dialog{
    border:1px solid var(--line); background:var(--panel); color:var(--text);
    border-radius:14px; padding:0; max-width:660px; width:calc(100% - 32px);
  }
  dialog::backdrop{background:rgba(8,7,14,.72)}
  .sheet{display:grid; grid-template-columns:210px 1fr; gap:20px; padding:22px}
  .sheet .side img, .sheet .side .ph{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px; background:var(--panel-2); display:block}
  .sheet h2{font-family:var(--serif); font-weight:600; font-size:27px; margin:0 0 2px}
  .sheet .desc{margin:12px 0 18px; color:#D2CFE0}
  .sheet .row{display:grid; grid-template-columns:104px 1fr 30px; gap:10px; align-items:center; padding:5px 0; font-size:14px}
  .sheet .row span{color:var(--muted)}
  .sheet .row b{text-align:right; font-variant-numeric:tabular-nums}
  .sheet .rank{color:var(--muted); font-size:12px; margin:-2px 0 0}
  .close{position:absolute; top:12px; right:14px; background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer; line-height:1}
  .close:hover{color:var(--text)}

  footer{border-top:1px solid var(--line); padding:20px 24px 40px; color:var(--muted); font-size:13px}
  footer .wrap{display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between}

  .solo-s{display:none}
  @media (max-width:640px){
    h1{font-size:27px}
    .solo-s{display:block}
    .sheet{grid-template-columns:1fr}
    .sheet .side img,.sheet .side .ph{max-width:180px}
    th.hide-s, td.hide-s{display:none}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}