.slope-topup-page { background:#f6f3eb; color:#21382e; }
.topup-skip { position:absolute; top:-80px; left:12px; z-index:10; padding:10px 14px; background:#fffefa; color:#203c32; }
.topup-skip:focus-visible { top:12px; outline:3px solid #b55132; outline-offset:3px; }
.topup-main { max-width:1100px; padding-block:18px 58px; }
.topup-path { margin:0 0 10px; color:#62695e; font-size:.86rem; }
.topup-path a,.topup-notes a,.topup-related a { color:#274c3d; text-underline-offset:3px; }
.topup-main h1 { max-width:19ch; margin:0 0 10px; font-size:clamp(2rem,4.3vw,3.25rem); line-height:1.06; letter-spacing:-.04em; }
.topup-lead { max-width:72ch; margin:12px 0 20px; color:#4c5f52; font-size:1.02rem; line-height:1.55; }
.topup-answer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px 32px; padding:21px 25px; border:1px solid #c9c5b8; border-left:6px solid #274c3d; background:#fffefa; }
.topup-answer-copy { min-width:0; }
.topup-answer-kicker { margin:0 0 4px; color:#9d482f; font-size:.78rem; font-weight:700; }
.topup-answer-copy h2 { margin:0 0 5px; font-family:Georgia,"Times New Roman",serif; font-size:1.45rem; font-weight:400; line-height:1.18; }
.topup-answer-copy > p:last-child { max-width:56ch; margin:0; color:#526156; font-size:.91rem; line-height:1.45; }
.topup-primary-result { display:flex; align-items:baseline; gap:9px; white-space:nowrap; }
.topup-primary-result strong { color:#274c3d; font-variant-numeric:tabular-nums; font-size:clamp(2.45rem,5vw,3.55rem); line-height:1; letter-spacing:-.06em; }
.topup-primary-result span { font-size:.86rem; font-weight:700; }
.topup-secondary-results { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding-top:14px; border-top:1px solid #ddd8cb; }
.topup-secondary-results p { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 9px; margin:0; font-variant-numeric:tabular-nums; }
.topup-secondary-results strong { color:#203c32; font-size:1.3rem; font-weight:650; }
.topup-secondary-results span { color:#62695e; font-size:.82rem; }
.topup-result-actions { grid-column:1/-1; display:flex; align-items:center; gap:15px; }
.topup-result-actions button { min-height:43px; padding:9px 14px; border:1px solid #203c32; border-radius:2px; background:#203c32; color:#fffefa; font:inherit; font-size:.9rem; font-weight:650; cursor:pointer; }
.topup-result-actions button:disabled { opacity:.5; cursor:not-allowed; }
.topup-result-actions button:not(:disabled):hover { background:#315b49; }
.topup-result-actions button:focus-visible,.slope-topup-page input:focus-visible,.slope-topup-page select:focus-visible,.slope-topup-page a:focus-visible,.slope-topup-page summary:focus-visible { outline:3px solid #b55132; outline-offset:3px; }
#topup-copy-status { min-height:1.3em; margin:0; color:#526156; font-size:.86rem; }
#topup-copy-fallback { grid-column:1/-1; width:100%; color:#21382e; font:inherit; line-height:1.5; }
#topup-copy-fallback[hidden] { display:none; }
.topup-workbench { margin-top:25px; border-block:1px solid #c9c5b8; }
.topup-workbench-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:17px 2px; }
.topup-workbench-heading > div { display:flex; align-items:center; gap:11px; }
.topup-workbench-heading h2 { margin:0; font-size:1.34rem; font-weight:600; }
.topup-workbench-heading p { max-width:40ch; margin:0; color:#62695e; font-size:.9rem; line-height:1.45; }
.topup-mark { display:grid; width:30px; height:30px; place-items:center; border:1px solid #b55132; color:#b55132; font-size:1.15rem; }
.topup-zones { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.topup-zone { min-width:0; padding:17px; border:1px solid #d2ccbe; background:#fffefa; }
.topup-zone-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid #e4dfd3; }
.topup-zone-head h3 { margin:0; color:#203c32; font-family:Georgia,"Times New Roman",serif; font-size:1.2rem; font-weight:400; }
.topup-remove-zone { border:0; padding:6px 0; background:none; color:#87452f; font:inherit; font-size:.78rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.topup-remove-zone:disabled { opacity:.45; cursor:not-allowed; text-decoration:none; }
.topup-zone label,.topup-order-input label { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:3px 8px; margin-top:13px; color:#21382e; font-size:.88rem; font-weight:650; line-height:1.35; }
.topup-zone label span,.topup-order-input label span { color:#62695e; font-size:.78rem; font-weight:500; text-align:right; }
.topup-zone input,.topup-zone select,.topup-order-input input { grid-column:1/-1; width:100%; min-width:0; min-height:42px; padding:8px 10px; border:1px solid #bbbeb1; border-radius:2px; background:#fff; color:#21382e; font:inherit; font-size:.94rem; font-variant-numeric:tabular-nums; }
.topup-zone select { font-variant-numeric:normal; }
.topup-geometry { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
.topup-geometry[hidden] { display:none; }
.topup-method-help { grid-column:1/-1; margin-top:8px; color:#62695e; font-size:.78rem; line-height:1.45; }
.topup-depths { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; margin-top:3px; padding-top:11px; border-top:1px dashed #d8d1c2; }
.topup-zone-result { min-height:1.2em; margin:14px 0 0; padding-top:10px; border-top:1px solid #e4dfd3; color:#274c3d; font-size:.83rem; font-variant-numeric:tabular-nums; line-height:1.45; }
.topup-add { min-height:42px; margin:14px 0 0; padding:8px 13px; border:1px solid #8e9988; border-radius:2px; background:#f6f3eb; color:#203c32; font:inherit; font-size:.9rem; font-weight:650; cursor:pointer; }
.topup-add:disabled { opacity:.55; cursor:not-allowed; }
.topup-order-input { display:grid; grid-template-columns:minmax(0,1fr) 160px; align-items:center; gap:5px 18px; max-width:760px; margin:19px 0 20px; padding:13px 15px; background:#eeeade; }
.topup-order-input label { margin:0; }
.topup-order-input input { grid-column:2; grid-row:1; }
.topup-order-input small { grid-column:1/-1; color:#62695e; font-size:.79rem; line-height:1.45; }
.topup-figure { margin:24px 0 0; padding:10px; border:1px solid #d2ccbe; background:#fffefa; }
.topup-figure img { display:block; width:100%; height:auto; }
.topup-figure figcaption { margin:9px 4px 2px; color:#62695e; font-size:.87rem; line-height:1.5; }
.topup-notes,.topup-example,.topup-faq { max-width:88ch; margin-top:30px; padding-top:19px; border-top:1px solid #c9c5b8; }
.topup-notes h2,.topup-example h2,.topup-faq h2 { margin:0 0 10px; color:#21382e; font-family:Georgia,"Times New Roman",serif; font-size:1.5rem; font-weight:400; line-height:1.2; }
.topup-notes p,.topup-example p,.topup-faq p,.topup-related { margin:0 0 12px; color:#3f5346; font-size:.96rem; line-height:1.68; }
.topup-formula { margin:14px 0; padding:9px 14px; border-left:3px solid #b55132; background:#eeeade; }
.topup-formula p { margin:6px 0; }
.topup-formula code { white-space:normal; font-family:Consolas,"SFMono-Regular",monospace; font-size:.88em; }
.topup-faq details { border-top:1px solid #ded8cc; }
.topup-faq details:last-child { border-bottom:1px solid #ded8cc; }
.topup-faq summary { padding:12px 3px; color:#203c32; font-size:.95rem; font-weight:650; cursor:pointer; }
.topup-faq details p { max-width:72ch; padding:0 3px 8px; }
.topup-related { margin-top:21px; padding-top:15px; border-top:1px solid #c9c5b8; }
@media(max-width:760px) {
  .topup-main { padding-block:14px 44px; }
  .topup-zones { grid-template-columns:1fr; }
  .topup-workbench-heading { display:block; }
  .topup-workbench-heading p { margin:6px 0 0 41px; }
}
@media(max-width:560px) {
  .topup-main h1 { max-width:17ch; font-size:clamp(1.9rem,9vw,2.45rem); letter-spacing:-.035em; }
  .topup-lead { font-size:.94rem; }
  .topup-answer { grid-template-columns:minmax(0,1fr); gap:10px; padding:16px; }
  .topup-primary-result { justify-content:flex-start; }
  .topup-secondary-results { gap:8px 10px; }
  .topup-secondary-results p { display:block; }
  .topup-secondary-results strong { display:block; font-size:1.12rem; }
  .topup-secondary-results span { display:block; margin-top:2px; font-size:.72rem; }
  .topup-zone { padding:14px; }
  .topup-geometry,.topup-depths { grid-template-columns:1fr; gap:0; }
  .topup-order-input { grid-template-columns:minmax(0,1fr); gap:5px; padding:12px; }
  .topup-order-input input { grid-column:1; grid-row:auto; }
  .topup-result-actions { align-items:flex-start; flex-direction:column; gap:7px; }
}
@media(max-width:380px) {
  .topup-workbench-heading h2 { font-size:1.14rem; }
  .topup-workbench-heading p { margin-left:0; }
  .topup-secondary-results { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .topup-secondary-results p:last-child { grid-column:1/-1; }
  .topup-zone label { font-size:.84rem; }
}
