/* Сравнение танков — analytics UI */
.mtcmp{
  --c-bg:#0b0e13; --c-panel:#121821; --c-line:rgba(212,175,95,.22); --c-gold:#d4af5f;
  --c-text:#e9eef5; --c-muted:rgba(233,238,245,.55); --c-best:#39ff88; --c-worst:rgba(233,238,245,.28);
  color:var(--c-text); font-family:Inter,system-ui,sans-serif;
  border:1px solid var(--c-line); border-radius:14px;
  background:linear-gradient(180deg,#10151d,#0a0d12);
  box-shadow:0 16px 50px rgba(0,0,0,.35); overflow:hidden;
}
.mtcmp-stub{padding:18px;border-radius:12px;border:1px dashed rgba(228,180,76,.35);background:rgba(228,180,76,.08);color:#ffd991}
.mtcmp__header{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;padding:16px 16px 8px;flex-wrap:wrap}
.mtcmp__kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-gold);margin-bottom:6px}
.mtcmp__title{margin:0 0 4px;font-family:Orbitron,Inter,sans-serif;font-size:1.4rem;letter-spacing:.04em}
.mtcmp__lead{margin:0;color:var(--c-muted);font-size:13px}
.mtcmp-share{display:flex;align-items:center;gap:10px}
.mtcmp-share__note{font-size:12px;color:var(--c-best)}
.mtcmp-share__note[hidden]{display:none!important}

.mtcmp-btn{min-height:38px;padding:0 14px;border-radius:8px;border:1px solid transparent;font-weight:700;font-size:12px;letter-spacing:.04em;cursor:pointer}
.mtcmp-btn--primary{background:linear-gradient(180deg,#e0c06a,#b8923f);color:#1a1408}
.mtcmp-btn--ghost{background:rgba(255,255,255,.04);border-color:rgba(212,175,95,.3);color:var(--c-text)}
.mtcmp-icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25);color:#fff;cursor:pointer;font-size:18px}

.mtcmp-slots{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:10px;padding:8px 16px 14px}
.mtcmp-slot{
  min-height:120px;border-radius:12px;border:1px dashed rgba(212,175,95,.28);
  background:rgba(0,0,0,.22);display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:8px;padding:12px;position:relative;
}
.mtcmp-slot.is-filled{border-style:solid;border-color:rgba(255,255,255,.1);align-items:stretch}
/* Empty add-slot: full area clickable */
button.mtcmp-slot--empty{
  width:100%;
  font:inherit;
  color:inherit;
  cursor:pointer;
  appearance:none;-webkit-appearance:none;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
button.mtcmp-slot--empty:hover,
button.mtcmp-slot--empty:focus-visible{
  border-color:rgba(212,175,95,.55);
  background:rgba(212,175,95,.08);
  outline:none;
  box-shadow:0 0 0 2px rgba(212,175,95,.18);
}
button.mtcmp-slot--empty:active{transform:scale(0.99)}
.mtcmp-slot__add{
  background:transparent;border:0;color:var(--c-gold);font-weight:800;font-size:13px;
  cursor:pointer;letter-spacing:.04em;pointer-events:none;
}
.mtcmp-slot__plus{
  font-size:32px;line-height:1;color:var(--c-gold);opacity:.9;pointer-events:none;
  font-weight:300;user-select:none;
}
.mtcmp-slot__name{margin:0;font-size:15px;font-weight:800}
.mtcmp-slot__meta{font-size:12px;color:var(--c-muted)}
.mtcmp-slot__sw{width:100%;height:6px;border-radius:999px;margin-bottom:6px}
.mtcmp-slot__actions{display:flex;gap:6px;margin-top:auto}
.mtcmp-slot__actions button{flex:1;min-height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--c-text);cursor:pointer;font-size:11px;font-weight:700}
.mtcmp-slot__badge{position:absolute;top:8px;right:8px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-gold);opacity:.8}

.mtcmp-panel{margin:0 16px 14px;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.2)}
.mtcmp-panel__head{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.mtcmp-panel__title{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gold)}
.mtcmp-panel__meta{font-size:11px;color:var(--c-muted)}
.mtcmp-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--c-muted)}
.mtcmp-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
.mtcmp-radar-wrap{display:flex;justify-content:center;padding:8px 0}
.mtcmp-radar-wrap canvas{max-width:100%;height:auto}

.mtcmp-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mtcmp-table{min-width:560px}
.mtcmp-row{display:grid;gap:0;border-bottom:1px solid rgba(255,255,255,.05)}
.mtcmp-row--head{position:sticky;top:0;background:#10151c;z-index:1}
.mtcmp-row--group{background:rgba(212,175,95,.06);padding:8px 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-gold);border-bottom:1px solid rgba(212,175,95,.15)}
.mtcmp-cell{padding:10px;font-size:13px;border-right:1px solid rgba(255,255,255,.04)}
.mtcmp-cell:last-child{border-right:0}
.mtcmp-cell--label{color:var(--c-muted);font-size:12px}
.mtcmp-cell.is-best{color:var(--c-best);font-weight:800;background:rgba(57,255,136,.06)}
.mtcmp-cell.is-worst{color:var(--c-worst)}
.mtcmp-cell.is-base{box-shadow:inset 0 0 0 1px rgba(212,175,95,.18)}
.mtcmp-delta{display:block;font-size:11px;color:var(--c-muted);margin-top:2px}
.mtcmp-delta.pos{color:rgba(57,255,136,.85)}
.mtcmp-delta.neg{color:rgba(248,113,113,.9)}

.mtcmp-modal[hidden]{display:none!important}
.mtcmp-modal{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.65);display:grid;place-items:center;padding:16px}
.mtcmp-modal__panel{width:min(720px,100%);max-height:min(80vh,640px);overflow:auto;border-radius:14px;border:1px solid rgba(212,175,95,.28);background:linear-gradient(180deg,#151b24,#0d1118);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.mtcmp-modal__head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.mtcmp-filters{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:8px;padding:12px 16px}
.mtcmp-filters input,.mtcmp-filters select{min-height:40px;border-radius:8px;border:1px solid rgba(212,175,95,.22);background:#0c1118;color:var(--c-text);padding:0 10px;font:inherit}
.mtcmp-picker-list{padding:0 12px 14px;display:grid;gap:6px}
.mtcmp-pick{
  display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);
  cursor:pointer;text-align:left;color:inherit;font:inherit;
}
.mtcmp-pick:hover{border-color:rgba(212,175,95,.35);background:rgba(212,175,95,.06)}
.mtcmp-pick.is-on{opacity:.45;pointer-events:none}
.mtcmp-pick__sw{width:10px;height:10px;border-radius:50%}
.mtcmp-pick strong{display:block;font-size:14px}
.mtcmp-pick span{font-size:12px;color:var(--c-muted)}
.mtcmp-disclaimer{padding:4px 16px 14px;font-size:11px;color:var(--c-muted);line-height:1.45}

@media (max-width:900px){
  .mtcmp-slots{grid-template-columns:1fr 1fr}
  .mtcmp-filters{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .mtcmp-slots{grid-template-columns:1fr}
  .mtcmp-filters{grid-template-columns:1fr}
}