/* Área dos pais (contas/conta/pais) — estilos das maquetes do Martim (avatares-martim/ui: _comum/base.css, 2-pin-e-aparelhos/p2.css,
   pais-editar-filho.html, seguranca.html), com as fontes do site. Cor de perigo #B8400F. */
/* Mochila Mágica — base partilhada das maquetes de UI (rascunho).
   Copia os tokens de site/assets/css/style.css. Não é usado pelo site. */
@font-face{font-family:"Fredoka";src:url(/assets/fonts/fredoka-var.woff2) format("woff2");font-weight:300 700}
@font-face{font-family:"Nunito";src:url(/assets/fonts/nunito-var.woff2) format("woff2");font-weight:200 1000}
:root{
  --cream:#FFF7EC; --cream-2:#FCEBD3; --line:#F0DFC6;
  --orange:#FF6B2C; --orange-d:#E2551A; --orange-soft:#FFE3D3;
  --yellow:#FFC93C; --yellow-d:#D9A41F; --yellow-soft:#FFF1C9;
  --green:#2DBE6C; --green-d:#1E9A54; --green-soft:#DDF5E6;
  --blue:#4F7DF3; --blue-d:#3A63D1; --blue-soft:#E3EBFE;
  --navy:#1E2A4A; --ink-2:#4A5573; --white:#fff;
  --r-sm:14px; --r:22px; --r-lg:32px;
  --shadow:0 6px 0 rgba(30,42,74,.10); --shadow-lg:0 14px 30px rgba(30,42,74,.12);
  --f-title:"Fredoka","Nunito",system-ui,sans-serif; --f-body:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--cream);color:var(--navy);font:500 17px/1.45 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--f-title);font-weight:600;line-height:1.15;margin:0;letter-spacing:-.01em}
