.pal-mutation-calculator{
  --plmut-bg:#071A24;
  --plmut-surface:#102C3A;
  --plmut-surface-2:#0B2330;
  --plmut-primary:#22D3EE;
  --plmut-text:#F8FAFC;
  --plmut-muted:rgba(248,250,252,.72);
  --plmut-faint:rgba(248,250,252,.48);
  --plmut-border:rgba(248,250,252,.11);
  --plmut-border-strong:rgba(248,250,252,.18);
  --plmut-primary-soft:rgba(34,211,238,.10);
  --plmut-primary-border:rgba(34,211,238,.42);
  width:100%;
  min-width:0;
  color:var(--plmut-text);
  font-family:Roboto,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.45;
}
.pal-mutation-calculator,.pal-mutation-calculator *{box-sizing:border-box}
.pal-mutation-calculator button,.pal-mutation-calculator input{font:inherit}
.pal-mutation-calculator [hidden]{display:none!important}
.plmut-shell{overflow:hidden;border:1px solid var(--plmut-border);border-radius:20px;background:var(--plmut-surface);box-shadow:0 18px 44px rgba(0,0,0,.24)}
.plmut-header{display:grid;gap:16px;padding:24px 20px 20px;border-bottom:1px solid var(--plmut-border)}
.plmut-eyebrow{margin:0 0 7px!important;color:var(--plmut-primary);font-size:12px;font-weight:800;letter-spacing:.13em}
.plmut-header h2{margin:0!important;color:var(--plmut-text)!important;font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:clamp(28px,4vw,40px)!important;line-height:1.08!important;font-weight:700!important;letter-spacing:-.02em}
.plmut-lede{max-width:780px;margin:10px 0 0!important;color:var(--plmut-muted)!important;font-size:15px;line-height:1.6}
.plmut-status{align-self:start;display:inline-flex;width:max-content;align-items:center;gap:8px;min-height:34px;padding:7px 11px;border:1px solid var(--plmut-border);border-radius:999px;background:var(--plmut-bg);color:var(--plmut-muted);font-size:12px;font-weight:700}
.plmut-status>span{width:7px;height:7px;border-radius:50%;background:var(--plmut-primary);box-shadow:0 0 0 3px var(--plmut-primary-soft)}
.plmut-status.is-error>span{background:#fb7185}
.plmut-cake-row{display:grid;gap:10px;padding:14px 20px;border-bottom:1px solid var(--plmut-border);background:var(--plmut-bg)}
.plmut-cake-copy strong{display:block;font-size:13px}.plmut-cake-copy small{display:block;margin-top:2px;color:var(--plmut-faint);font-size:11px}
.plmut-cake{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--plmut-border);border-radius:12px;background:var(--plmut-surface-2);cursor:pointer}
.plmut-cake input{accent-color:var(--plmut-primary)}
.plmut-cake strong{display:block;color:var(--plmut-text);font-size:12px}.plmut-cake small{display:block;color:var(--plmut-faint);font-size:11px}
.plmut-cake:has(input:checked){border-color:var(--plmut-primary-border);background:var(--plmut-primary-soft)}
.plmut-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border-bottom:1px solid var(--plmut-border);background:var(--plmut-bg)}
.plmut-tab{display:grid;grid-template-columns:32px 1fr;column-gap:10px;align-items:center;min-height:62px;padding:8px 12px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--plmut-muted);text-align:left;cursor:pointer}
.plmut-tab>span{grid-row:1/3;display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--plmut-border);border-radius:9px;background:var(--plmut-surface);font-size:17px}
.plmut-tab strong{align-self:end;font-size:14px;line-height:1.2}.plmut-tab small{align-self:start;color:var(--plmut-faint);font-size:11px;line-height:1.2}
.plmut-tab:hover{background:rgba(248,250,252,.035);color:var(--plmut-text)}
.plmut-tab.is-active{border-color:var(--plmut-primary-border);background:var(--plmut-primary-soft);color:var(--plmut-primary)}
.plmut-panel{padding:22px 20px 24px}
.plmut-input-grid{display:grid;gap:12px;align-items:end}.plmut-input-grid label,.plmut-reverse-input label{display:block;min-width:0}.plmut-input-grid label>span,.plmut-reverse-input label>span{display:block;margin:0 0 8px;color:var(--plmut-text);font-size:12px;font-weight:800}
.plmut-input-grid input,.plmut-reverse-input input{width:100%;height:48px;padding:0 14px;border:1px solid var(--plmut-border-strong);border-radius:11px;outline:none;background:var(--plmut-bg);color:var(--plmut-text);box-shadow:none}
.plmut-input-grid input::placeholder,.plmut-reverse-input input::placeholder{color:var(--plmut-faint)}
.plmut-input-grid input:focus,.plmut-reverse-input input:focus{border-color:var(--plmut-primary);box-shadow:0 0 0 3px var(--plmut-primary-soft)}
.plmut-plus{display:none;place-items:center;width:38px;height:38px;margin:auto;border:1px solid var(--plmut-border);border-radius:50%;background:var(--plmut-bg);color:var(--plmut-primary);font-weight:800}
.plmut-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:14px;padding:0 18px;border:1px solid var(--plmut-primary);border-radius:11px;background:var(--plmut-primary);color:#04202a;font-weight:900;cursor:pointer;transition:transform .14s ease,filter .14s ease}
.plmut-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.plmut-message{margin-top:14px;padding:11px 13px;border:1px solid var(--plmut-border);border-radius:10px;background:var(--plmut-bg);color:var(--plmut-muted);font-size:12px}
.plmut-message.is-error{border-color:rgba(251,113,133,.45);background:rgba(251,113,133,.08);color:#fecdd3}
.plmut-parent-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;padding:12px;border:1px solid var(--plmut-border);border-radius:13px;background:var(--plmut-bg)}
.plmut-parent-summary>span{color:var(--plmut-primary);font-size:20px;font-weight:900}
.plmut-result-card{margin-top:16px;overflow:hidden;border:1px solid var(--plmut-border);border-radius:15px;background:var(--plmut-bg)}
.plmut-result-head,.plmut-target-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px;border-bottom:1px solid var(--plmut-border);background:linear-gradient(180deg,rgba(34,211,238,.06),transparent)}
.plmut-kicker{display:block;margin-bottom:7px;color:var(--plmut-primary);font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.plmut-rate{flex:0 0 auto;min-width:96px;padding:9px 11px;border:1px solid var(--plmut-primary-border);border-radius:10px;background:var(--plmut-primary-soft);text-align:center}.plmut-rate small{display:block;color:var(--plmut-muted);font-size:10px}.plmut-rate strong{display:block;margin-top:2px;color:var(--plmut-primary);font-size:19px}
.plmut-pal{display:flex;align-items:center;gap:9px;min-width:0}.plmut-pal-copy{min-width:0}.plmut-pal-copy strong{display:block;overflow:hidden;color:var(--plmut-text);font-size:13px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.plmut-pal-copy small{display:block;margin-top:3px;color:var(--plmut-faint);font-size:10px}
.plmut-avatar{position:relative;display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;overflow:hidden;border:1px solid var(--plmut-border);border-radius:10px;background:var(--plmut-surface)}
.plmut-avatar-fallback{color:var(--plmut-primary);font-weight:900}.plmut-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:2px;background:var(--plmut-surface)}.plmut-avatar.has-image .plmut-avatar-fallback{visibility:hidden}
.plmut-list-head{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:12px;align-items:end;padding:12px 14px;border-bottom:1px solid var(--plmut-border)}.plmut-list-head>div:first-child strong{display:block;font-size:12px}.plmut-list-head>div:first-child small{display:block;margin-top:3px;color:var(--plmut-faint);font-size:10px}.plmut-list-head>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:7px;text-align:right}.plmut-list-head>div:last-child span{color:var(--plmut-faint);font-size:9px;font-weight:800;text-transform:uppercase}
.plmut-outcome,.plmut-route{display:grid;grid-template-columns:minmax(0,1fr) 78px 78px;gap:7px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--plmut-border)}.plmut-outcome:last-child,.plmut-route:last-child{border-bottom:0}.plmut-outcome:hover,.plmut-route:hover{background:rgba(248,250,252,.025)}
.plmut-prob{text-align:right}.plmut-prob strong{display:block;color:var(--plmut-text);font-size:12px}.plmut-prob small{display:block;margin-top:2px;color:var(--plmut-faint);font-size:9px}
.plmut-secondary{display:block;width:calc(100% - 28px);min-height:40px;margin:12px 14px;border:1px solid var(--plmut-primary-border);border-radius:10px;background:var(--plmut-primary-soft);color:var(--plmut-primary);font-weight:800;cursor:pointer}
.plmut-empty{display:grid;gap:6px;padding:18px 14px;color:var(--plmut-muted)}.plmut-empty strong{color:var(--plmut-text)}.plmut-empty span{font-size:12px}.plmut-reverse-empty .plmut-pal{margin-bottom:6px}
.plmut-route-pair{display:grid;grid-template-columns:minmax(112px,1fr) 18px minmax(112px,1fr) 22px minmax(100px,.75fr);gap:5px;align-items:center;min-width:0}.plmut-route-plus,.plmut-route-arrow{color:var(--plmut-primary);text-align:center;font-weight:900}.plmut-normal{min-width:0;padding-left:6px;border-left:1px solid var(--plmut-border)}.plmut-normal small{display:block;color:var(--plmut-faint);font-size:9px}.plmut-normal strong{display:block;overflow:hidden;color:var(--plmut-text);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.plmut-cap-note{margin:0!important;padding:12px 14px;border-top:1px solid var(--plmut-border);color:var(--plmut-faint)!important;font-size:10px!important}
.plmut-info{display:grid;gap:12px;margin-top:16px;padding:15px;border:1px solid var(--plmut-primary-border);border-radius:14px;background:var(--plmut-primary-soft)}.plmut-info strong{font-size:12px}.plmut-info p{margin:4px 0 0!important;color:var(--plmut-muted)!important;font-size:11px!important;line-height:1.55!important}.plmut-passives{display:flex;flex-wrap:wrap;gap:7px}.plmut-passive{padding:5px 8px;border:1px solid var(--plmut-border);border-radius:999px;background:var(--plmut-bg);color:var(--plmut-text);font-size:10px;font-weight:700}
.plmut-model-note{margin:14px 0 0!important;color:var(--plmut-faint)!important;font-size:10px!important;line-height:1.55!important}.plmut-model-note strong{color:var(--plmut-muted)}
.plmut-loading,.plmut-load-error{display:grid;place-items:center;gap:8px;min-height:220px;padding:24px;border:1px solid var(--plmut-border);border-radius:18px;background:var(--plmut-surface);color:var(--plmut-text);text-align:center}.plmut-loading small,.plmut-load-error small{color:var(--plmut-muted)}.plmut-load-error p{margin:0!important;color:#fecdd3!important}.plmut-spinner{width:30px;height:30px;border:3px solid rgba(34,211,238,.18);border-top-color:var(--plmut-primary);border-radius:50%;animation:plmut-spin .8s linear infinite}@keyframes plmut-spin{to{transform:rotate(360deg)}}
@media(min-width:760px){.plmut-header{grid-template-columns:minmax(0,1fr) auto}.plmut-cake-row{grid-template-columns:minmax(220px,1fr) minmax(180px,.65fr) minmax(220px,.85fr);align-items:center}.plmut-input-grid{grid-template-columns:1fr 44px 1fr}.plmut-plus{display:grid}.plmut-reverse-input{max-width:580px}}
@media(max-width:759px){.plmut-tabs{grid-template-columns:1fr}.plmut-cake-row{grid-template-columns:1fr}.plmut-result-head,.plmut-target-head{align-items:flex-start}.plmut-list-head{grid-template-columns:minmax(0,1fr) 128px}.plmut-outcome,.plmut-route{grid-template-columns:minmax(0,1fr) 60px 60px;padding-left:10px;padding-right:10px}.plmut-route-pair{grid-template-columns:minmax(88px,1fr) 14px minmax(88px,1fr)}.plmut-route-arrow,.plmut-normal{display:none}.plmut-pal-copy small{white-space:normal}.plmut-avatar{width:34px;height:34px;flex-basis:34px}.plmut-rate{min-width:78px}.plmut-panel{padding:18px 12px 20px}.plmut-header{padding:20px 14px 16px}}
@media(max-width:430px){.plmut-outcome,.plmut-route{grid-template-columns:minmax(0,1fr) 54px 54px;gap:4px}.plmut-list-head{grid-template-columns:minmax(0,1fr) 112px}.plmut-pal-copy strong{font-size:12px}.plmut-pal-copy small{font-size:9px}.plmut-prob strong{font-size:11px}.plmut-header h2{font-size:27px!important}}

/* OP.GG style mutation result polish */
.plmut-outcome, .plmut-route {
  align-items:center;
  gap:14px;
}
.plmut-avatar {
  width:64px;
  height:64px;
  border-radius:14px;
  overflow:hidden;
  flex:none;
}
.plmut-avatar img {
  width:100%;
  height:100%;
  object-fit:contain;
}
.plmut-prob strong {
  font-size:16px;
}
.plmut-outcome:hover, .plmut-route:hover {
  transform:translateY(-1px);
}

/* OP.GG style v3 upgrade */
.plmut-bar{height:6px;width:100%;margin-bottom:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.plmut-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#22d3ee,#34d399)}
.plmut-outcome .plmut-avatar,.plmut-route .plmut-avatar{box-shadow:0 0 0 2px rgba(34,211,238,.15)}
.plmut-outcome .plmut-pal-copy strong{font-size:14px}
.plmut-prob{min-width:0}


.plmut-icon-suggestions{
 display:none;
 position:absolute;
 z-index:50;
 background:#111827;
 border:1px solid rgba(255,255,255,.15);
 border-radius:10px;
 padding:6px;
 width:100%;
 max-height:300px;
 overflow:auto;
}
.plmut-icon-suggestions.show{display:block}
.plmut-reverse-input label,
.plmut-input-grid label{position:relative}
.plmut-suggestion{
 width:100%;
 display:flex;
 align-items:center;
 gap:10px;
 padding:8px;
 border:0;
 background:transparent;
 color:inherit;
 text-align:left;
 cursor:pointer;
}
.plmut-suggestion:hover{background:rgba(255,255,255,.08)}
.plmut-suggestion img,.plmut-suggestion-fallback{
 width:34px;
 height:34px;
 object-fit:contain;
 border-radius:8px;
}
.plmut-suggestion-fallback{
 display:flex;
 align-items:center;
 justify-content:center;
 background:#374151;
}
.plmut-suggestion small{
 display:block;
 opacity:.7;
}


/* Selected parent icon preview */
.plmut-selected-preview{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:8px 10px;
  border:1px solid var(--plmut-border);
  border-radius:10px;
  background:var(--plmut-bg);
}
.plmut-selected-preview strong{
  display:block;
  color:var(--plmut-text);
  font-size:13px;
}
.plmut-selected-preview small{
  display:block;
  color:var(--plmut-muted);
  font-size:11px;
}
.plmut-selected-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--plmut-surface-2);
  overflow:hidden;
  color:var(--plmut-primary);
  font-weight:800;
}
.plmut-selected-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Result UI upgrade: single clean OP.GG style rows */
.plmut-single-column{display:flex;flex-direction:column;gap:12px;}
.plmut-result-row{width:100%;display:grid;grid-template-columns:minmax(220px,1fr) 150px 110px;align-items:center;gap:18px;}
.plmut-result-row .plmut-pal{min-width:0;}
.plmut-result-row .plmut-avatar{width:54px;height:54px;}
@media(max-width:700px){.plmut-result-row{grid-template-columns:1fr;gap:8px;}}

/* Mutation autocomplete OP.GG style */
.plmut-icon-suggestions .plmut-suggestion{
 display:flex;
 align-items:center;
 gap:10px;
 width:100%;
 text-align:left;
}
.plmut-icon-suggestions .plmut-suggestion img,
.plmut-icon-suggestion img{
 width:38px;
 height:38px;
 object-fit:contain;
 flex:none;
}
.plmut-icon-suggestions .plmut-suggestion strong{
 display:block;
}
.plmut-icon-suggestions .plmut-suggestion small{
 display:block;
 opacity:.75;
 font-size:12px;
}