.uso-page { display:flex; flex-direction:column; gap:20px; }
.uso-head { display:flex; flex-direction:column; gap:4px; }
.pa .uso-crumb {
  align-self:flex-start; display:inline-flex; align-items:center; gap:4px; border:0; background:transparent;
  color:var(--link); font:inherit; font-weight:600; font-size:12px; padding:4px 8px 4px 0; min-height:44px;
  margin-bottom:0; cursor:pointer; border-radius:8px;
}
.uso-crumb:hover { text-decoration:underline; }
.uso-h1 { margin:0; font-size:24px; line-height:1.2; font-weight:700; text-wrap:balance; }
.uso-h2 { margin:0; font-size:15px; font-weight:700; }
.uso-sub { margin:0; color:var(--text-2); font-size:13px; max-width:70ch; }
.uso-sub.sm { font-size:12px; }
.uso-grow { flex:1; min-width:0; }
.pa .uso-card { background:var(--surface); border-radius:12px; box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--border); }
.uso-total { padding:24px; display:flex; flex-direction:column; gap:14px; }
.uso-total-top { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.uso-big { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:44px; font-weight:500; line-height:1; letter-spacing:-0.03em; }
.uso-big small { font-size:20px; }
.uso-lbl { display:flex; flex-direction:column; padding-bottom:4px; }
.uso-renova { display:flex; flex-direction:column; padding-bottom:4px; margin-left:auto; text-align:right; }
.uso-lbl strong { font-size:14px; }
.uso-lbl span { font-size:12px; color:var(--text-2); }
.uso-renova span { font-size:12px; color:var(--text-2); }
.uso-renova strong { font-size:13px; }
.pa .uso-meter { height:12px; border-radius:999px; background:var(--meter-track); overflow:hidden; }
.pa .uso-meter.thin { height:8px; }
.pa .uso-fill { height:100%; border-radius:999px; background:var(--meter-fill); transition:width .5s cubic-bezier(.16,1,.3,1); }
.pa .uso-fill.soft { background:var(--meter-soft); }
.pa .uso-fill.warn { background:#B45309; }
.pa .uso-fill.full { background:#B91C1C; }
.pa.dark .uso-fill.warn { background:#F59E0B; }
.pa.dark .uso-fill.full { background:#EF4444; }
.uso-buy { padding:20px; display:flex; flex-direction:column; gap:16px; }
.uso-buy-head { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.uso-packs { border:0; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.uso-pack input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.pa .uso-pack {
  position:relative; display:flex; flex-direction:column; gap:4px; padding:16px; border-radius:12px;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong); cursor:pointer; min-height:44px;
}
.uso-pack:focus-within { outline:2px solid var(--focus); outline-offset:2px; }
.pa .uso-pack:hover { background:var(--hover); }
.pa .uso-pack.on { background:var(--nav-active-bg); box-shadow:inset 0 0 0 2px var(--nav-active-fg); }
.uso-pack-amt { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:22px; font-weight:500; }
.uso-pack-txt { font-size:12px; color:var(--text-2); }
.uso-pack-price { font-size:13px; font-weight:600; margin-top:4px; font-variant-numeric:tabular-nums; }
.uso-buy-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.uso-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.uso-break { padding:20px 20px 12px; }
.uso-break-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; }
.uso-break-head span { font-size:12px; color:var(--text-2); }
.uso-item + .uso-item { box-shadow:0 -1px 0 var(--border); }
.uso-item .uso-row { padding-bottom:4px; }
.uso-row { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 44px; gap:12px; align-items:center; padding:10px 0; }
.uso-who { display:flex; align-items:center; gap:10px; min-width:0; }
.uso-who > span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.pa .uso-av {
  width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:12px; font-weight:700; background:var(--tone-neutral-bg); color:var(--tone-neutral-fg);
}
.pa .uso-dot {
  width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:12px; font-weight:700; background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--border); color:var(--text-2);
}
.uso-pct { text-align:right; font-size:13px; font-variant-numeric:tabular-nums; font-family:var(--mono); }
.uso-parts { margin:0; padding:0 0 10px 38px; font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums; }
.uso-note { margin:4px 0 8px; font-size:12px; color:var(--text-2); }
.uso-note strong { color:var(--text); }
.uso-explain { padding:16px 20px; font-size:12px; color:var(--text-2); display:flex; gap:12px; align-items:flex-start; }
.uso-explain p { margin:0; max-width:70ch; }
@container (max-width: 719px) {
  .uso-total { padding:20px 16px; }
  .uso-big { font-size:36px; }
  .uso-renova { margin-left:0; text-align:left; flex-basis:100%; }
  .uso-packs { grid-template-columns:minmax(0,1fr); }
  .uso-grid { grid-template-columns:minmax(0,1fr); }
  .uso-row { grid-template-columns:minmax(0,1fr) 44px; }
  .uso-row .uso-meter { grid-column:1 / -1; grid-row:2; }
  .uso-callout .uso-grow { flex:1 1 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .pa .uso-fill { transition:none; }
}