:root {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.47; font-variant-numeric: tabular-nums;
  --paper:#F4F2EE; --surface:#FFFFFF; --rule:#DDD9D1; --ink:#16181E; --ink-2:#4B505C; --ink-3:#666B77;
  --action:#043AD1; --action-hover:#032688; --on-action:#FFFFFF; --track:#E3E0D9;
  --free:#1B6B40; --tight:#8A5300; --tight-fill:#B26B00; --stuck:#B42318; --danger:#B42318;
  --band:#16181E; --band-ink:#F4F2EE; --band-ink-2:#B4B8C2; --band-free:#7BD6A0; --band-tight:#F2B84B;
  --demo:#FFF4D6; --demo-ink:#5C4300;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:4px; --r-md:8px;
  background:var(--paper); color:var(--ink);
}
* { box-sizing:border-box; }
body { margin:0; min-width:300px; }
button,input,select { font:inherit; }
button,summary { cursor:pointer; }
h1,h2,h3,p { margin:0; }
h1 { font-size:17px; line-height:24px; letter-spacing:-.02em; }
h2 { font-size:17px; line-height:24px; }
a { color:var(--action); }
[hidden] { display:none!important; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.wrap { max-width:1120px; margin:auto; padding:0 24px 48px; }
.mock-tools { min-height:32px; padding:0 max(24px,calc((100vw - 1072px)/2)); display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px dashed var(--tight-fill); background:var(--demo); color:var(--demo-ink); font-size:13px; font-weight:500; }
.demo-short { display:none; }
.mock-controls,.mock-controls label { display:flex; align-items:center; gap:8px; }
.mock-controls select { min-height:32px; border:0; background:transparent; color:inherit; font-weight:600; }
.mock-controls .quiet { color:inherit; min-height:32px; padding:0 4px; }
.top { height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--rule); margin-bottom:24px; }
.brand { display:flex; align-items:center; gap:8px; min-width:0; }
.brand img { flex:none; }
.identity { display:flex; align-items:center; gap:12px; color:var(--ink-2); font-size:13px; }
#admin-badge { border:1px solid var(--rule); border-radius:var(--r-sm); padding:2px 6px; color:var(--ink-2); }
.profile { display:none; position:relative; }
.profile summary { list-style:none; display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--ink-2); border-radius:50%; font-weight:700; }
.profile summary::-webkit-details-marker,.row-menu summary::-webkit-details-marker { display:none; }
.profile-menu { position:absolute; z-index:5; right:0; top:48px; width:min(280px,calc(100vw - 32px)); padding:12px; display:grid; gap:8px; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md); box-shadow:0 12px 32px rgb(0 0 0 / .18); font-size:13px; overflow-wrap:anywhere; }
.button,.secondary,.danger,.quiet { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border-radius:var(--r-md); font-weight:600; text-decoration:none; }
.button { border:1px solid var(--action); background:var(--action); color:var(--on-action); }
.button:hover { background:var(--action-hover); border-color:var(--action-hover); color:var(--on-action); }
.secondary { border:1px solid var(--ink-2); background:transparent; color:var(--ink); }
.secondary:hover { background:var(--track); }
.quiet { border:0; background:transparent; color:var(--action); padding:0 10px; }
.quiet:hover { color:var(--action-hover); text-decoration:underline; }
.danger { border:1px solid var(--danger); background:var(--danger); color:#FFFFFF; }
.danger:hover { filter:brightness(.86); }
button:active,a.button:active { transform:translateY(1px); }
button:disabled,[aria-busy=true] { opacity:.5; cursor:not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--action); outline-offset:2px; }
.login { width:min(400px,100%); display:grid; gap:16px; margin:clamp(56px,12vh,120px) auto; padding:24px; background:var(--surface); border-radius:var(--r-md); }
.login h2 { font-size:28px; line-height:32px; }
.login p { color:var(--ink-2); }
.login .button { width:100%; }
.login small { color:var(--ink-2); font-size:13px; text-align:center; }
.decision { min-height:112px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:24px; padding:24px; border-radius:var(--r-md); background:var(--band); color:var(--band-ink); }
.decision-free { display:flex; flex-direction:column; white-space:nowrap; line-height:1; }
.decision-free strong { font-size:56px; line-height:56px; letter-spacing:-.055em; }
.decision-free span { font-size:13px; color:var(--band-ink-2); }
.decision-free.free { color:var(--band-free); }
.decision-free.tight,.decision .tight,.decision .stale { color:var(--band-tight); }
.decision-main { min-width:0; }
.account-heading { display:flex; align-items:center; gap:10px; }
.decision-main .account-heading,.row-name .account-heading { display:flex; align-items:center; }
.provider-icon { display:block; flex:none; width:28px; height:28px; }
.provider-icon img { display:block; width:100%; height:100%; }
.provider-initial { display:grid; place-items:center; border-radius:6px; background:var(--ink-2); color:#fff; font-size:15px; font-weight:700; }
.decision-kicker { display:block; font-size:13px; color:var(--band-ink-2); }
.decision-main h2 { font-size:28px; line-height:32px; overflow-wrap:anywhere; }
.decision-main p { margin-top:4px; font-size:13px; line-height:18px; }
.decision-fresh { max-width:130px; color:var(--band-ink-2); font-size:13px; line-height:18px; text-align:right; }
.decision-empty { grid-column:1/-1; font-size:28px; line-height:32px; }
.decision-empty + p { grid-column:1/-1; margin-top:-12px; color:var(--band-ink-2); }
.decision-empty ~ .button { grid-column:1/-1; justify-self:start; }
.decision-empty ~ .decision-fresh { grid-column:1/-1; max-width:none; text-align:left; }
.decision.loading { align-content:center; }
.skeleton { display:block; width:33%; height:18px; border-radius:var(--r-sm); background:rgb(180 184 194 / .2); }
.skeleton + .skeleton { width:55%; }
.section-heading { min-height:68px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.section-heading h2 { font-size:20px; line-height:28px; }
.section-heading p { color:var(--ink-2); font-size:13px; }
.section-heading .button { min-height:44px; }
.provider-list { display:grid; gap:24px; }
.provider-section { min-width:0; }
.provider-heading { min-height:44px; display:flex; align-items:center; gap:10px; padding:8px 4px; font-size:16px; line-height:24px; font-weight:700; }
.provider-heading .provider-icon { width:26px; height:26px; }
.tower,.tower-head { list-style:none; margin:0; padding:0; }
.tower { background:var(--surface); border-radius:var(--r-md); }
.tower-head,.wide-row {
  display:grid; grid-template-columns:40px minmax(140px,1.3fr) 80px repeat(3,minmax(104px,1fr)) 96px 44px;
  column-gap:16px; align-items:center; padding:0 16px;
}
.tower-head { min-height:36px; color:var(--ink-2); font-size:13px; }
.row { border-top:1px solid var(--rule); }
.row:first-child { border-top:0; }
.row.first { box-shadow:inset 3px 0 var(--free); }
.wide-row { min-height:88px; padding-top:12px; padding-bottom:12px; }
.row-details { display:none; }
.row-summary { grid-column:1/4; display:grid; grid-template-columns:40px minmax(0,1fr) 80px; gap:16px; align-items:center; list-style:none; min-width:0; }
.position { color:var(--ink-2); font-size:13px; font-weight:700; letter-spacing:.04em; }
.first .position { color:var(--ink); }
.row-name { min-width:0; overflow-wrap:anywhere; }
.row-name strong { display:block; font-size:17px; line-height:24px; font-weight:600; }
.row-name small { display:block; color:var(--ink-2); font-size:13px; line-height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.relogin-badge { display:inline-block; padding:2px 6px; border-radius:var(--r-sm); background:var(--ink); color:var(--paper); font-size:11px; line-height:14px; font-weight:700; letter-spacing:.04em; }
.headroom { font-size:28px; line-height:32px; letter-spacing:-.04em; font-weight:650; white-space:nowrap; }
.free { color:var(--free); }.tight { color:var(--tight); }.stuck { color:var(--stuck); }
.row-body { grid-column:4/-1; display:grid; grid-template-columns:repeat(3,minmax(104px,1fr)) 96px 44px; gap:16px; align-items:center; min-width:0; }
.row-meters { grid-column:1/4; display:grid; grid-template-columns:repeat(3,minmax(104px,1fr)); gap:16px; min-width:0; }
.wide-row .row-meters { grid-column:4/7; }
.meter { min-width:0; min-height:56px; display:grid; align-content:center; gap:4px; }
.meter-label { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); font-size:13px; line-height:18px; }
.wide-row .meter-label { display:none; }
.wide-row .meter.scoped .meter-label { display:block; }
.meter-line { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.meter-line strong { color:var(--ink); font-size:16px; line-height:22px; font-weight:600; }
.meter-line strong.tight { color:var(--tight); }.meter-line strong.stuck { color:var(--stuck); }
.meter-line span,.meter-line time { display:block; max-width:100%; color:var(--ink-2); font-size:13px; line-height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.meter-progress { width:100%; height:6px; margin:0; border:0; border-radius:99px; appearance:none; background:var(--track); color:var(--meter-fill); accent-color:var(--meter-fill); --meter-fill:var(--ink-2); }
.meter-progress.tight { --meter-fill:var(--tight-fill); }
.meter-progress.stuck { --meter-fill:var(--stuck); }
.meter-progress::-webkit-progress-bar { border-radius:99px; background:var(--track); }
.meter-progress::-webkit-progress-value { border-radius:99px; background:var(--meter-fill); }
.meter-progress::-moz-progress-bar { border-radius:99px; background:var(--meter-fill); }
.meter.blocking .meter-line strong { font-weight:700; }
.meter.renewed .meter-line strong { color:var(--ink-3); font-weight:400; }
.meter.renewed .meter-progress { opacity:.45; }
.outside .meter-progress { opacity:.4; }
.outside .meter-line strong { color:var(--ink-3); }
.meter-empty { display:block; color:var(--ink-3); font-size:13px; }
.read { grid-column:4; color:var(--ink-3); font-size:13px; line-height:18px; }
.wide-row .read { grid-column:7; }
.read.tight { color:var(--tight); }
.read-label { display:none; }
.row-actions { grid-column:5; display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.wide-row .row-actions { grid-column:8; }
.row-actions .reconnect { min-height:36px; padding:0 12px; }
.outside .row-actions { grid-column:4/6; }
.outside .wide-row .read { display:none; }
.outside .wide-row .row-actions { grid-column:7/9; grid-row:1; }
.viewer-note { grid-column:4/6; color:var(--ink-2); font-size:13px; }
.wide-row .viewer-note { grid-column:7/9; }
.row-menu { position:relative; }
.row-menu summary { width:44px; height:44px; display:grid; place-items:center; list-style:none; border-radius:var(--r-md); color:var(--ink-2); font-size:24px; line-height:1; }
.row-menu summary:hover { background:var(--track); }
.row-menu-options { position:absolute; z-index:4; right:0; top:44px; min-width:160px; padding:4px; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md); box-shadow:0 12px 32px rgb(0 0 0 / .18); }
.row-menu-options .quiet { width:100%; justify-content:flex-start; color:var(--stuck); }
.just-added { animation:arrive 1.2s; }
@keyframes arrive { 0%,100% { background:transparent; } 50% { background:var(--track); } }
dialog { width:min(520px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:24px; border:0; border-radius:var(--r-md); background:var(--surface); color:var(--ink); box-shadow:0 12px 32px rgb(0 0 0 / .18); }
dialog::backdrop { background:rgb(22 24 30 / .45); }
.dialog-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.dialog-heading h2,.disconnect-dialog h2 { font-size:24px; line-height:28px; }
.dialog-heading p { margin-top:4px; color:var(--ink-2); font-size:13px; }
.steps { display:flex; justify-content:center; gap:32px; padding:0; margin:20px 0 24px; list-style:none; }
.provider-step { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
.provider-choice { min-height:96px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; padding:16px; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--surface); color:var(--ink); text-align:left; font-weight:600; }
.provider-choice:hover:not(:disabled) { border-color:var(--action); background:var(--paper); }
.provider-choice:disabled { opacity:.6; cursor:not-allowed; }
.provider-choice img { width:24px; height:24px; }
.provider-choice small { color:var(--ink-2); font-size:13px; font-weight:400; }
.device-code { width:fit-content; padding:12px 16px; border:1px solid var(--rule); border-radius:var(--r-md); font:700 22px/1.2 ui-monospace, SFMono-Regular, monospace; letter-spacing:.12em; user-select:all; }
.steps li { display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--ink-2); border-radius:50%; color:var(--ink-2); font-size:13px; font-weight:700; }
.steps li[aria-current=step] { background:var(--ink); border-color:var(--ink); color:var(--surface); }
.steps li.done { border-color:var(--free); color:var(--free); }
.connect-dialog form,#authorize-step { display:grid; gap:12px; }
.connect-dialog label { font-weight:600; }
.connect-dialog input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--ink-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); }
.connect-dialog .button,.connect-dialog .quiet { width:100%; }
.connect-dialog p { font-size:15px; }
.error { color:var(--stuck)!important; font-size:13px!important; }
.disconnect-dialog { width:min(420px,calc(100vw - 32px)); }
.disconnect-dialog p { margin:16px 0 24px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
.toast { position:fixed; right:24px; bottom:24px; z-index:10; max-width:420px; min-height:48px; padding:8px 8px 8px 16px; display:flex; align-items:center; gap:12px; border-radius:var(--r-md); background:var(--ink); color:var(--paper); font-size:13px; box-shadow:0 12px 32px rgb(0 0 0 / .18); }
.toast.error-toast { border-left:4px solid var(--stuck); }
.toast-close { min-width:44px; min-height:44px; border:0; background:transparent; color:inherit; font-size:24px; }
/* A página de autorização local usa estas classes e é servida pelo mock. */
.panel { width:min(520px,100%); display:grid; gap:16px; margin:32px auto; padding:24px; border-radius:var(--r-md); background:var(--surface); }
.panel input { width:100%; min-height:44px; padding:10px; border:1px solid var(--ink-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); }
.eyebrow { color:var(--ink-2); font-size:13px; }
@media (max-width:959px) {
  .tower-head { display:none; }
  .wide-row { grid-template-columns:40px minmax(0,1fr) 80px 96px 44px; row-gap:8px; }
  .wide-row .row-meters { grid-column:2/-1; grid-row:2; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .wide-row .meter-label { display:block; }
  .wide-row .read { grid-column:4; grid-row:1; }
  .wide-row .row-actions { grid-column:5; grid-row:1; }
  .outside .wide-row .row-actions,.wide-row .viewer-note { grid-column:4/6; grid-row:1; }
}
@media (max-width:639px) {
  .wrap { padding:0 16px 40px; }
  .mock-tools { padding:0 16px; }
  .demo-long { display:none; }.demo-short { display:inline; }
  .top { margin-bottom:16px; }
  .identity { display:none; }.profile { display:block; }
  .decision { min-height:128px; grid-template-columns:auto minmax(0,1fr); gap:8px 16px; padding:16px; }
  .decision-free strong { font-size:44px; line-height:44px; }
  .decision-free { grid-column:1; grid-row:1/3; }
  .decision-main { display:contents; }
  .decision-kicker { grid-column:2; grid-row:1; align-self:end; }
  .decision-main h2 { grid-column:2; grid-row:2; align-self:start; font-size:24px; line-height:28px; }
  .decision-main p { grid-column:1/-1; grid-row:3; }
  .decision-fresh { grid-column:1/-1; max-width:none; text-align:left; }
  .decision-empty { font-size:24px; line-height:28px; }
  .section-heading { min-height:76px; }
  .section-heading h2 { font-size:18px; line-height:24px; }
  .section-heading p { margin-top:2px; }
  .section-heading .button { padding:0 10px; font-size:13px; }
  .tower { display:grid; gap:var(--s3); background:transparent; }
  .provider-list { gap:var(--s5); }
  .provider-heading { padding:4px 0 10px; }
  .row { border:1px solid var(--rule); border-radius:var(--r-md); background:var(--surface); }
  .row:first-child { border-top:1px solid var(--rule); }
  .wide-row { display:none; }
  .row-details { display:block; padding:var(--s4); }
  .row-summary { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:10px; align-items:center; }
  .row-name strong { font-size:18px; line-height:24px; }
  .row-name small { margin-top:2px; font-size:13px; line-height:18px; }
  .row-details .outside-read,.row-details .row-name small time { display:none; }
  .headroom { font-size:28px; line-height:32px; }
  .row-body { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4); margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--rule); }
  .row-meters { grid-column:1; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4); }
  .meter { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; }
  .meter-label { display:block; }
  .meter-line { display:contents; }
  .meter-line strong { grid-column:2; grid-row:1; font-size:16px; line-height:20px; }
  .meter-line time,.meter-line span { grid-column:1/-1; grid-row:2; }
  .meter-progress { grid-column:1/-1; grid-row:3; margin-top:4px; }
  .meter-empty { grid-column:2; grid-row:1; }
  .read { grid-column:auto; grid-row:auto; }
  .read-label { display:inline; }
  .row-actions,.outside .row-actions,.viewer-note { grid-column:auto; grid-row:auto; width:100%; }
  .row-actions { display:grid; grid-template-columns:1fr; }
  .row-actions .reconnect { min-height:44px; width:100%; }
  .row-menu { width:100%; }
  .row-menu summary { width:100%; border:1px solid var(--ink-2); font-size:15px; font-weight:600; }
  .row-menu summary::before { content:'Desconectar…'; font-size:15px; }
  .row-menu summary { font-size:0; }
  .row-menu-options { position:static; box-shadow:none; margin-top:4px; }
  .toast { left:16px; right:16px; bottom:16px; max-width:none; }
  .connect-dialog { width:100vw; max-width:none; height:100vh; max-height:none; margin:0; border-radius:0; }
  .disconnect-dialog { width:100vw; max-width:none; position:fixed; top:auto; bottom:0; margin:0; border-radius:8px 8px 0 0; }
}
@media (prefers-color-scheme:dark) {
  :root {
    --paper:#0F1115; --surface:#181B21; --rule:#2A2E37; --ink:#ECEAE5; --ink-2:#A7ACB7; --ink-3:#8D929E;
    --action:#9DB4FF; --action-hover:#C2D0FF; --on-action:#0B1A4A; --track:#2C3039;
    --free:#6FCF97; --tight:#F2B84B; --tight-fill:#F2B84B; --stuck:#FF8A7A;
    --band:#23272F; --band-ink:#ECEAE5; --band-ink-2:#A7ACB7; --band-free:#6FCF97; --band-tight:#F2B84B;
    --demo:#2A2414; --demo-ink:#F2D48A;
  }
  .steps li[aria-current=step] { color:var(--paper); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }