* { box-sizing: border-box; }
body { min-height: 100dvh; margin: var(--zero); background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--body); line-height: var(--leading); }
#app { max-width: var(--page); margin: var(--zero) auto; padding: var(--safe-top) max(var(--s4), var(--safe-right)) calc(var(--nav) + var(--s6) + var(--safe-bottom)) max(var(--s4), var(--safe-left)); }
header { display: flex; justify-content: space-between; align-items: center; min-height: var(--nav); gap: var(--s2); }
.brand { font-weight: 700; letter-spacing: var(--tracking); }
p, h1, h2 { margin: var(--zero); }
h1, h2 { font-size: var(--heading); line-height: var(--tight); }
main { display: grid; gap: var(--s3); }
.card { background: var(--card); border-radius: var(--radius); padding: var(--s6); }
.label { color: var(--muted); font-size: var(--label); letter-spacing: var(--tracking); text-transform: uppercase; font-weight: 600; }
.muted { color: var(--muted); }
.number { font-size: var(--hero); font-weight: 700; line-height: var(--tight); color: var(--accent); margin: var(--s1) var(--zero) var(--s2); }
.number.last-session { color: var(--alert); }
.next-accent { width: var(--accent-rule-width); height: var(--accent-rule-height); background: var(--accent); margin-top: var(--s2); }
.next { border-top: var(--hairline) solid var(--rule); margin-top: var(--s4); padding-top: var(--s4); }
.next-line { font-size: var(--next-size); font-weight: 700;  }
.stack { display: grid; gap: var(--s3); }
button, input { font: inherit; min-height: var(--target); border-radius: var(--inner-radius); border: var(--hairline) solid var(--rule); padding: var(--s2) var(--s3); }
input { width: 100%; background: var(--card); color: var(--ink); font-size: var(--body); }
button { min-width: var(--target); cursor: pointer; color: var(--ink); background: var(--card); }
button.primary { background: var(--ink); color: var(--card); }
button:disabled { cursor: wait; }
:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset); }
nav { position: fixed; bottom: var(--zero); left: var(--zero); right: var(--zero); max-width: var(--page); margin: var(--zero) auto; display: flex; background: var(--card); border-top: var(--hairline) solid var(--rule); padding-bottom: var(--safe-bottom); padding-left: var(--safe-left); padding-right: var(--safe-right); }
nav button { flex: 1; min-height: var(--nav); border: var(--zero); border-radius: var(--zero); display: grid; justify-items: center; align-content: center; gap: var(--s1); color: var(--muted); }
nav button[aria-current] { color: var(--ink); font-weight: 700; }
svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.5; }
ul { list-style: none; padding: var(--zero); margin: var(--s2) var(--zero) var(--zero); }
.row { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s3) var(--zero); border-bottom: var(--hairline) solid var(--rule); font-size: var(--small); }
.row:last-child { border-bottom: var(--zero); }
.row-text { display: flex; flex-direction: column; align-items: baseline; gap: var(--s1); flex: 1; min-width: var(--zero); }
.row-text > :last-child { text-align: left; }
.row[data-testid] { font-size: var(--small); }
.row-text > :first-child { white-space: nowrap; }
.next.no-package { border: var(--zero); margin-top: var(--zero); padding-top: var(--zero); }
.unlimited { color: var(--scan); overflow-wrap: anywhere; font-size: var(--unlimited-size); }
.mark { width: var(--mark); height: var(--mark); flex-shrink: 0; border: var(--hairline) solid var(--muted); border-radius: var(--round); }
.mark.used { background: var(--ink); border-color: var(--ink); }
.legend { display: flex; align-items: center; gap: var(--s2); font-size: var(--small); color: var(--muted); margin-top: var(--s2); }
.package-start { border-top: var(--hairline) solid var(--rule); padding-top: var(--s3); font-size: var(--small); color: var(--muted); }
.install { font-size: var(--small); }
.account { margin-top: var(--s4); }
.error { color: var(--ink); font-weight: 700; border-left: var(--focus-width) solid var(--ink); padding-left: var(--s3); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

.renewal { color: var(--muted); margin-top: var(--s2); }
.small, small { font-size: var(--small); }
summary { cursor: pointer; min-height: var(--target); padding: var(--s2) var(--zero); }
.secondary { padding: var(--s3) var(--s6); }
.install { padding: var(--s3) var(--zero); }
.metric { padding-top: var(--s3); padding-bottom: var(--s3); border-bottom: var(--hairline) solid var(--rule); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.metric-top strong { white-space: nowrap; }
.range { width: 100%; height: var(--s4); margin: var(--s2) var(--zero); stroke: none; overflow: visible; }
.range .track { stroke: var(--rule); stroke-width: 2; }
.range .band { stroke: var(--band); stroke-width: 4; }
.range .ticks { stroke: var(--muted); stroke-width: .3; }
.range circle { fill: var(--accent); }
.range.outside circle { fill: var(--muted); }
.scan-peek { display: grid; gap: var(--s2); text-align: left; border: var(--zero); }
.scan-peek::before { content: ""; width: var(--accent-rule-width); height: var(--accent-rule-height); background: var(--scan); }
.peek-title { font-size: var(--heading); font-weight: 700; }
.scan-peek h2 { margin: var(--s2) var(--zero); }
dialog { color: var(--ink); background: var(--card); border: var(--hairline) solid var(--rule); border-radius: var(--radius) var(--radius) var(--zero) var(--zero); margin: auto auto var(--zero); width: 100%; max-width: var(--page); max-height: calc(100dvh - var(--s7)); padding: var(--s4) max(var(--s4), var(--safe-right)) calc(var(--s4) + var(--safe-bottom)) max(var(--s4), var(--safe-left)); }
dialog::backdrop { background: var(--shade); }
dialog[open], .number { animation: reveal var(--motion) ease-out; }
.toggles { display: flex; gap: var(--s2); }
[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.segment-card { border-top: var(--hairline) solid var(--rule); padding: var(--s3) var(--zero); }
.segment-value { color: var(--scan); font-size: var(--stat); }
@keyframes reveal { from { opacity: 0; transform: translateY(8%); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { dialog[open], .number { animation: none; } }

.metric p + p { margin-top: var(--s1); }
details.card { padding: var(--s3) var(--s4); }
summary { list-style: none; display: flex; justify-content: space-between; gap: var(--s2); }
summary::-webkit-details-marker { display: none; }
summary::after { content: '⌄'; }
details[open] > summary::after { content: '⌃'; }
.segment-values { display: flex; justify-content: space-between; gap: var(--s3); }
.segment-value:not(.selected) { color: var(--ink); }
a { color: var(--ink); }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--zero); }
.legal-links a, header a { display: inline-flex; align-items: center; min-height: var(--target); }
.legal-copy { display: grid; gap: var(--s3); overflow-wrap: anywhere; }
.legal-copy ul { list-style: disc; padding-left: var(--s4); }
.legal-copy ol { padding-left: var(--s4); }

.consent-card a { padding-block: var(--s3); }
.legal-copy { min-width: var(--zero); }
.legal-copy h2 { font-size: var(--next-size); }
.legal-table { max-width: 100%; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: var(--small); }
.legal-table thead { position: absolute; width: var(--hairline); height: var(--hairline); overflow: hidden; clip-path: inset(50%); }
.legal-table tbody, .legal-table tr, .legal-table td { display: block; }
.legal-table tr { padding: var(--s3) var(--zero); border-bottom: var(--hairline) solid var(--rule); }
.legal-table td { padding: var(--s1) var(--zero); }
.legal-table td::before { content: attr(data-label); display: block; font-weight: 700; }
.legal-table code { overflow-wrap: anywhere; }