.pkgs{display:grid;gap:10px}
.pkg{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.pkg:hover{border-color:color-mix(in srgb,var(--primary) 50%,var(--line))}
.pkg input{position:absolute;opacity:0;pointer-events:none}
.pkg.sel{border-color:var(--primary);background:var(--soft);box-shadow:0 0 0 3px var(--soft)}
.pk-n{display:grid;gap:2px;color:var(--text)}.pk-n small,.pr small{color:var(--muted);font-size:.8rem}
.pr{text-align:right;font-weight:800;color:var(--primary);font-size:1.05rem;white-space:nowrap}.pr small{margin-left:3px;font-weight:400}
.sum{position:sticky;top:84px;display:grid;gap:4px}
.line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}.line span{color:var(--muted)}.line b{text-align:right;word-break:break-word}
.big{font-size:1.4rem;color:var(--primary)}
.warn-box{margin:10px 0 0;padding:10px 14px;border-radius:var(--r);background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--err);border:1px solid color-mix(in srgb,var(--err) 32%,transparent)}
.warn-box a{text-decoration:underline;font-weight:700}
.sum .btn{margin-top:14px}

.pkg.out{opacity:.5;cursor:not-allowed}
.pkg-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.pkgs.scroll{max-height:420px;overflow:auto;padding:2px}
@media(max-width:560px){.pkg-tools{grid-template-columns:1fr}}