/* Web ProtMate (New). Shared site styles are in /css/style.css. */

.pm-layout { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 20px; align-items: start; }
.pm-results { display: grid; gap: 20px; min-width: 0; }
.pm-results .panel + .panel { margin-top: 0; }
.pm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pm-input .textarea { min-height: 14em; }

.formula {
    padding: 14px; border-radius: 10px; text-align: center; overflow-x: auto;
    background: var(--accent-soft); border: 1px solid transparent;
}
.formula-empty { background: var(--surface-2); border-color: var(--border); color: var(--muted); font-size: 0.9rem; }
.formula-text { font-family: var(--mono); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em; }

.atoms { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; }
.atom-count { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }

.contributors { list-style: none; margin: 0; padding: 8px 12px; }
.contributors li {
    display: grid; grid-template-columns: auto 1fr auto 4.5em; align-items: center; gap: 10px;
    padding: 10px 8px; font-size: 0.92rem; font-variant-numeric: tabular-nums;
}
.contributors li + li { border-top: 1px solid var(--border); }
.aa-code {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
    font: 700 0.85rem var(--mono); background: var(--accent-soft); color: var(--accent);
}
.aa-ext { text-align: right; font-weight: 600; }

.bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .4s ease-out; }

@media (max-width: 900px) {
    .pm-layout, .pm-pair { grid-template-columns: 1fr; }
}