/* Power bank calculator page only. */
.pb-app { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin: 1.5rem 0; }
.pb-app[hidden], .pb-app [hidden] { display: none !important; }
.pb-field { margin: 0 0 1.25rem; }
.pb-field > label, .pb-legend { display: block; font-weight: 700; margin-bottom: .4rem; font-size: 1.2rem; }
.pb-hint { display: block; font-size: 1rem; color: var(--muted); margin-top: .3rem; }
.pb-app select, .pb-app input[type="text"] {
  width: 100%; min-height: 3.25rem; font: inherit; font-size: 1.2rem; color: var(--text);
  background: var(--bg); border: 2px solid var(--line); border-radius: 8px; padding: .5rem .8rem;
}
.pb-app select:focus, .pb-app input[type="text"]:focus { border-color: var(--accent); }
.pb-sub { border-left: 4px solid var(--line); padding-left: 1rem; margin: -.4rem 0 1.25rem; }
.pb-sub .pb-field { margin-bottom: .9rem; }
.pb-app fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.pb-app legend { padding: 0; }
.pb-modes { display: flex; flex-wrap: wrap; gap: .6rem; }
.pb-modes label { flex: 1 1 9rem; display: flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .5rem .9rem; border: 2px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 600; background: var(--bg); }
.pb-modes input { width: 1.4rem; height: 1.4rem; accent-color: var(--accent); margin: 0; }
.pb-modes label:has(input:checked) { border-color: var(--accent); }
.pb-error { border-left: 4px solid #ff8a7a; background: var(--bg); padding: .8rem 1rem; border-radius: 0 8px 8px 0; font-weight: 600; }
.pb-results h2 { margin-top: 1.5rem; }
.pb-big { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0 0 1rem; }
.pb-stat { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; }
.pb-stat .pb-num { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1.1; color: var(--accent); }
.pb-stat .pb-what { display: block; font-size: 1.05rem; color: var(--muted); }
.pb-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.pb-list li { padding: .3rem 0; border-top: 1px solid var(--line); }
.pb-chart { width: 100%; max-width: 30rem; height: auto; display: block; margin: .5rem 0; }
.pb-chart .pb-grid { stroke: var(--line); stroke-width: 1; }
.pb-chart .pb-tick { fill: var(--muted); font-size: 22px; }
.pb-chart .pb-lbl { fill: var(--text); font-size: 25px; font-weight: 600; }
.pb-chart .pb-sel .pb-lbl { fill: var(--accent); font-weight: 800; }
.pb-chart .pb-alone { fill: #8c96ab; }
.pb-chart .pb-add { fill: var(--accent); }
.pb-chart .pb-add-hi { fill: var(--accent); fill-opacity: .45; }
.pb-key { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: 1rem; color: var(--muted); }
.pb-key span { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 3px; vertical-align: -.15rem; margin-right: .4rem; }
.pb-key .k-alone { background: #8c96ab; }
.pb-key .k-add { background: var(--accent); }
.pb-key .k-hi { background: var(--accent); opacity: .45; }
.pb-sources { font-size: 1rem; overflow-wrap: anywhere; }
.pb-sources li { margin-bottom: .45rem; }