:root{
      --bg:#0b0d10;
      --panel:#12161b;
      --panel2:#171c22;
      --line:#262d35;
      --text:#edf2f7;
      --muted:#8d99a6;
      --accent:#d33b32;
      --accent2:#ff665b;
      --good:#57c785;
      --warn:#f0b35a;
      --shadow:0 18px 50px rgba(0,0,0,.35);
      --radius:18px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      min-height:100vh;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 15% 0%, rgba(211,59,50,.13), transparent 26rem),
        radial-gradient(circle at 100% 30%, rgba(91,117,144,.10), transparent 30rem),
        var(--bg);
      color:var(--text);
    }
    button,input{font:inherit}
    button{color:inherit}
    .app{max-width:1440px;margin:0 auto;padding:26px}
    .topbar{
      display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;
    }
    .brand{display:flex;align-items:center;gap:14px}
    .clickable-image {
    width: 75px;
    height: 75px;
    object-fit: contain;
}
    .logo{
      width:44px;height:44px;border-radius:13px;
      background:linear-gradient(145deg,#f0645a,#9f221c);
      display:grid;place-items:center;font-weight:900;font-size:22px;
      box-shadow:0 10px 24px rgba(211,59,50,.24);
    }
    .dabestlogo{width:44px;height:44px}
    h1{font-size:22px;margin:0;letter-spacing:-.02em}
    .subtitle{color:var(--muted);font-size:13px;margin-top:3px}
    .status{
      font-size:12px;color:var(--muted);padding:8px 11px;border:1px solid var(--line);
      background:rgba(18,22,27,.7);border-radius:999px;white-space:nowrap
    }
    .layout{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
    .panel{
      border:1px solid var(--line);background:rgba(18,22,27,.94);
      border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
    }
    .panel-head{
      padding:18px 18px 14px;border-bottom:1px solid var(--line);
      display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap
    }
    .panel-title{font-weight:800;font-size:15px}
    .panel-note{font-size:12px;color:var(--muted);margin-top:3px}
    .toolbar{display:flex;gap:8px;align-items:center}
    .search{
      background:#0d1115;border:1px solid var(--line);border-radius:11px;padding:9px 11px;color:var(--text);
      outline:none;min-width:210px
    }
    .search:focus{border-color:#5a6571}
    .btn{
      background:#1c2229;border:1px solid #303841;border-radius:10px;padding:9px 12px;
      cursor:pointer;transition:.15s ease
    }
    .btn:hover{background:#242c34;transform:translateY(-1px)}
    .btn.danger{color:#ff9a94}
    .btn.primary{background:linear-gradient(180deg,#d94b42,#b82c25);border-color:#e35b52;font-weight:800}
    .btn.primary:hover{background:linear-gradient(180deg,#e45a51,#c9362e)}
    .hero-grid{
      padding:16px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;
      max-height:670px;overflow:auto;
    }
    .hero{
      position:relative;border:1px solid var(--line);background:#0e1216;border-radius:12px;overflow:hidden;
      cursor:pointer;min-height:92px;transition:.15s ease;user-select:none
    }
    .hero:hover{transform:translateY(-2px);border-color:#48515b}
    .hero.selected{border-color:var(--accent2);box-shadow:0 0 0 1px rgba(255,102,91,.55) inset}
    .hero img{display:block;width:100%;height:61px;object-fit:cover;background:#20262d}
    .hero-name{
      padding:7px 8px 8px;font-size:11px;line-height:1.15;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
    }
    .star{
      position:absolute;top:6px;right:6px;width:23px;height:23px;border-radius:50%;
      background:rgba(4,6,8,.72);display:grid;place-items:center;font-size:14px;border:1px solid rgba(255,255,255,.12)
    }
    .hero.selected .star{background:var(--accent);border-color:#ff746b}
    .right-stack{display:grid;gap:20px}
    .team-body{padding:17px}
    .team-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
    .slot{
      min-height:108px;border:1px dashed #37404a;border-radius:13px;background:#0e1216;
      display:flex;align-items:center;justify-content:center;text-align:center;color:#66727e;font-size:12px;overflow:hidden;
      position:relative
    }
    .slot.filled{border-style:solid;border-color:#3c4650;color:white}
    .slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
    .slot .shade{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.88))}
    .slot .slot-name{position:absolute;left:8px;right:8px;bottom:8px;font-size:11px;font-weight:800}
    .slot .remove{
      position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
      background:rgba(0,0,0,.72);cursor:pointer;color:#fff
    }
    .team-picker{display:flex;gap:8px}
    select{
      flex:1;background:#0d1115;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px;outline:none
    }
    .results{padding:16px;display:grid;gap:11px}
    .empty{
      padding:26px 16px;color:var(--muted);text-align:center;border:1px dashed #333c45;border-radius:13px;background:#0e1216
    }
    .pick{
      display:grid;grid-template-columns:88px 1fr auto;gap:13px;align-items:center;
      border:1px solid var(--line);border-radius:14px;padding:10px;background:linear-gradient(145deg,#11161b,#171d23)
    }
    .pick:first-child{border-color:rgba(211,59,50,.65);box-shadow:0 0 0 1px rgba(211,59,50,.12) inset}
    .pick img{width:88px;height:58px;object-fit:cover;border-radius:9px;background:#252b31}
    .pick-title{font-weight:900;font-size:14px}
    .why{color:#aab5bf;font-size:12px;line-height:1.4;margin-top:4px}
    .score{
      min-width:58px;text-align:center;border-left:1px solid var(--line);padding-left:12px
    }
    .score strong{display:block;font-size:19px}
    .score span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
    .coverage{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
    .tag{font-size:10px;padding:4px 7px;border:1px solid #34404a;border-radius:999px;color:#bdc8d2;background:#11171c}
    .tag.need{border-color:rgba(87,199,133,.45);color:#83dea7;background:rgba(87,199,133,.06)}
    .small{font-size:11px;color:var(--muted)}
    .footer{
      margin-top:16px;color:#68737d;font-size:11px;line-height:1.5;text-align:center
    }
    .loading{padding:35px;text-align:center;color:var(--muted)}
    .site-stats{
      margin-top:22px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);
      background:var(--panel);text-align:center
    }
    .site-stats h2{margin:0 0 16px;font-size:15px}
    .stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
    .stats-grid dt{font-size:12px;color:var(--muted)}
    .stats-grid dd{margin:6px 0 0;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
    .stats-note{margin:12px 0 0;font-size:11px;line-height:1.5;color:var(--muted)}
    @media (max-width:1050px){
      .layout{grid-template-columns:1fr}
      .hero-grid{grid-template-columns:repeat(7,minmax(0,1fr));max-height:520px}
    }
    @media (max-width:720px){
      .app{padding:14px}.topbar{align-items:flex-start}.status{display:none}
      .hero-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding:11px}
      .search{min-width:0;width:100%}.toolbar{width:100%}.panel-head{align-items:flex-start}
      .team-slots{grid-template-columns:repeat(2,1fr)}
      .site-stats{padding:16px 10px}.stats-grid dd{font-size:22px}
      .pick{grid-template-columns:72px 1fr}.pick img{width:72px;height:52px}.score{grid-column:2;border-left:0;padding-left:0;text-align:left}
    }