/* Orderly commission calculator. Follows light/dark, site font only. */
.ocalc { --o-ink: #1B1511; --o-mut: #6F665E; --o-panel: #FFFFFF; --o-line: #DDD6CE; --o-alt: #F4F0EB; --o-track: #E9E3DC; --o-head: #1B1511; color: var(--o-ink); }
[data-bs-theme="dark"] .ocalc { --o-ink: #F1EDF7; --o-mut: #9A92A8; --o-panel: #1E1628; --o-line: #3A2D48; --o-alt: #2C2238; --o-track: #33283F; --o-head: #FFFFFF; }
.ocalc__head { text-align: center; max-width: 680px; margin: 0 auto 26px; }
.ocalc__eyebrow { display: block; font: 600 13px/1 var(--primary-font), sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #E8450A; margin-bottom: 14px; }
.ocalc__head h2 { color: var(--o-head); margin: 0 0 12px; } .ocalc__head p { color: var(--o-mut); margin: 0; }
.ocalc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; max-width: 980px; margin: 0 auto; }
.ocalc__ctl, .ocalc__res { background: var(--o-panel); border: 1px solid var(--o-line); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 18px; font-family: var(--primary-font), sans-serif; }
.ocalc label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--o-ink); }
.ocalc__lr { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ocalc__lr b { color: #E8450A; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-bs-theme="dark"] .ocalc__lr b { color: #FF8A14; }
.ocalc input[type=range] { width: 100%; accent-color: #FF8A14; height: 28px; margin: 0; }
.ocalc__lab { font-size: 15px; display: block; margin-bottom: 8px; }
.ocalc__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ocalc__chip { border: 2px solid var(--o-line); background: var(--o-alt); color: var(--o-ink); border-radius: 14px; padding: 10px 6px; display: flex; flex-direction: column; gap: 2px; align-items: center; font: 600 13px/1.2 var(--primary-font), sans-serif; cursor: pointer; min-height: 56px; }
.ocalc__chip b { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.ocalc__chip[aria-pressed="true"] { border-color: #FF8A14; background: rgba(255, 138, 20, .14); }
.ocalc__bar { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.ocalc__bar b { font-variant-numeric: tabular-nums; font-weight: 700; }
.ocalc__tr { height: 26px; border-radius: 9px; background: var(--o-track); overflow: hidden; }
.ocalc__tr i { display: block; height: 100%; border-radius: 9px; transition: width .25s; }
.ocalc__tr i.red { background: #D4123F; } .ocalc__tr i.orange { background: #FF8A14; }
.ocalc__keep { background: rgba(61, 220, 151, .14); border: 1px solid #3DDC97; border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.ocalc__keep.neg { background: rgba(212, 18, 63, .12); border-color: #D4123F; }
.ocalc__k1 { font-size: clamp(28px, 7vw, 40px); font-weight: 700; line-height: 1.1; color: var(--o-head); font-variant-numeric: tabular-nums; }
.ocalc__k2 { font-size: 14px; color: var(--o-mut); }
.ocalc__tw { overflow-x: auto; }
.ocalc__tbl { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ocalc__tbl th, .ocalc__tbl td { padding: 8px 0; border-bottom: 1px solid var(--o-line); text-align: right; white-space: nowrap; }
.ocalc__tbl th:first-child, .ocalc__tbl td:first-child { text-align: left; white-space: normal; padding-right: 8px; }
.ocalc__tbl th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--o-mut); font-weight: 600; }
.ocalc__be { margin: 0; font-size: 15px; color: var(--o-ink); font-weight: 600; }
.ocalc__note { max-width: 680px; margin: 18px auto 0; text-align: center; font-size: 14px; color: var(--o-mut); }
@media (max-width: 767px) {
  .ocalc__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ocalc__ctl, .ocalc__res { padding: 18px 16px; gap: 16px; border-radius: 20px; }
  .ocalc { padding-top: 48px !important; padding-bottom: 48px !important; }
  .ocalc__chip { font-size: 12.5px; padding: 10px 4px; }
  .ocalc__chip b { font-size: 13px; }
}