/* Address IQ subscriber portal - page-specific styles (the base, tokens and font come from /shared). */
:root { --paper: #fff; }                          /* white only behind a pairing code image: a code needs a light background to be scanned */
.snippet { font-family: ui-monospace, monospace; direction: ltr; text-align: left; background: var(--navy); border: 1px dashed var(--line-strong); padding: .7rem .9rem; border-radius: var(--r-s); word-break: break-all; }
.group-row { display: grid; grid-template-columns: auto 1fr; gap: .5rem .75rem; align-items: start; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.group-row:last-child { border-bottom: 0; }
.group-settings { grid-column: 2; margin: 0; }
.indicator { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--navy-2); }
.indicator::before { content: ''; width: .7rem; height: .7rem; border-radius: 50%; background: var(--orange); }
.indicator.active::before { background: var(--green); }
.indicator.off::before { background: var(--text-2); }
.qr { display: block; width: 200px; height: 200px; background: var(--paper); padding: 8px; border-radius: var(--r-s); }
.bars { display: grid; gap: .35rem; }
.bar { display: grid; grid-template-columns: 7rem 1fr 3rem; gap: .5rem; align-items: center; }
.bar .track { background: var(--navy); border: 1px solid var(--line); border-radius: 999px; height: .8rem; overflow: hidden; }
.bar .fill { display: block; height: 100%; background: var(--brand); }
.mock { border: 1px solid var(--line-strong); border-radius: var(--r-m); padding: .8rem; background: var(--navy); max-width: 420px; }
.mock .hit { padding: .4rem .6rem; border-radius: var(--r-s); background: var(--navy-2); margin-top: .4rem; }
.file-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.sign { font-family: ui-monospace, monospace; direction: ltr; }
.wide { max-width: none; }
.modal.wide { width: min(96vw, 900px); }