/* Páginas de conta (cadastro, entrar, painel, admin). Tokens iguais aos da página inicial. */
/* As cores de cada tema ficam em /looks.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 "Archivo",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent-ink)}
code,pre,kbd,.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px 56px}
.narrow{max-width:460px}

.wm{display:inline-flex;align-items:baseline;font-size:1.55rem;font-weight:800;font-stretch:125%;letter-spacing:-.035em;line-height:1;white-space:nowrap;color:var(--ink);text-decoration:none}
.wm-o{display:inline-block;position:relative;width:.6em;height:.6em;border:.105em solid currentColor;border-radius:50%;margin-right:.035em}
.wm-o i{position:absolute;inset:.085em;border-radius:50%;background:currentColor}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0}
.top nav{display:flex;align-items:center;gap:20px}
.top nav a,.top nav button{padding:0;border:0;background:none;color:var(--ink-2);font-size:.95rem;font-weight:500;text-decoration:none}
.top nav a:hover,.top nav button:hover,.top nav a[aria-current="page"]{color:var(--ink)}

.title{margin:36px 0 12px;font-size:clamp(2.2rem,6vw,3.6rem);font-weight:800;font-stretch:125%;line-height:1;letter-spacing:-.04em}
.title:focus{outline:none}
.lede{margin:0 0 28px;max-width:54ch;color:var(--ink-2);font-size:1.05rem}
.sub{margin:0 0 10px;font-size:1rem;font-weight:700;font-stretch:112%}
.note{color:var(--ink-2);font-size:.92rem}
.status-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;color:var(--ink-2)}

.field{display:grid;gap:6px;margin-bottom:16px}
.field label,.field .label{font-weight:600}
.hint{font-size:.85rem;color:var(--ink-2)}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
textarea{min-height:84px;resize:vertical}
input.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.92rem}
.check{display:flex;align-items:center;gap:10px;margin:18px 0}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.ts{min-height:65px;margin:4px 0 16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--accent-strong)}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink-2)}
.btn.danger,.btn.ghost.danger{background:none;color:var(--err);box-shadow:inset 0 0 0 1px currentColor}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.msg{margin:10px 0 0;min-height:1.4em;font-size:.92rem}
.msg.err{color:var(--err)}
.msg.ok{color:var(--ok)}
.msg.toast:not(:empty){position:fixed;left:50%;bottom:24px;z-index:20;max-width:calc(100% - 32px);margin:0;padding:10px 16px;border-radius:10px;background:var(--ink);color:var(--paper);box-shadow:0 12px 32px rgba(10,15,53,.28);transform:translateX(-50%)}
.msg.toast.err:not(:empty){background:var(--err);color:#fff}

.secret{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 18px;border-radius:12px;background:var(--code-bg);color:var(--code-ink)}
.secret code{flex:1;min-width:0;font-size:.98rem;font-weight:500;overflow-wrap:anywhere}
.secret code.big{font-size:1.15rem;line-height:1.7;letter-spacing:.03em}
.secret code.big span{display:inline-block;margin-right:.55em}
.copy{flex:none;padding:6px 12px;border:0;border-radius:7px;background:rgba(255,255,255,.1);color:#E7EAFF;font-size:.82rem;font-weight:600}
.copy:hover{background:rgba(255,255,255,.18)}

.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent);font-size:.88rem;font-weight:600}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.pending{color:var(--warn)}
.pill.active{color:var(--ok)}
.pill.expired,.pill.blocked{color:var(--err)}

.notice{margin:20px 0 0;padding:16px 18px;border-radius:12px;background:color-mix(in srgb,var(--warn) 13%,transparent)}
.sect{padding:32px 0;border-top:1px solid var(--line)}
main>.sect:first-of-type{margin-top:28px}
.sect h2{margin:0 0 18px;font-size:1.4rem;font-weight:780;font-stretch:115%;letter-spacing:-.02em}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
@media (max-width:760px){.grid2{grid-template-columns:minmax(0,1fr);gap:28px}}


.facts{margin:0;display:grid;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:190px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.facts dt{font-weight:600}
.facts dd{margin:0;color:var(--ink-2)}
@media (max-width:520px){.facts div{grid-template-columns:minmax(0,1fr);gap:2px}}

.chart{position:relative;margin-top:34px}
.bars{display:flex;align-items:flex-end;gap:2px;height:170px;border-bottom:1px solid var(--line)}
.bars button{flex:1;display:flex;align-items:flex-end;height:100%;padding:0;border:0;background:none}
.bars i{display:block;width:100%;border-radius:4px 4px 0 0;background:var(--bar)}
.bars button:hover i,.bars button:focus-visible i{filter:brightness(1.18)}
.xlab{display:flex;gap:2px;margin-top:6px;font-size:.74rem;color:var(--ink-2)}
.xlab span{flex:1;text-align:center;white-space:nowrap}
.ymax{position:absolute;right:0;top:-24px;font-size:.78rem;color:var(--ink-2)}
.tip{position:absolute;z-index:3;padding:6px 10px;border-radius:8px;background:var(--ink);color:var(--paper);font-size:.82rem;white-space:nowrap;pointer-events:none;transform:translate(-50%,calc(-100% - 8px))}

.scroll-x{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{padding:10px 14px 10px 0;border-bottom:2px solid var(--ink);text-align:left;font-weight:700;white-space:nowrap}
.tbl td{padding:10px 14px 10px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.link{cursor:pointer}
.tbl tr.link:hover td{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.empty{margin:0;padding:12px 0;color:var(--ink-2)}

.code{background:var(--code-bg);color:var(--code-ink);border-radius:12px;overflow:hidden}
.code-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:6px 6px 6px 16px;background:var(--code-bar);font-size:.8rem;color:var(--code-dim)}
.code pre{margin:0;padding:15px 18px;overflow-x:auto;font-size:.84rem;line-height:1.65}

details.alt{margin-top:26px;border-top:1px solid var(--line)}
details.alt summary{padding:16px 0;font-weight:600;cursor:pointer}
.foot-note{margin-top:28px;color:var(--ink-2)}

.tabs{display:flex;gap:4px;width:max-content;max-width:100%;margin:6px 0 8px;padding:4px;border-radius:10px;background:color-mix(in srgb,var(--ink) 6%,transparent);overflow-x:auto}
.tabs a{padding:8px 16px;border-radius:7px;color:var(--ink-2);font-size:.92rem;font-weight:600;text-decoration:none;white-space:nowrap}
.tabs a[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(10,15,53,.12)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--ink-2);font-size:.88rem;font-weight:600}
.chips button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.toolbar input[type=search]{max-width:260px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0}
.stats dt{font-size:.88rem;color:var(--ink-2)}
.stats dd{margin:4px 0 0;font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;font-stretch:118%;line-height:1.05;letter-spacing:-.03em}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
ol.rank{margin:0;padding:0 0 0 1.4em}
ol.rank li{padding:9px 0;border-bottom:1px solid var(--line)}
ol.rank span{margin-left:8px;color:var(--ink-2)}
.efforts{display:flex;flex-wrap:wrap;gap:8px 16px;margin:6px 0}
.efforts label{display:flex;align-items:center;gap:6px;font-weight:500}
.grid-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
@media (max-width:520px){.grid-fields{grid-template-columns:minmax(0,1fr)}}
.back{display:inline-block;margin-top:14px;color:var(--ink-2);font-weight:500;text-decoration:none}
.back:hover{color:var(--ink)}
@media (max-width:680px){.wrap{padding:0 16px 48px}.top nav{gap:14px}}

/* ---------- efeitos (fx.js) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.2s ease-in both vt-out}
  ::view-transition-new(root){animation:.42s cubic-bezier(.2,.8,.2,1) .04s both vt-in}
}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
.top .wm{view-transition-name:wm}

.title{position:relative}
.tt-ghost{color:transparent}
.tt-vis{position:absolute;inset:0}
.tt-caret{display:inline-block;width:.4em;height:.74em;margin-left:.07em;background:var(--accent-ink);vertical-align:baseline}
.tt-caret.idle{animation:blink 1s steps(1) infinite}
.code-caret{display:inline-block;width:.55em;height:1.15em;margin-left:.04em;background:var(--code-ink);vertical-align:-.22em}
@keyframes blink{50%{opacity:0}}
.scr{font-style:normal;color:#8C95FF}

.bars i.grow{transform-origin:bottom;animation:grow .75s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleY(0)}}
.left{font-variant-numeric:tabular-nums}
.pill.pending::before,.live i{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.7)}}

.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.flip{animation:flip .55s cubic-bezier(.2,.8,.2,1)}
@keyframes flip{from{opacity:0;transform:perspective(300px) rotateX(-90deg)}}
.row-in{animation:row-in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes row-in{from{opacity:0;transform:translateY(6px)}}
.row-new td{animation:row-new 2.6s ease-out}
@keyframes row-new{from{background:color-mix(in srgb,var(--accent) 18%,transparent)}}
.msg.toast:not(:empty){animation:toast-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,12px)}}
.wipe{position:fixed;inset:0;z-index:50;background:var(--accent);transform-origin:left;animation:wipe .45s cubic-bezier(.7,0,.3,1) both}
@keyframes wipe{from{transform:scaleX(0)}}

.btn{position:relative;transition:opacity .3s,background-color .15s,box-shadow .15s}
.btn.busy,.btn.busy[disabled]{opacity:1;color:transparent}
.btn.busy::after{content:"";position:absolute;inset:0;width:18px;height:18px;margin:auto;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn.ghost.busy::after{border-color:var(--ink);border-right-color:transparent}
.btn.lit{animation:lit .5s cubic-bezier(.2,.8,.2,1)}
@keyframes lit{40%{transform:scale(1.05)}}
@keyframes spin{to{transform:rotate(360deg)}}

.top nav .snd{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%}
.top nav .snd:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.snd svg{width:19px;height:19px}
.tabs-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.live{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-size:.88rem;font-weight:600}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.code-progress{display:flex;align-items:center;gap:12px}
.segs{display:flex;flex:1;gap:4px;max-width:220px}
.segs i{flex:1;height:5px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.segs b{display:block;width:0;height:100%;border-radius:999px;background:var(--bar);transition:width .18s ease-out,background-color .3s}
.segs.done b{background:var(--ok)}
.t-k{color:#9EABFF}.t-s{color:#8FE3C4}.t-n{color:#7FD4FF}.t-p{color:#6E78B8}.t-c{color:#6E78B8;font-style:italic}

/* ---------- temas: acabamentos das páginas de conta ---------- */
/* Órbita: vidro sobre a noite */
[data-look="orbita"] .sect,[data-look="orbita"] main.glass{border-top:0;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.22)}
[data-look="orbita"] .sect{margin-top:18px;padding:26px 26px 28px}
[data-look="orbita"] main.glass{margin:24px auto 0;padding:8px 28px 28px}
[data-look="orbita"] .btn:not(.ghost):not(.danger){background:linear-gradient(180deg,#4B55FF,#2B35F0);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 28px rgba(43,53,240,.45)}
[data-look="orbita"] .btn:not(.ghost):not(.danger):hover{background:linear-gradient(180deg,#5A63FF,#343EF5)}
[data-look="orbita"] .btn.ghost{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
[data-look="orbita"] .secret{background:rgba(3,6,28,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
[data-look="orbita"] .code{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
[data-look="orbita"] .stats dd{text-shadow:0 0 26px rgba(124,134,255,.5)}
[data-look="orbita"] .pill::before{box-shadow:0 0 10px currentColor}
[data-look="orbita"] :is(input[type=text],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea){border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
[data-look="orbita"] .tabs{background:rgba(255,255,255,.05)}
[data-look="orbita"] .tabs a[aria-current="page"]{background:rgba(124,134,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(140,149,255,.45)}
[data-look="orbita"] .bars i{background:linear-gradient(180deg,#A7AEFF,#2B35F0);box-shadow:0 0 16px rgba(79,89,255,.45)}

/* Tipografia viva: letra grande e estreita, linhas finas, campos só com a linha de baixo */
[data-look="tipografia"] .title{font-size:clamp(3rem,10vw,5.8rem);font-stretch:62%;letter-spacing:-.02em;line-height:.9}
[data-look="tipografia"] .sect{border-top:1.5px solid var(--ink)}
[data-look="tipografia"] .sect h2{font-size:clamp(1.8rem,4vw,2.4rem);font-stretch:66%;letter-spacing:-.01em}
[data-look="tipografia"] .stats dd{font-size:clamp(2.6rem,6vw,4.2rem);font-stretch:62%;letter-spacing:-.02em;line-height:.9}
[data-look="tipografia"] :is(input[type=text],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea){padding-left:0;padding-right:0;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent}
[data-look="tipografia"] :is(input[type=text],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea):focus-visible{outline:none;border-bottom-color:var(--accent);box-shadow:0 2px 0 0 var(--accent)}
[data-look="tipografia"] .btn:not(.ghost):not(.danger){border-radius:999px;background:var(--ink);color:var(--paper)}
[data-look="tipografia"] .btn:not(.ghost):not(.danger):hover{background:var(--accent);color:#fff}
[data-look="tipografia"] .btn.ghost{border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink)}
[data-look="tipografia"] .secret,[data-look="tipografia"] .code{border-radius:4px}
[data-look="tipografia"] .segs{gap:8px;max-width:280px}
[data-look="tipografia"] .segs i,[data-look="tipografia"] .segs b{height:8px;border-radius:0}
[data-look="tipografia"] .bars i{border-radius:0;background:var(--ink)}
[data-look="tipografia"] .bars button:last-child i{background:var(--accent)}
[data-look="tipografia"] .tabs{padding:0;border-radius:0;border-bottom:1.5px solid var(--ink);background:none}
[data-look="tipografia"] .tabs a{border-radius:0}
[data-look="tipografia"] .tabs a[aria-current="page"]{background:var(--ink);color:var(--paper);box-shadow:none}

/* Instrumento: painéis com relevo, encaixes rebaixados e teclas que afundam */
[data-look="instrumento"] .sect,[data-look="instrumento"] main.glass{border-top:0;border-radius:22px;background:linear-gradient(180deg,#FFFFFF,#F4F5FA);box-shadow:0 2px 0 var(--cap-edge),0 16px 34px rgba(10,15,53,.08),inset 0 1px 0 #fff}
[data-look="instrumento"] .sect{margin-top:20px;padding:26px}
[data-look="instrumento"] main.glass{margin:24px auto 0;padding:8px 28px 28px}
[data-look="instrumento"] :is(input[type=text],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea){border:0;background:var(--slot);box-shadow:inset 0 2px 5px rgba(10,15,53,.2),inset 0 -1px 0 rgba(255,255,255,.8)}
[data-look="instrumento"] .btn{transition:transform .08s,box-shadow .08s,opacity .3s}
[data-look="instrumento"] .btn:not(.ghost):not(.danger){box-shadow:0 4px 0 #1A22A8,0 10px 20px rgba(43,53,240,.28)}
[data-look="instrumento"] .btn:not(.ghost):not(.danger):active{transform:translateY(4px);box-shadow:0 0 0 #1A22A8,0 4px 10px rgba(43,53,240,.25)}
[data-look="instrumento"] .btn.ghost{background:linear-gradient(180deg,#FFFFFF,#F1F2F8);box-shadow:0 4px 0 var(--cap-edge),0 8px 16px rgba(10,15,53,.1)}
[data-look="instrumento"] .btn.ghost:active{transform:translateY(4px);box-shadow:0 0 0 var(--cap-edge)}
[data-look="instrumento"] .secret{background:var(--slot);color:var(--ink);box-shadow:inset 0 2px 5px rgba(10,15,53,.22),inset 0 -1px 0 rgba(255,255,255,.8)}
[data-look="instrumento"] .secret .copy{background:var(--accent);color:#fff;box-shadow:0 3px 0 #1A22A8}
[data-look="instrumento"] .secret .scr{color:var(--accent)}
[data-look="instrumento"] .pill::before{box-shadow:0 0 8px currentColor}
[data-look="instrumento"] .stats dd{display:inline-block;margin-top:8px;padding:8px 14px;border-radius:10px;background:#050820;color:#8FE3C4;font:600 clamp(1.3rem,3vw,1.8rem) "IBM Plex Mono",monospace;letter-spacing:0;box-shadow:inset 0 2px 8px rgba(0,0,0,.7)}
[data-look="instrumento"] .segs{flex:none;gap:10px}
[data-look="instrumento"] .segs i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--cap-edge);transition:background .2s,box-shadow .2s}
[data-look="instrumento"] .segs b{display:none}
[data-look="instrumento"] .segs i.full{background:var(--accent);box-shadow:0 0 10px var(--accent)}
[data-look="instrumento"] .segs.done i.full{background:var(--ok);box-shadow:0 0 10px var(--ok)}
[data-look="instrumento"] .chart{margin-top:30px;padding:44px 18px 14px;border-radius:22px;background:linear-gradient(180deg,var(--dev-top),var(--dev-bot) 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 34px rgba(10,15,53,.2)}
[data-look="instrumento"] .ymax{top:16px;right:18px;color:#9AA2CF}
[data-look="instrumento"] .xlab{color:#9AA2CF}
[data-look="instrumento"] .tip{background:#fff;color:#0A0F35}
[data-look="instrumento"] .bars{border-bottom-color:rgba(255,255,255,.12)}
[data-look="instrumento"] .bars button{background:repeating-linear-gradient(to top,rgba(255,255,255,.07) 0 7px,transparent 7px 10px)}
[data-look="instrumento"] .bars i{border-radius:0;background:linear-gradient(0deg,#4B55FF,#A7AEFF);-webkit-mask:repeating-linear-gradient(to top,#000 0 7px,transparent 7px 10px);mask:repeating-linear-gradient(to top,#000 0 7px,transparent 7px 10px)}
[data-look="instrumento"] .tabs{gap:8px;padding:0 0 6px;background:none}
[data-look="instrumento"] .tabs a{background:linear-gradient(180deg,#FFFFFF,#F1F2F8);color:var(--ink);box-shadow:0 4px 0 var(--cap-edge)}
[data-look="instrumento"] .tabs a[aria-current="page"]{transform:translateY(4px);background:var(--accent);color:#fff;box-shadow:0 0 0 var(--cap-edge)}

@media (max-width:680px){[data-look="orbita"] main.glass,[data-look="instrumento"] main.glass{padding:4px 18px 22px}[data-look="orbita"] .sect,[data-look="instrumento"] .sect{padding:22px 18px}}
/* nos temas claros, o fundo tingido da pílula pede um tom mais escuro no texto (AA) */
[data-look="tipografia"] .pill.active,[data-look="instrumento"] .pill.active{color:#075C3F}
[data-look="tipografia"] .pill.pending,[data-look="instrumento"] .pill.pending{color:#6E4000}
[data-look="tipografia"] :is(.pill.expired,.pill.blocked),[data-look="instrumento"] :is(.pill.expired,.pill.blocked){color:#9A2520}
/* celular: o link da página atual sai do menu para caber o botão de instalar */
@media (max-width:420px){.top nav a[aria-current="page"]{display:none}}

/* ---------- medidor de uso (usage.js) ---------- */
.usage{container-type:inline-size}
/* Órbita: anéis com a contagem regressiva no meio */
.u-orb{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:36px;align-items:center}
.u-rings{position:relative;width:100%;max-width:300px;aspect-ratio:1}
.u-rings svg{display:block;width:100%;height:100%}
.u-trk{fill:none;stroke:color-mix(in srgb,var(--ink) 8%,transparent);stroke-width:18}
.u-prg{fill:none;stroke-width:18;stroke-linecap:round;filter:drop-shadow(0 0 7px rgba(124,134,255,.7))}
.u-mid{position:absolute;inset:0;display:grid;place-content:center;padding:0 22%;text-align:center}
.u-mid b{color:var(--ink);font:600 clamp(1.05rem,3vw,1.45rem) "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.u-mid small{margin-top:4px;color:var(--ink-2);font-size:.85rem;line-height:1.35}
.u-leg{display:grid;gap:26px;margin:0}
.u-leg div{display:grid;gap:2px}
.u-leg dt{display:flex;align-items:center;gap:10px;font-weight:700}
.u-leg dd{margin:0;color:var(--ink-2)}
.u-leg .u-n{color:var(--ink);font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;font-stretch:115%;letter-spacing:-.03em;line-height:1.05}
.u-sw{width:12px;height:12px;border-radius:50%}
.u-sw.s{background:#C9CDFF;box-shadow:0 0 10px #A7AEFF}
.u-sw.w{background:#4B55FF;box-shadow:0 0 10px #4B55FF}
@container (max-width:560px){.u-orb{grid-template-columns:minmax(0,1fr);justify-items:center}.u-leg{justify-self:stretch}}

/* Tipografia viva: número enorme e régua de horário */
.u-typo{display:grid;gap:30px}
.u-big{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px}
.u-big .u-n{font-size:clamp(5rem,15vw,9.5rem);font-weight:800;font-stretch:62%;letter-spacing:-.03em;line-height:.8;font-variant-numeric:tabular-nums}
.u-of{padding-bottom:6px;color:var(--ink-2);line-height:1.4}
.u-rhead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;color:var(--ink-2)}
.u-rhead b{color:var(--ink);font-family:"IBM Plex Mono",monospace;font-weight:600}
.u-track{position:relative;height:56px;margin:12px 0 26px;border-bottom:1.5px solid var(--ink)}
.u-fill{position:absolute;left:0;bottom:0;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,transparent),color-mix(in srgb,var(--accent) 18%,transparent))}
.u-tk{position:absolute;bottom:0;width:1px;height:12px;background:var(--ink)}
.u-tk.big{width:1.5px;height:26px}
.u-tl{position:absolute;top:62px;transform:translateX(-50%);color:var(--ink-2);font:500 .75rem "IBM Plex Mono",monospace;white-space:nowrap}
.u-tl.start{transform:none}
.u-tl.end{transform:translateX(-100%)}
.u-now{position:absolute;top:-6px;bottom:0;width:2px;background:var(--accent)}
.u-now::before{content:"";position:absolute;left:-5px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-in-out infinite}
.u-now span{position:absolute;left:10px;top:-10px;color:var(--accent-ink);font:600 .75rem "IBM Plex Mono",monospace;white-space:nowrap}
.u-now.end span{left:auto;right:10px}
.u-wtrack{height:10px;margin-top:10px;background:color-mix(in srgb,var(--ink) 9%,transparent)}
.u-wfill{height:100%;background:var(--ink)}
.u-intro .u-fill,.u-intro .u-wfill{animation:u-width 1.6s cubic-bezier(.2,.8,.2,1) .2s both}
.u-intro .u-now{animation:u-left 1.6s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes u-width{from{width:0}}
@keyframes u-left{from{left:0}}

/* Instrumento: dois mostradores com ponteiro num painel escuro */
.u-inst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:22px 18px 20px;border-radius:24px;background:linear-gradient(180deg,#161D52,#0A0F35 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -3px 0 rgba(0,0,0,.35),0 22px 44px rgba(10,15,53,.28)}
.u-g svg{display:block;width:100%;max-width:320px;margin:10px auto 0;overflow:visible}
.u-ticks line{stroke:#3A4287;stroke-width:1.2;stroke-linecap:round}
.u-ticks line.maj{stroke:#9AA2CF;stroke-width:2.2}
.u-ticks line.hot{stroke:#FF7A70;stroke-width:2}
.u-gl text{fill:#9AA2CF;font:500 11px "IBM Plex Mono",monospace;text-anchor:middle}
.u-needle line{stroke:#E9ECFB;stroke-width:3;stroke-linecap:round}
.u-needle line.u-tip{stroke:#8C95FF;stroke-width:3.5}
.u-g .hub{fill:#0A0F35;stroke:#E9ECFB;stroke-width:5}
.u-g .dot{fill:#E9ECFB}
.u-read{display:grid;gap:2px;margin-top:6px;color:#9AA2CF;font-size:.85rem;text-align:center}
.u-read small{font-size:.8rem;font-weight:600}
.u-read>b{color:#fff;font:600 clamp(1.1rem,3vw,1.4rem) "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.u-read .left{color:#fff;font-weight:600}
@container (max-width:440px){.u-inst{grid-template-columns:minmax(0,1fr)}}

/* ---------- app instalável ---------- */
.top nav .install{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.top nav .install:hover{box-shadow:inset 0 0 0 1px var(--ink-2)}
.top nav .install svg{width:17px;height:17px}
@media (max-width:680px){.top nav .install{justify-content:center;width:34px;height:34px;padding:0}.top nav .install span{display:none}}
dialog.guide{max-width:min(440px,calc(100% - 32px));padding:24px;border:0;border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog.guide::backdrop{background:rgba(6,10,38,.6)}
dialog.guide h2{margin:0 0 12px;font-size:1.25rem;font-weight:780;font-stretch:112%}
dialog.guide ol,dialog.guide ul{display:grid;gap:10px;margin:0 0 18px;padding-left:1.2em;color:var(--ink-2)}
dialog.guide b{color:var(--ink)}
dialog.guide svg{width:18px;height:18px;vertical-align:-3px}