p{margin:0}
.screen{min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}
/* manchas de fundo */
.blob{position:absolute;border-radius:46% 54% 50% 50%/52% 46% 54% 48%;z-index:0;pointer-events:none}
.sparkle{position:absolute;width:24px;height:24px;color:var(--yellow);pointer-events:none;z-index:0}
.sparkle.o{color:var(--orange)} .sparkle.b{color:var(--blue)} .sparkle.g{color:var(--green)}
/* barra de topo */
.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:6px;font:700 20px/1 var(--f-title);color:var(--navy);text-decoration:none}
.brand img{width:40px;height:40px;object-fit:contain}
.brand .pill{background:var(--orange);color:#fff;border-radius:999px;padding:3px 9px 5px}
/* botões (texto azul-noite sobre laranja/verde/amarelo: contraste ≥ 4,9:1) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 26px;border-radius:999px;border:0;cursor:pointer;
  font:700 19px/1.1 var(--f-title);text-decoration:none;color:var(--navy);background:var(--orange);box-shadow:0 5px 0 var(--orange-d)}
.btn svg{width:24px;height:24px;flex:none}
.btn.green{background:var(--green);box-shadow:0 5px 0 var(--green-d)}
.btn.yellow{background:var(--yellow);box-shadow:0 5px 0 var(--yellow-d)}
.btn.blue{background:var(--blue-d);color:#fff;box-shadow:0 5px 0 #2C4FB0}
.btn.navy{background:var(--navy);color:#fff;box-shadow:0 5px 0 #0E1630}
.btn.white{background:#fff;color:var(--navy);box-shadow:0 5px 0 var(--line)}
.btn.ghost{background:transparent;box-shadow:none;border:3px solid var(--line);color:var(--navy)}
.btn.sm{min-height:48px;padding:8px 18px;font-size:17px}
.btn.block{width:100%}
.btn[disabled]{background:#E9E1D5;color:#5B6070;box-shadow:0 5px 0 #D3CABB;cursor:not-allowed}
.btn.pressed{transform:translateY(3px);box-shadow:0 2px 0 var(--orange-d)}
.focus-ring{outline:4px solid var(--blue);outline-offset:4px}
/* marca de maquete */
.mock-tag{position:absolute;z-index:50;left:8px;bottom:8px;font:800 11px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;background:var(--navy);color:#fff;border-radius:999px;padding:6px 10px;opacity:.9}
.ex{display:inline-block;font:800 12px/1 var(--f-body);letter-spacing:.05em;text-transform:uppercase;color:var(--navy);background:var(--yellow-soft);border:2px dashed var(--yellow-d);border-radius:999px;padding:4px 8px}
.bubble{position:relative;background:#fff;border-radius:22px;padding:12px 16px;font:600 17px/1.25 var(--f-title);box-shadow:var(--shadow-lg)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-12px)}30%{transform:translateX(10px)}45%{transform:translateX(-8px)}60%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.i{width:24px;height:24px}
.blob.b1{width:320px;height:280px;background:var(--yellow-soft);top:-130px;right:-150px}
.blob.b2{width:260px;height:240px;background:var(--blue-soft);bottom:-110px;left:-120px}
.back{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:48px;min-height:48px;padding:0 16px 0 10px;border-radius:999px;border:0;background:#fff;box-shadow:var(--shadow);color:var(--navy);font:700 16px/1 var(--f-title);cursor:pointer}
main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;padding:0 20px 24px}
/* teclado numérico */
.keys{display:grid;grid-template-columns:repeat(3,84px);gap:12px 16px;justify-content:center}
.key{height:68px;border-radius:24px;border:0;background:#fff;box-shadow:0 5px 0 var(--line);color:var(--navy);font:600 32px/1 var(--f-title);cursor:pointer;display:grid;place-items:center}
.key.fn{background:transparent;box-shadow:none;color:var(--ink-2)} .key.fn .i{width:32px;height:32px}
.key.pressed{transform:translateY(4px);box-shadow:0 1px 0 var(--line);background:var(--yellow-soft)}
.key.focus{outline:4px solid var(--blue);outline-offset:3px}
.keys.off .key{background:#F1EADF;box-shadow:none;color:#5B6070;cursor:not-allowed}
.keys.off .key.fn{background:transparent;color:#5B6070}
.k-empty{height:68px}
/* pontos do PIN */
.dots{display:flex;gap:20px;justify-content:center;margin:20px 0 6px}
.dots span{width:22px;height:22px;border-radius:50%;border:3px solid var(--navy);background:transparent}
.dots span.on{background:var(--navy)}
.dots.err span{border-color:var(--orange-d);background:var(--orange)}
.dots.off span{border-color:#B9B1A4;background:transparent}
/* caixas do código */
.boxes{display:flex;gap:12px;justify-content:center;margin:18px 0 4px}
.boxes span{width:62px;height:76px;border-radius:20px;background:#fff;border:3px solid var(--line);display:grid;place-items:center;font:700 40px/1 var(--f-title);color:var(--navy)}
.boxes span.cur{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.boxes span.cur::after{content:"";width:3px;height:36px;background:var(--blue);border-radius:2px}
.boxes.err span{border-color:var(--orange);background:var(--orange-soft)}
.boxes.off span{background:#F1EADF;border-color:#E2D8C8;color:#5B6070}
/* abanar (no PNG fica parado e desviado, com traços de movimento) */
.shake{animation:shake .45s ease-in-out 1}
.shake-still{position:relative;transform:translateX(-10px);width:fit-content;margin-inline:auto}
.shake-still::before,.shake-still::after{content:"";position:absolute;top:50%;width:14px;height:14px;transform:translateY(-50%);border:3px solid var(--orange);border-radius:50%;clip-path:inset(0 0 0 55%)}
.shake-still::before{right:-24px} .shake-still::after{left:-24px;transform:translateY(-50%) scaleX(-1)}
/* mensagens */
.msg{min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center;font:600 16px/1.3 var(--f-body);color:var(--ink-2);max-width:340px}
.msg.err{background:var(--orange-soft);color:var(--navy);border-radius:18px;padding:10px 16px;gap:10px;text-align:left}
.msg.err b{font-family:var(--f-title)}
.msg .emo{flex:none;width:34px;height:34px;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:var(--navy);font:700 20px/1 var(--f-title)}
/* contagem em anel */
.ring{position:relative;width:132px;height:132px;margin:6px auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .t{position:absolute;inset:0;display:grid;place-items:center;font:700 34px/1 var(--f-title)}
.ring .t small{display:block;font:700 13px/1 var(--f-body);color:var(--ink-2);text-align:center;margin-top:4px}
.tag{display:inline-flex;align-items:center;gap:6px;font:800 13px/1 var(--f-body);text-transform:uppercase;letter-spacing:.06em;padding:8px 12px;border-radius:999px;background:#fff;color:var(--navy);box-shadow:var(--shadow)}
.tag .i{width:16px;height:16px}
.lockbadge{width:64px;height:64px;border-radius:22px;background:var(--yellow);display:grid;place-items:center;color:var(--navy);box-shadow:0 5px 0 var(--yellow-d)}
.lockbadge .i{width:34px;height:34px}
.link{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;color:var(--blue-d);font:700 16px/1 var(--f-body);text-decoration:underline;text-underline-offset:3px;background:none;border:0}
/* limite genérico (IP / conta) */
.lim{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:360px;margin:0 auto;position:relative}
.lim img{width:150px;height:150px;object-fit:contain}
.lim .lim-ic{position:absolute;top:104px;left:calc(50% + 34px);width:48px;height:48px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;box-shadow:0 4px 0 var(--yellow-d)}
.lim .lim-ic .i{width:28px;height:28px}
.lim h2{font-size:28px;margin-top:12px}
.lim p{color:var(--ink-2);font-size:17px;margin-top:8px}
.lim .btn{margin-top:22px;min-width:240px}


.topbar h1{font-size:20px;position:absolute;left:50%;transform:translateX(-50%)}
main{align-items:stretch;padding:4px 16px 24px;max-width:620px;margin:0 auto;width:100%;gap:14px}
.card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px 16px}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card h2{font-size:24px}
.plan{display:inline-flex;align-items:center;gap:6px;font:800 12px/1 var(--f-body);text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:7px 10px;background:var(--cream-2);color:var(--navy)}
.plan.fam{background:var(--green-soft)}
.count{font:700 15px/1 var(--f-body);color:var(--ink-2);margin-top:6px}
.kids{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.kids li{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;background:var(--cream);border-radius:20px;padding:10px 12px;min-height:76px}
.kids .av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center}
.kids .av img{width:52px;height:52px;object-fit:contain}
.c0{background:var(--orange-soft)} .c1{background:var(--blue-soft)} .c2{background:var(--green-soft)} .c3{background:var(--yellow-soft)}
.kids b{display:block;font:700 19px/1.15 var(--f-title)} .kids small{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.edit{min-height:48px;padding:0 14px;border-radius:999px;border:3px solid var(--line);background:#fff;color:var(--navy);font:700 16px/1 var(--f-title)}
.kids li.off{background:#F3F4F7}
.kids li.off .av{background:#E4E7EE} .kids li.off .av img{filter:grayscale(1);opacity:.55}
.kids li.off b{color:#4A5573}
.tagi{display:inline-block;font:800 11px/1 var(--f-body);text-transform:uppercase;letter-spacing:.05em;background:#E4E7EE;color:#3B4560;border-radius:999px;padding:4px 7px;margin-left:6px;vertical-align:3px}
.chk{width:48px;height:48px;border-radius:14px;border:3px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--navy)}
.chk.on{background:var(--green);border-color:var(--green)} .chk .i{width:26px;height:26px}
li.sel{outline:3px solid var(--green);outline-offset:-3px}
.add{margin-top:14px;width:100%}
.info{margin-top:14px;display:flex;gap:12px;align-items:flex-start;border-radius:20px;padding:14px;background:var(--blue-soft);font-size:16px;line-height:1.4}
.info .i{flex:none;width:24px;height:24px;color:var(--blue-d);margin-top:1px}
.info b{font-family:var(--f-title)}
.info .link{min-height:48px;padding:0;margin-top:2px}
.banner{display:flex;gap:12px;align-items:flex-start;border-radius:20px;padding:14px 16px;background:var(--yellow-soft);border:2px solid var(--yellow)}
.banner .i{flex:none;width:26px;height:26px;margin-top:1px}
.banner b{font-family:var(--f-title);font-size:18px;display:block;margin-bottom:2px}
.pend{display:inline-block;margin-top:8px}
.tagf{display:inline-block;font:800 11px/1 var(--f-body);text-transform:uppercase;letter-spacing:.05em;background:var(--green-soft);color:var(--navy);border-radius:999px;padding:4px 7px;margin-top:4px}
.banner.blue{background:var(--blue-soft);border-color:var(--blue)} .banner.blue .i{color:var(--blue-d)}
.alert-ok{display:flex;gap:10px;align-items:center;border-radius:18px;padding:12px 14px;font-weight:700;background:var(--green-soft)}
.alert-ok .i{flex:none;width:26px;height:26px;color:var(--green-d)}
li.was{outline:3px dashed #C9CDD6;outline-offset:-3px} li.now{outline:3px solid var(--green);outline-offset:-3px}

.foot{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.foot .btn{width:100%}
.sel-n{font:700 15px/1 var(--f-body);color:var(--ink-2);text-align:center}
@media (min-width:700px){.topbar h1{font-size:24px}.card{padding:26px 28px}.kids{grid-template-columns:1fr 1fr}main{max-width:760px}.foot{flex-direction:row}.foot .btn{flex:1}}

/* editar filho */
.sec{margin-top:22px} .sec:first-of-type{margin-top:6px}
.sec h3{font-size:18px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.inp{display:flex;align-items:center;min-height:56px;border:3px solid var(--line);border-radius:18px;padding:0 14px;background:#fff;font:600 18px/1 var(--f-body);color:var(--navy)}
.hint{font-size:14px;color:var(--ink-2);margin-top:6px}
.avs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.avb{position:relative;aspect-ratio:1;min-height:56px;border-radius:18px;border:3px solid transparent;background:var(--cream);display:grid;place-items:center;padding:0;cursor:pointer}
.avb img{width:82%;height:82%;object-fit:contain}
.avb.on{border-color:var(--green);background:var(--green-soft)}
.avb.on::after{content:"";position:absolute;right:-6px;top:-6px;width:24px;height:24px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2A4A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat}
.anos{display:flex;flex-wrap:wrap;gap:8px}
.ano{min-height:48px;min-width:64px;padding:0 14px;border-radius:999px;border:3px solid var(--line);background:#fff;color:var(--navy);font:700 16px/1 var(--f-title)}
.ano.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ano.was{border-style:dashed;border-color:#8A93A8}
.note-ano{margin-top:12px;display:flex;gap:10px;align-items:flex-start;background:var(--blue-soft);border-radius:18px;padding:12px 14px;font-size:15px;line-height:1.4}
.note-ano .i{flex:none;width:22px;height:22px;color:var(--blue-d)} .note-ano b{font-family:var(--f-title)}
.sw-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding:10px 14px;border-radius:20px;background:var(--cream);border:0;width:100%;text-align:left;color:var(--navy);font:700 18px/1.2 var(--f-title)}
.sw-row small{display:block;font:600 14px/1.3 var(--f-body);color:var(--ink-2);margin-top:2px}
.sw{flex:none;width:60px;height:36px;border-radius:999px;background:#8A93A8;position:relative}
.sw::after{content:"";position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(30,42,74,.25)}
.on .sw{background:var(--green-d)} .on .sw::after{left:28px}
.devs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.devs li{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;background:var(--cream);border-radius:20px;padding:10px 12px}
.dico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center}
.dico .i{width:28px;height:28px}
.dico.t{background:var(--blue-soft);color:var(--blue-d)} .dico.m{background:var(--orange-soft);color:var(--orange-d)}
.devs b{display:block;font:700 17px/1.2 var(--f-title)} .devs small{display:block;font-size:14px;color:var(--ink-2)}
.devs .used{font-weight:800;color:var(--navy)}
.rev{min-height:48px;padding:0 14px;border-radius:999px;border:3px solid var(--line);background:#fff;color:var(--navy);font:700 16px/1 var(--f-title)}
.save{margin-top:24px;width:100%}
/* perigo: laranja escuro #B8400F (5,6:1 sobre branco); a paleta não tem vermelho */
.danger{margin-top:16px;border-radius:var(--r-lg);border:3px solid #F6C3A8;background:#fff;padding:18px 16px}
.danger h3{font-size:18px;color:#B8400F;display:flex;gap:8px;align-items:center}
.danger p{font-size:15px;color:var(--ink-2);margin:6px 0 12px}
.btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:999px;border:3px solid #B8400F;background:#fff;color:#B8400F;font:700 17px/1 var(--f-title);cursor:pointer}
.btn-danger .i{width:22px;height:22px}
.btn-danger.solid{background:#B8400F;color:#fff;box-shadow:0 5px 0 #8A2F0A;min-height:56px}
.scrim{position:fixed;inset:0;background:rgba(30,42,74,.55);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.dlg{background:#fff;width:100%;border-radius:32px 32px 0 0;padding:24px 22px 28px;text-align:center}
.dlg .dav{width:76px;height:76px;margin:0 auto 10px;border-radius:50%;background:var(--orange-soft);display:grid;place-items:center} .dlg .dav img{width:66px;height:66px;object-fit:contain}
.dlg h2{font-size:26px} .dlg .warn{text-align:left;margin:14px 0 16px;padding:0;list-style:none;display:grid;gap:8px}
.dlg .warn li{display:flex;gap:10px;align-items:flex-start;background:var(--orange-soft);border-radius:16px;padding:10px 12px;font-size:15px;line-height:1.35;color:var(--navy)}
.dlg .warn .i{flex:none;width:22px;height:22px;color:#B8400F}
.dlg .btn{width:100%;margin-top:12px}
@media (min-width:700px){
  .avs{grid-template-columns:repeat(10,1fr)}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
  .scrim{align-items:center} .dlg{max-width:460px;border-radius:32px}
}


.topbar h1{font-size:20px;position:absolute;left:50%;transform:translateX(-50%)}
main{align-items:stretch;padding:4px 16px 24px;max-width:620px;margin:0 auto;width:100%;gap:16px}
.card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px 18px}
.card h2{font-size:24px;margin-bottom:8px}
.card .lead{color:var(--ink-2);font-size:16px}
.steps{margin:10px 0 0;padding-left:22px;color:var(--ink-2);font-size:16px}
.steps li{margin-bottom:4px} .steps b{color:var(--navy)}
.code{display:flex;gap:10px;justify-content:center;margin:18px 0 14px}
.code span{width:64px;height:82px;border-radius:20px;background:var(--yellow-soft);border:3px solid var(--yellow);display:grid;place-items:center;font:700 44px/1 var(--f-title);letter-spacing:0}
.code.off span{background:#F1EADF;border-color:#E2D8C8;color:#5B6070;text-decoration:line-through;text-decoration-thickness:3px}
.timer{display:flex;align-items:center;gap:8px;font:600 16px/1.2 var(--f-body);color:var(--navy);justify-content:center}
.timer .i{width:22px;height:22px;color:var(--blue-d)} .timer b{font:700 20px/1 var(--f-title)}
.bar{height:12px;border-radius:999px;background:var(--cream-2);overflow:hidden;margin:10px 0 6px}
.bar>span{display:block;height:100%;border-radius:999px;background:var(--blue)}
.fim .bar>span{background:var(--orange)} .fim .timer .i{color:var(--orange-d)}
.small{font-size:14px;color:var(--ink-2);text-align:center;margin-top:8px}
.acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.alert{display:flex;gap:10px;align-items:center;border-radius:18px;padding:12px 14px;font-weight:700}
.alert.o{background:var(--orange-soft)} .alert.g{background:var(--green-soft)}
.alert .i{flex:none;width:26px;height:26px}
.alert.g .i{color:var(--green-d)}
.devs{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.devs li{display:grid;grid-template-columns:52px 1fr auto;gap:12px;background:var(--cream);border-radius:20px;padding:12px}
.dico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center}
.dico .i{width:30px;height:30px}
.dico.c0{background:var(--blue-soft);color:var(--blue-d)} .dico.c1{background:var(--orange-soft);color:var(--orange-d)} .dico.c2{background:var(--green-soft);color:var(--green-d)}
.dtx b{display:block;font:700 18px/1.2 var(--f-title)} .dtx small{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.dtx .ex{margin-top:4px;font-size:10px}
.off-btn{min-height:48px;padding:0 14px;border-radius:999px;border:3px solid var(--line);background:#fff;color:var(--navy);font:700 16px/1 var(--f-title);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.off-btn .i{width:20px;height:20px;display:none}
.here{display:inline-block;font:800 11px/1 var(--f-body);text-transform:uppercase;letter-spacing:.05em;background:var(--navy);color:#fff;border-radius:999px;padding:4px 7px;margin-left:4px;vertical-align:2px}
.empty{text-align:center;padding:10px 0}
.devs li{align-items:start}
.dtx .sys{font-weight:700;color:var(--navy)}
.used{font-weight:800;color:var(--navy)}
.ren{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0;margin-top:2px;border:0;background:none;color:var(--blue-d);font:700 15px/1 var(--f-body);text-decoration:underline;text-underline-offset:3px}
.ren .i{width:18px;height:18px}
li.editing{grid-template-columns:52px 1fr;outline:3px solid var(--blue);outline-offset:-3px;background:#fff}
.elbl{display:block;font:700 14px/1 var(--f-body);margin:2px 0 8px}
.einp{display:flex;align-items:center;min-height:52px;border:3px solid var(--blue);border-radius:16px;padding:0 12px;background:#fff;box-shadow:0 0 0 4px var(--blue-soft);font:600 17px/1 var(--f-body)}
.caret{display:inline-block;width:2px;height:24px;background:var(--blue);margin-left:2px}
.eacts{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.dsys{font-weight:700;color:var(--navy)!important;margin-bottom:6px!important}
.empty .dico{margin:0 auto 10px;width:72px;height:72px;border-radius:22px} .empty .dico .i{width:40px;height:40px}
/* diálogo */
.scrim{position:fixed;inset:0;background:rgba(30,42,74,.55);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.dlg{background:#fff;width:100%;border-radius:32px 32px 0 0;padding:26px 22px 30px;text-align:center}
.dlg .dico{margin:0 auto 12px;width:64px;height:64px;border-radius:20px} .dlg .dico .i{width:36px;height:36px}
.dlg h2{font-size:26px;margin-bottom:8px} .dlg p{color:var(--ink-2);margin-bottom:18px}
.dlg .btn{width:100%;margin-top:10px}
@media (max-width:699px){.devs li{gap:10px;padding:10px}.off-btn{padding:0 12px}}
@media (min-width:700px){
  .topbar h1{font-size:24px} main{padding-top:10px}
  .card{padding:28px 30px} .off-btn .i{display:block}
  .scrim{align-items:center} .dlg{max-width:440px;border-radius:32px}
}


.pinrow{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;background:var(--cream);border-radius:20px;padding:12px;margin-top:14px}
.state{display:inline-flex;align-items:center;gap:6px;font:800 12px/1 var(--f-body);text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:6px 9px;margin-top:6px}
.state.on{background:var(--green);color:var(--navy)} .state.off{background:#E4E7EE;color:#3B4560}
.state .i{width:14px;height:14px}
.pacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pacts .btn{flex:1 1 180px}
.note{font-size:14px;color:var(--ink-2);margin-top:12px}


/* --- integração (contas/conta/pais): estados reais --- */
.ex{display:none}
.msg{margin-top:12px;border-radius:18px;padding:12px 14px;font-weight:700;display:none}
.msg.show{display:block} .msg.ok{background:var(--green-soft)} .msg.err{background:var(--orange-soft);color:#7A2A08}
.inp{width:100%;outline:none} .inp:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
input.inp{font:600 18px/1 var(--f-body)}
.btn:disabled,.rev:disabled,.btn-danger:disabled{opacity:.55;cursor:not-allowed}
.btn:focus-visible,.rev:focus-visible,.avb:focus-visible,.ano:focus-visible,.sw-row:focus-visible,.btn-danger:focus-visible,.back:focus-visible,.off-btn:focus-visible{outline:4px solid var(--blue);outline-offset:3px}
a.back{text-decoration:none}
.plans{display:grid;gap:14px}
.plan-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px 18px}
.plan-card h2{font-size:22px} .plan-card .price{font:700 28px/1.1 var(--f-title);margin:8px 0}
.plan-card ul{margin:8px 0 12px;padding-left:20px;color:var(--ink-2)}
.pay-consent{display:flex;gap:10px;align-items:flex-start;background:var(--cream);border-radius:16px;padding:12px;margin:12px 0;font-size:15px;line-height:1.35}
.pay-consent input{width:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--green-d)}
.pay-consent .req{font:800 11px/1 var(--f-body);text-transform:uppercase;background:var(--orange-soft);border-radius:999px;padding:3px 6px;margin-left:4px}
.pay-row{display:flex;flex-wrap:wrap;gap:10px} .pay-row .btn{flex:1 1 180px}
select.inp{appearance:auto}
.pinf{display:flex;gap:10px;justify-content:center;margin:14px 0}
.pinf input{width:64px;height:72px;text-align:center;font:700 34px/1 var(--f-title);border:3px solid var(--line);border-radius:18px;background:#fff;color:var(--navy)}
.pinf input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 4px var(--blue-soft)}
[hidden]{display:none!important}

/* aviso do botão de pagar (kit_v3/familia_v2): sempre visível, ≥ 13 px, contraste AA */
.pay-notice{font-size:14px;line-height:1.4;color:#33405c;margin:.4rem 0 0}
.pay-plano{border:0;padding:0;margin:.6rem 0}