/* NEARLY BTC live tax widget — colours are variables so the site theme can override them */
.tw {
  --tw-bg: #0d0d0d;
  --tw-line: #262626;
  --tw-ink: #f5f5f5;
  --tw-muted: #9a9a9a;
  --tw-accent: #f7931a;   /* bitcoin orange */
  --tw-creator: #f7931a;
  --tw-burn: #e8c547;
  --tw-holders: #5fd08a;
  --tw-mono: "Space Mono", ui-monospace, Menlo, monospace;

  max-width: 420px; padding: 1.4rem; border-radius: 16px;
  background: var(--tw-bg); border: 1px solid var(--tw-line); color: var(--tw-ink);
  font-family: var(--tw-mono); box-sizing: border-box;
}
.tw *, .tw *::before, .tw *::after { box-sizing: border-box; }

.tw-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1.2rem; }
.tw-title { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.15rem; font-weight: 700; }
.tw-icon { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--tw-accent) 0 25%, color-mix(in srgb, var(--tw-accent) 45%, transparent) 25% 100%); }
.tw-pill { font-size: .78rem; font-weight: 700; color: var(--tw-accent); padding: .35rem .7rem; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--tw-accent) 55%, transparent); background: color-mix(in srgb, var(--tw-accent) 10%, transparent); white-space: nowrap; }

.tw-split { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.2rem; }
.tw-donut { position: relative; flex: none; width: 116px; aspect-ratio: 1; }
.tw-donut svg { width: 100%; height: 100%; }
.tw-track { fill: none; stroke: var(--tw-line); stroke-width: 12; }
.tw-seg { fill: none; stroke-width: 12; transition: stroke-dasharray .6s ease, stroke-dashoffset .6s ease; }
.tw-donut-num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }

.tw-legend { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: .7rem; min-width: 0; }
.tw-legend li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: .6rem; font-size: .88rem; }
.tw-legend i { width: 10px; height: 10px; border-radius: 50%; }
.tw-legend span { color: var(--tw-muted); }
.tw-legend b { font-variant-numeric: tabular-nums; }

.tw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--tw-line); border: 1px solid var(--tw-line); border-radius: 12px; overflow: hidden; }
.tw-cell { background: var(--tw-bg); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.tw-k { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tw-muted); }
.tw-v { font-size: .98rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tw-s { font-size: .74rem; color: var(--tw-muted); min-height: 1em; font-variant-numeric: tabular-nums; }

.tw-foot { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; font-size: .76rem; color: var(--tw-muted); }
.tw-live { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.tw-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--tw-holders); box-shadow: 0 0 0 0 color-mix(in srgb, var(--tw-holders) 60%, transparent); animation: tw-pulse 2s infinite; }
.tw.tw-stale .tw-live i { background: var(--tw-burn); animation: none; }
@keyframes tw-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

@media (max-width: 380px) {
  .tw-split { flex-direction: column; align-items: stretch; }
  .tw-donut { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-seg { transition: none; }
  .tw-live i { animation: none; }
}