/* OpEx: superadmin running costs page (#/opex). Roomy, one clear total first. */
.ox { max-width: 1040px; margin: 0 auto; padding: 36px 32px 72px; display: flex; flex-direction: column; gap: 36px; color: var(--color-text); }
.ox-empty { padding: 80px 0; text-align: center; font-size: 14px; color: var(--color-text-muted); }

.ox-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ox-title { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; color: var(--color-primary); }
.ox-lede { margin: 6px 0 0; font-size: 15px; color: var(--color-text-secondary); }
.ox-asof { font-size: 12.5px; color: var(--color-text-muted); padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--color-border); }

.ox-k { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }

/* Hero: the one number that matters, then where it goes */
.ox-hero {
  padding: 32px 32px 28px; border-radius: 20px; background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border), inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -18px rgba(15,23,42,.18);
}
.ox-hero__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ox-total { margin-top: 8px; font-size: 52px; line-height: 1; font-weight: 700; letter-spacing: -.035em; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ox-total span { margin-left: 10px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--color-text-muted); }
.ox-split { display: flex; gap: 32px; margin: 0; }
.ox-split div { min-width: 0; }
.ox-split dt { font-size: 12.5px; color: var(--color-text-muted); }
.ox-split dd { margin: 4px 0 0; font-size: 20px; font-weight: 650; letter-spacing: -.015em; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ox-bar { display: flex; gap: 3px; height: 14px; margin-top: 28px; border-radius: 999px; overflow: hidden; }
.ox-bar i { display: block; min-width: 4px; transition: opacity .25s cubic-bezier(.2,.8,.2,1); }
.ox-bar:hover i { opacity: .55; }
.ox-bar i:hover { opacity: 1; }
.ox-legend { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 40px; row-gap: 12px; }
.ox-legend li { display: grid; grid-template-columns: 10px 1fr auto 48px; align-items: center; gap: 12px; font-size: 14px; }
.ox-legend__n { color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-legend b { font-weight: 650; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ox-legend em { font-style: normal; text-align: right; font-size: 12.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ox-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Unit economics */
.ox-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.ox-stat { padding: 20px 22px; border-radius: 16px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border), 0 1px 2px rgba(15,23,42,.03); min-width: 0; }
.ox-stat__v { margin-top: 10px; font-size: 26px; font-weight: 700; letter-spacing: -.025em; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ox-stat__h { margin-top: 4px; font-size: 13px; color: var(--color-text-secondary); }

/* Sections */
.ox-sec { display: flex; flex-direction: column; gap: 14px; }
.ox-sechead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ox-sechead h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.015em; color: var(--color-primary); }
.ox-sechead span { font-size: 13.5px; color: var(--color-text-muted); }
.ox-sechead b { margin-left: auto; font-size: 17px; font-weight: 650; color: var(--color-primary); font-variant-numeric: tabular-nums; }

/* Next payments: a calm horizontal run of dated charges */
.ox-up { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.ox-up__item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 2px; padding: 16px 18px; border-radius: 16px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.ox-up__date { grid-row: 1 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 56px; border-radius: 12px; background: var(--color-gray-50); box-shadow: inset 0 0 0 1px var(--color-border); }
.ox-up__date b { font-size: 20px; line-height: 1; font-weight: 700; color: var(--color-primary); }
.ox-up__date span { margin-top: 3px; font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.ox-up__who { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--color-text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-up__amt { font-size: 16px; font-weight: 650; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ox-up__in { font-size: 12.5px; color: var(--color-text-muted); }

/* Service lines: name and context left, the amount big on the right */
.ox-list { border-radius: 18px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border), 0 1px 2px rgba(15,23,42,.03); overflow: hidden; }
.ox-line { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 28px; padding: 22px 26px 22px 30px; }
.ox-line + .ox-line { box-shadow: inset 0 1px 0 var(--color-border); }
.ox-line__mark { position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0; }
.ox-line__main { min-width: 0; }
.ox-line__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--color-primary); }
.ox-line__what { margin-top: 3px; font-size: 14px; color: var(--color-text-secondary); }
.ox-line__meta { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 10px; font-size: 13px; color: var(--color-text-muted); }
.ox-line__meta span + span::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 10px 3px; border-radius: 50%; background: currentColor; opacity: .6; vertical-align: middle; }
.ox-line__note { margin-top: 8px; font-size: 12.5px; color: var(--color-text-muted); font-style: italic; }
.ox-line__note.is-verify { font-style: normal; color: #B45309; }
.ox-line__amt { text-align: right; min-width: 120px; }
.ox-line__amt b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--color-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ox-line__amt span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--color-text-muted); white-space: nowrap; }
.ox-line__amt .ox-line__yr { margin-top: 6px; padding: 2px 8px; display: inline-block; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #B45309; background: rgba(245,158,11,.1); }
.ox-list--quiet .ox-line { padding-left: 26px; }
.ox-list--quiet .ox-line__amt b { font-size: 17px; color: var(--color-text-secondary); }

.ox-tag { font-size: 11px; font-weight: 600; letter-spacing: 0; padding: 3px 9px; border-radius: 999px; background: var(--color-gray-100); color: var(--color-text-secondary); box-shadow: inset 0 0 0 1px var(--color-border); }
.ox-tag--fixed { background: rgba(20,184,166,.09); color: #0F766E; box-shadow: inset 0 0 0 1px rgba(20,184,166,.2); }
.ox-tag--usage, .ox-tag--fee { background: rgba(99,102,241,.08); color: #4338CA; box-shadow: inset 0 0 0 1px rgba(99,102,241,.18); }
.ox-tag--prepaid, .ox-tag--annual { background: rgba(245,158,11,.1); color: #B45309; box-shadow: inset 0 0 0 1px rgba(245,158,11,.22); }

.ox-open {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--color-primary); text-decoration: none; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border), 0 1px 1px rgba(15,23,42,.04);
  transition: background .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1), transform .1s ease-out;
}
.ox-open:hover { background: var(--color-gray-50); box-shadow: inset 0 0 0 1px var(--color-secondary), 0 1px 2px rgba(15,23,42,.06); }
.ox-open:active { transform: scale(.96); }
.ox-open:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }

/* Not counted disclosure */
.ox-more > summary { list-style: none; cursor: pointer; padding: 18px 22px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--color-border); transition: background .2s cubic-bezier(.2,.8,.2,1); }
.ox-more > summary::-webkit-details-marker { display: none; }
.ox-more > summary:hover { background: var(--color-gray-50); }
.ox-more > summary .ox-chev { margin-left: auto; align-self: center; }
.ox-more[open] > summary { margin-bottom: 8px; }
.ox-more__grp { margin-top: 22px; }
.ox-more__grp h3 { margin: 0 0 10px; font-size: 14.5px; font-weight: 650; color: var(--color-primary); }
.ox-more__grp h3 span { margin-left: 10px; font-size: 13px; font-weight: 400; color: var(--color-text-muted); }
.ox-chev { color: var(--color-text-muted); flex-shrink: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
details[open] > summary .ox-chev { transform: rotate(180deg); }

/* Monthly log */
.ox-key { display: flex; gap: 20px; font-size: 13px; color: var(--color-text-secondary); }
.ox-key span { display: inline-flex; align-items: center; gap: 8px; }
.ox-key span > i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.ox-key__b { background: var(--color-primary); }
.ox-key__s { background: color-mix(in srgb, var(--color-primary) 22%, transparent); }
.ox-log { border-radius: 18px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; }
.ox-month + .ox-month { box-shadow: inset 0 1px 0 var(--color-border); }
.ox-month > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 170px 1fr 170px 16px; align-items: center; gap: 24px; padding: 18px 24px; transition: background .2s cubic-bezier(.2,.8,.2,1); }
.ox-month > summary::-webkit-details-marker { display: none; }
.ox-month > summary:hover { background: var(--color-gray-50); }
.ox-month > summary:active { background: var(--color-gray-100); }
.ox-month__n { font-size: 15px; font-weight: 600; color: var(--color-primary); }
.ox-month__bar { display: flex; gap: 2px; height: 10px; border-radius: 999px; background: var(--color-gray-50); overflow: hidden; }
.ox-month__bar i { display: block; height: 100%; }
.ox-month__v { text-align: right; }
.ox-month__v b { display: block; font-size: 16px; font-weight: 650; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ox-month__v span { font-size: 12.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ox-month__items { padding: 4px 24px 18px 24px; }
.ox-charge { display: grid; grid-template-columns: 130px 1fr auto; gap: 16px; padding: 9px 0; font-size: 13.5px; color: var(--color-text); font-variant-numeric: tabular-nums; }
.ox-charge + .ox-charge { box-shadow: inset 0 1px 0 var(--color-border); }
.ox-charge > span:first-child { color: var(--color-text-muted); }
.ox-charge > span:last-child { text-align: right; font-weight: 600; }
.ox-charge small { margin-left: 8px; font-size: 11.5px; color: var(--color-text-muted); }

.ox-verify { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ox-verify li { position: relative; padding: 14px 18px 14px 40px; font-size: 14px; line-height: 1.45; color: var(--color-text); border-radius: 14px; background: rgba(245,158,11,.06); box-shadow: inset 0 0 0 1px rgba(245,158,11,.2); }
.ox-verify li::before { content: ''; position: absolute; left: 18px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: #F59E0B; }
.ox-foot { margin: 0; font-size: 12.5px; color: var(--color-text-muted); }

/* Night */
html.theme-night .ox-hero { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.05), 0 12px 32px -18px rgba(0,0,0,.6); }
html.theme-night .ox-stat, html.theme-night .ox-up__item, html.theme-night .ox-list, html.theme-night .ox-log { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
html.theme-night .ox-line + .ox-line, html.theme-night .ox-month + .ox-month, html.theme-night .ox-charge + .ox-charge { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
html.theme-night .ox-title, html.theme-night .ox-total, html.theme-night .ox-split dd, html.theme-night .ox-legend b, html.theme-night .ox-stat__v,
html.theme-night .ox-sechead h2, html.theme-night .ox-sechead b, html.theme-night .ox-up__date b, html.theme-night .ox-up__amt, html.theme-night .ox-line__name,
html.theme-night .ox-line__amt b, html.theme-night .ox-more__grp h3, html.theme-night .ox-month__n, html.theme-night .ox-month__v b, html.theme-night .ox-open { color: #E6EDF1; }
html.theme-night .ox-up__date, html.theme-night .ox-month__bar { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html.theme-night .ox-month > summary:hover, html.theme-night .ox-more > summary:hover, html.theme-night .ox-open:hover { background: rgba(255,255,255,.035); }
html.theme-night .ox-open { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
html.theme-night .ox-open:hover { box-shadow: inset 0 0 0 1px rgba(94,234,212,.5); }
html.theme-night .ox-key__b { background: #5EEAD4; }
html.theme-night .ox-key__s { background: rgba(255,255,255,.18); }
html.theme-night .ox-bar i[style*="#0F2A4A"], html.theme-night .ox-dot[style*="#0F2A4A"], html.theme-night .ox-line__mark[style*="#0F2A4A"] { background: #94A3B8 !important; }
html.theme-night .ox-tag { background: rgba(255,255,255,.05); color: rgba(226,232,240,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
html.theme-night .ox-tag--fixed { background: rgba(45,212,191,.13); color: #5EEAD4; box-shadow: inset 0 0 0 1px rgba(45,212,191,.22); }
html.theme-night .ox-tag--usage, html.theme-night .ox-tag--fee { background: rgba(129,140,248,.13); color: #A5B4FC; box-shadow: inset 0 0 0 1px rgba(129,140,248,.22); }
html.theme-night .ox-tag--prepaid, html.theme-night .ox-tag--annual { background: rgba(251,191,36,.12); color: #FCD34D; box-shadow: inset 0 0 0 1px rgba(251,191,36,.22); }
html.theme-night .ox-line__note.is-verify, html.theme-night .ox-line__amt .ox-line__yr { color: #FCD34D; }
html.theme-night .ox-line__amt .ox-line__yr { background: rgba(251,191,36,.12); }
html.theme-night .ox-verify li { background: rgba(251,191,36,.06); box-shadow: inset 0 0 0 1px rgba(251,191,36,.16); }

@media (max-width: 900px) {
  .ox-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ox-legend { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ox { padding: 22px 16px 56px; gap: 28px; }
  .ox-title { font-size: 26px; }
  .ox-hero { padding: 22px 20px; }
  .ox-total { font-size: 40px; }
  .ox-split { gap: 24px; }
  .ox-stat { padding: 16px; }
  .ox-stat__v { font-size: 22px; }
  .ox-line { grid-template-columns: 1fr auto; gap: 12px 16px; padding: 18px 18px 18px 22px; }
  .ox-line__main { grid-column: 1 / -1; }
  .ox-line__amt { text-align: left; min-width: 0; }
  .ox-line__amt b, .ox-line__amt span { display: inline; }
  .ox-line__amt span { margin-left: 8px; }
  .ox-line__amt .ox-line__yr { display: inline-block; }
  .ox-month > summary { grid-template-columns: 1fr auto 16px; gap: 14px; padding: 16px 18px; }
  .ox-month__bar { display: none; }
  .ox-month__items { padding: 4px 18px 14px; }
  .ox-charge { grid-template-columns: 1fr auto; }
  .ox-charge > span:first-child { grid-column: 1 / -1; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ox-chev, .ox-bar i, .ox-open, .ox-month > summary, .ox-more > summary { transition: none; }
}