.cmp-pickers{
  max-width:900px;margin:0 auto 32px;padding:0 36px;
  display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start;
}
.cmp-vs{
  font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:700;color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;padding-top:50px;
}

.cmp-pick-empty{
  min-height:160px;border:2px dashed var(--border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--text-dim);cursor:pointer;transition:all .2s;
}
.cmp-pick-empty:hover{border-color:rgba(201,168,76,.5);color:var(--gold);}
.cmp-pick-empty span{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;}

.cmp-slot-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px;display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;
  box-shadow:var(--shadow-card);transition:border-color .2s;
}
.cmp-slot-card:hover{border-color:rgba(201,168,76,.3);}
.cmp-slot-remove{
  position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text-dim);
  font-size:16px;line-height:1;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;
}
.cmp-slot-remove:hover{background:rgba(224,80,80,.2);border-color:#e05050;color:#e05050;}

.cmp-slot-visual{position:relative;width:100px;height:130px;flex-shrink:0;}
.cmp-slot-frame{width:100%;height:100%;object-fit:contain;}
.cmp-slot-avatar{position:absolute;top:15%;left:50%;transform:translateX(-50%);width:58%;height:46%;object-fit:cover;border-radius:4px;}
.cmp-slot-rating{
  position:absolute;top:22%;left:18%;transform:translateX(-50%);
  font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;color:var(--fc-ink,#fff);
}

.cmp-slot-meta{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;text-align:center;}
.cmp-slot-name{font-family:'Rajdhani',sans-serif;font-size:17px;font-weight:700;color:var(--gold);text-decoration:none;letter-spacing:.02em;}
.cmp-slot-name:hover{text-decoration:underline;}
.cmp-slot-pos{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;}
.cmp-slot-badges{display:flex;gap:6px;align-items:center;justify-content:center;}
.cmp-slot-badges img{height:18px;width:auto;object-fit:contain;}
.cmp-slot-change{
  padding:6px 16px;border-radius:999px;background:transparent;border:1px solid var(--border);
  color:var(--text-dim);font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .2s;margin-top:4px;
}
.cmp-slot-change:hover{border-color:rgba(201,168,76,.5);color:var(--gold);background:rgba(201,168,76,.08);}

.cmp-stats-panel{max-width:900px;margin:0 auto 80px;padding:0 36px;}
.cmp-panel-inner{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.cmp-panel-header{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:14px 20px;background:var(--surface2);border-bottom:1px solid var(--border);
}
.cmp-ph-title{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);text-align:center;}
.cmp-ph-name{font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:700;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmp-ph-name.b{text-align:right;}

.cmp-face-stats{padding:16px 20px;display:flex;flex-direction:column;gap:10px;}
.cmp-detail-stats{padding:0 20px 16px;display:flex;flex-direction:column;gap:0;}
.cmp-group{margin-bottom:16px;}
.cmp-group-label{
  font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);padding:10px 0 6px;
  border-bottom:1px solid var(--border);margin-bottom:6px;
}

.cmp-stat-row{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:10px;}
.cmp-detail-row{gap:6px;}
.cmp-stat-val{
  font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;text-align:center;
}
.cmp-stat-val.sm{font-size:14px;}
.cmp-stat-val.win{color:var(--gold);}
.cmp-stat-val.b{text-align:center;}

.cmp-bar-wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;}
.cmp-stat-label{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;color:var(--text-dim);text-align:center;white-space:nowrap;}
.cmp-stat-label.sm{font-size:11px;}
.cmp-bar-track{height:8px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden;position:relative;}
[data-theme="light"] .cmp-bar-track{background:rgba(0,0,0,.07);}
.cmp-detail-row .cmp-bar-track{height:6px;}
.cmp-bar{height:100%;border-radius:999px;transition:width .4s ease;}
.cmp-bar.a{float:right;margin-left:auto;}

.cmp-bar.elite{background:#4caf7d;}
.cmp-bar.good{background:#81c784;}
.cmp-bar.mid{background:#c9a84c;}
.cmp-bar.low{background:#e07070;}
.cmp-bar.bad{background:#9e3f3f;}

.cmp-misc-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  padding:16px 20px;border-top:1px solid var(--border);background:var(--surface2);
}
.cmp-misc-item{display:flex;flex-direction:column;gap:6px;}
.cmp-misc-label{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);}
.cmp-misc-vals{display:flex;align-items:center;gap:8px;}
.cmp-misc-val{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--text);flex:1;text-align:center;}
.cmp-misc-val.win{color:var(--gold);}
.cmp-misc-sep{width:1px;height:16px;background:var(--border);flex-shrink:0;}

.cmp-modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  z-index:999;display:flex;align-items:center;justify-content:center;
}
.cmp-modal{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  width:520px;max-width:96vw;max-height:80vh;display:flex;flex-direction:column;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8);position:relative;overflow:hidden;
}
.cmp-modal-close{
  position:absolute;top:12px;right:16px;background:none;border:none;
  color:var(--text-dim);font-size:24px;cursor:pointer;line-height:1;padding:2px 6px;
  border-radius:6px;transition:color .15s,background .15s;
}
.cmp-modal-close:hover{color:var(--text);background:rgba(255,255,255,.06);}
.cmp-modal-search{
  display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);
}
.cmp-modal-search svg{color:var(--text-dim);flex-shrink:0;}
.cmp-modal-search input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:15px;padding:4px 0;}
.cmp-modal-search input::placeholder{color:var(--text-dim);}
.cmp-modal-results{overflow-y:auto;flex:1;}
.cmp-modal-hint{text-align:center;padding:32px 16px;color:var(--text-dim);font-family:'Space Grotesk',sans-serif;font-size:14px;}

.cmp-res-row{
  display:flex;align-items:center;gap:12px;padding:10px 16px;width:100%;
  background:transparent;border:none;cursor:pointer;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s;
}
.cmp-res-row:hover{background:rgba(255,255,255,.04);}
[data-theme="light"] .cmp-res-row:hover{background:rgba(0,0,0,.04);}
.cmp-res-card{position:relative;width:42px;height:56px;flex-shrink:0;}
.cmp-res-frame{width:100%;height:100%;object-fit:contain;}
.cmp-res-avatar{position:absolute;top:16%;left:50%;transform:translateX(-50%);width:56%;height:44%;object-fit:cover;}
.cmp-res-rat{position:absolute;top:22%;left:14%;transform:translateX(-50%);font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;color:#fff;}
.cmp-res-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cmp-res-name{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmp-res-sub{font-size:12px;color:var(--text-dim);}

@media(max-width:640px){
  .cmp-pickers{padding:0 16px;grid-template-columns:1fr;gap:12px;}
  .cmp-vs{padding-top:0;}
  .cmp-stats-panel{padding:0 16px;}
  .cmp-stat-val{font-size:15px;}
  .cmp-stat-label{font-size:10px;}
}