.charge-page [hidden] { display: none !important; }
.charge-page .hero-shell { padding: 24px 28px; }
.charge-page .hero-shell h1 { margin: 0 0 12px; font-size: clamp(29px,3.5vw,44px); }
.charge-page .hero-shell .lead { max-width: 920px; margin: 0; }
.charge-page .calculator-layout { align-items: start; }
.charge-page .field { display: grid; gap: 8px; margin-bottom: 18px; }
.charge-page .field .input, .charge-page .field .select { width: 100%; min-width: 0; }
.charge-page .label-row { color: var(--ink-strong); font-weight: 700; }
.charge-page .hint, .charge-note { color: var(--muted); line-height: 1.55; font-size: 14px; }
.charge-pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.charge-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.charge-actions .button { min-height: 46px; }
.charge-main { padding: 18px; margin: 18px 0; background: var(--pearl-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: inset 3px 3px 8px rgba(85,108,91,.14), inset -3px -3px 8px rgba(249,252,245,.6); }
.charge-main span { display:block; font-weight: 700; }
.charge-main strong { display: block; margin-top: 8px; font-size: clamp(26px,3.1vw,40px); line-height: 1.25; color: var(--ink-strong); overflow-wrap: anywhere; }
.charge-page .result-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:14px; }
.charge-page .result-card strong { font-size: clamp(19px,2.1vw,27px); }
.charge-formula { padding: 12px 0; border-bottom: 1px solid var(--line-strong); color: var(--ink-strong); font-weight: 650; overflow-wrap: anywhere; line-height:1.65; }
.charge-extra { margin-bottom: 18px; border-block: 1px solid var(--line-strong); padding-block: 12px; }
.charge-extra summary { cursor: pointer; font-weight: 700; }
.charge-extra .field { margin-top: 14px; margin-bottom: 4px; }
.charge-page .charge-table-wrap { overflow-x: auto; border:1px solid var(--line-strong); border-radius: var(--radius-sm); }
.charge-page .data-table { min-width: 620px; width:100%; }
.charge-page .data-table caption { text-align: left; padding: 14px; font-weight: 700; }
.charge-current-row { background: #caddcc; font-weight:700; }
.charge-scroll-hint { display:none; color:var(--mint-deep); font-size:14px; }
.charge-page .seo-article { max-width: none; }
.charge-page .seo-article p, .charge-page .seo-article li { line-height: 1.7; }
#charge-copy-text { width:100%; margin-top:14px; overflow-wrap:anywhere; }
.charge-page .button:disabled { opacity:.55; cursor:default; }
@media(max-width:640px){
 .charge-page .hero-shell { padding:20px; }
 .charge-page .hero-shell h1 { font-size:30px; }
 .charge-page .charge-pair { grid-template-columns: minmax(0,1fr); gap:0; }
 .charge-actions .button { flex:1 1 160px; }
 .charge-scroll-hint { display:block; animation: charge-scroll 2s ease-in-out infinite; }
 .charge-page .result-card { padding:14px; }
}
@keyframes charge-scroll { 0%,100% { transform:translateX(0); } 50% { transform:translateX(4px); } }
@media(prefers-reduced-motion:reduce){.charge-scroll-hint{animation:none;}}

.charge-page .charge-pair { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.charge-page .result-card:first-child { grid-column:auto; }
.charge-bar { display:flex; height:22px; border-radius:8px; overflow:hidden; border:1px solid var(--line-strong); background:var(--pearl-soft); }
.charge-bar span { display:block; flex-shrink:0; }
#charge-initial { background:#739783; } #charge-added { background:#c9c5db; }
.charge-legend { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:var(--ink-strong); }
.charge-page .data-table { min-width:680px; }
@media(max-width:640px){.charge-page .charge-pair .label-row{min-height:42px;}.charge-page .charge-pair .hint{font-size:13px;}}