/* Pixios · cartões da jornada em 7 fases (diagnóstico, mockups, escopo, protótipo, feedback, segurança, monitoramento) */
.chip.yellow{background:#FEF3C7;color:#A16207}html.dark .chip.yellow{background:#3A2A08;color:var(--yl)}
.chip.red{background:#FEE2E2;color:#B91C1C}html.dark .chip.red{background:#3B1416;color:#FF8A8D}
.meter.warn i{background:var(--yl)}
.c-sec h5 em{font-weight:600;text-transform:none;letter-spacing:0}
.c-body.pt0{padding-top:0}
.inp{width:100%;font:500 14px var(--f);padding:11px 13px;border-radius:12px;background:var(--bg2);border:1.5px solid transparent;color:var(--tx);resize:vertical;transition:border-color .15s}
.inp:focus{border-color:var(--or);outline:none}
.file-ic img{width:100%;height:100%;object-fit:contain;border-radius:8px;background:#fff}

/* tela vazia: as 7 fases */
.how{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:16px;max-width:520px}
.how li{display:flex;align-items:center;gap:5px;font:600 11.5px var(--f);color:var(--tx2);background:var(--card);border:1px solid var(--ln);padding:4px 9px 4px 4px;border-radius:99px}
.how li i{font:700 10px var(--fm);font-style:normal;width:18px;height:18px;border-radius:50%;background:var(--bg2);display:grid;place-items:center}
.how li.free{border-color:color-mix(in srgb,var(--gr) 55%,var(--ln))}.how li.free i{background:var(--gr);color:#0b3d22}

/* identidade */
.site-in{display:flex;align-items:center;gap:6px;background:var(--bg2);border-radius:14px;padding:5px 5px 5px 12px;border:1.5px solid transparent;transition:border-color .15s}
.site-in:focus-within{border-color:var(--or)}
.si-ic svg{width:18px;height:18px;color:var(--tx3)}
.site-in input{flex:1;min-width:0;font:600 14.5px var(--f);background:none;border:0;outline:0;color:var(--tx);padding:7px 2px}
.site-in .btn{flex:none;padding:9px 14px;font-size:13.5px}
.or{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--tx3);font:600 10.5px var(--fm);letter-spacing:.08em;text-transform:uppercase}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--ln)}
.b-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.b-opt{display:flex;align-items:center;gap:10px;padding:11px;border-radius:14px;border:1px solid var(--ln);background:var(--card);text-align:left;cursor:pointer;transition:border-color .15s}
.b-opt:hover{border-color:var(--or)}
.b-opt>svg{width:34px;height:34px;padding:8px;border-radius:10px;background:var(--orS);color:var(--or);flex:none}
.b-opt b{display:block;font-size:13px;line-height:1.25}.b-opt small{font-size:11.5px;color:var(--tx3)}
.br-top{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.br-top b{font:800 17px var(--fh);letter-spacing:-.02em;display:block}
.br-top small{font-size:12px;color:var(--tx3)}
.br-logo{width:64px;height:64px;border-radius:16px;background:#fff;border:1px solid var(--ln);display:grid;place-items:center;flex:none;overflow:hidden;padding:6px}
.br-logo img{max-width:100%;max-height:100%;object-fit:contain}
.br-logo.none{color:#fff;font:800 26px var(--fh);border:0}
.tags.sm{margin-top:6px}.tags.sm .tag{font-size:11.5px;padding:3px 8px;gap:4px}.tags.sm .tag small{font-weight:500;color:var(--tx3)}
.bcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.bc{display:flex;align-items:center;gap:8px;padding:6px;border-radius:12px;border:1px solid var(--ln);cursor:pointer;position:relative;transition:border-color .15s}
.bc:hover{border-color:var(--tx3)}
.bc i{width:30px;height:30px;border-radius:9px;background:var(--s);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);flex:none}
.bc b{display:block;font-size:12px}.bc small{font-size:10.5px;color:var(--tx3)}
.bc input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.fts{display:flex;gap:8px;flex-wrap:wrap}
.ft{display:flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border-radius:12px;background:var(--bg2)}
.ft .fs{width:38px;height:38px;border-radius:10px;background:var(--card);display:grid;place-items:center;font-size:19px;font-weight:700}
.ft b{display:block;font-size:13px}.ft small{font-size:11px;color:var(--tx3)}
.ck-mini{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--bg2);margin-top:4px}
.ck-mini b{font-size:13.5px}.ck-mini p{font-size:12.5px;color:var(--tx2);margin:3px 0 4px;line-height:1.45}.ck-mini small{font-size:11px;color:var(--tx3)}
.ck-grade{width:48px;height:48px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 22px/1 var(--fh);flex:none;background:var(--gr);color:#0b3d22}
.ck-grade small{font:700 10px var(--fm);opacity:.75;margin-top:2px;color:inherit!important}
.ck-mini.y .ck-grade{background:var(--yl);color:#3A2600}.ck-mini.r .ck-grade{background:var(--rd);color:#fff}
.ck-grade.big{width:62px;height:62px;font-size:30px}
.ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.idea{display:flex;flex-direction:column;gap:7px;padding:10px;border-radius:14px;border:1px solid var(--ln);text-align:left;transition:border-color .15s,transform .15s}
.idea:hover{border-color:var(--or);transform:translateY(-2px)}
.idea b{font-size:15px}.idea small{font-size:11px;color:var(--tx3)}
.id-sw{display:flex;height:28px;border-radius:9px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.id-sw i{flex:1}

/* público */
.pick{display:flex;flex-wrap:wrap;gap:6px}
.pk{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--f);padding:8px 12px;border-radius:11px;border:1.5px solid var(--ln);color:var(--tx2);transition:all .15s}
.pk svg{width:16px;height:16px}
.pk.on{border-color:var(--or);background:var(--orS);color:var(--or2)}html.dark .pk.on{color:#FFA36B}

/* diagnóstico */
.dg-who{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--bg2);margin-bottom:14px}
.dg-who img{width:44px;height:44px;object-fit:contain;border-radius:11px;background:#fff;padding:4px;flex:none}
.dg-who small{font:600 10.5px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.dg-who b{display:block;font-size:14px;line-height:1.4;font-weight:600}
.dg-p{font-size:13.5px;color:var(--tx2);line-height:1.5}
.dg-list{padding-left:18px;font-size:13.5px;color:var(--tx2);display:flex;flex-direction:column;gap:3px}
.dg-comp{display:flex;flex-direction:column;gap:6px}
.dg-comp>div{padding:9px 11px;border-radius:12px;border:1px solid var(--ln)}
.dg-comp b{font-size:13.5px;display:block}.dg-comp small{font-size:12px;color:var(--tx2);display:block;margin:2px 0}
.dg-comp a{display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--fm);color:var(--bl);word-break:break-all}.dg-comp a svg{width:12px;height:12px;flex:none}
.feats{display:flex;flex-direction:column;gap:5px}
.ft-i{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:9px 10px;border-radius:12px;border:1.5px solid var(--ln);transition:all .15s}
.ft-i .ck{width:20px;height:20px;border-radius:6px;border:2px solid var(--ln);display:grid;place-items:center;flex:none;margin-top:1px;transition:all .15s}
.ft-i .ck svg{width:12px;height:12px;stroke-width:3.2;opacity:0;color:#fff}
.ft-i.on{border-color:color-mix(in srgb,var(--gr) 60%,var(--ln));background:color-mix(in srgb,var(--gr) 7%,var(--card))}
.ft-i.on .ck{background:var(--grD);border-color:var(--grD)}.ft-i.on .ck svg{opacity:1}
.ft-i>span:nth-child(2){flex:1;min-width:0}
.ft-i b{display:block;font-size:13.5px}.ft-i small{font-size:12px;color:var(--tx3);line-height:1.35;display:block}
.ft-i em{font:600 9.5px var(--fm);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--grD);background:#E3F8EC;padding:2px 6px;border-radius:6px;flex:none}
html.dark .ft-i em{background:#123222;color:var(--gr)}
.dg-ins{display:flex;gap:9px;padding:11px 12px;border-radius:13px;background:color-mix(in srgb,var(--yl) 14%,var(--card));font-size:13px;line-height:1.45;margin-bottom:10px}
.dg-ins svg{width:18px;height:18px;color:var(--yl);flex:none;margin-top:1px}
.dg-cx{display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:600;padding:9px 11px;border-radius:11px}
.dg-cx svg{width:16px;height:16px;flex:none}
.dg-cx.green{background:#E3F8EC;color:var(--grD)}.dg-cx.yellow{background:#FEF3C7;color:#A16207}.dg-cx.red{background:#FEE2E2;color:#B91C1C}
html.dark .dg-cx.green{background:#123222;color:var(--gr)}html.dark .dg-cx.yellow{background:#3A2A08;color:var(--yl)}html.dark .dg-cx.red{background:#3B1416;color:#FF8A8D}
.dg-src{margin-top:10px;font-size:12px;color:var(--tx3)}
.dg-src summary{cursor:pointer;font-weight:600}
.dg-src a{display:block;color:var(--bl);padding:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* mockups */
.mks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 14px 12px}
.mk{cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:16px;border:1.5px solid var(--ln);text-align:left;transition:border-color .15s,transform .15s;min-width:0}
.mk:hover{transform:translateY(-2px)}
.mk.sel{border-color:var(--or);box-shadow:0 0 0 3px var(--orS)}
.mk-th{display:flex;justify-content:center;background:var(--bg2);border-radius:11px;padding:8px 0;overflow:hidden;height:200px}
.mk-th .thumb{flex:none;transform:scale(.6);transform-origin:top center;margin-bottom:-124px}
.mk-tx{display:grid;grid-template-columns:auto 1fr;gap:1px 7px;align-items:center}
.mk-tx .rad{width:16px;height:16px;border-radius:50%;border:2px solid var(--ln);grid-row:span 2;transition:border .15s}
.mk.sel .rad{border:5px solid var(--or)}
.mk-tx b{font-size:13.5px}.mk-tx small{font-size:11px;color:var(--tx3);line-height:1.3}

/* escopo */
.sc-mk{display:flex;gap:11px;align-items:center;padding:10px;border-radius:13px;background:var(--bg2);margin-bottom:14px}
.sc-mk .id-sw{width:58px;height:34px;flex:none}
.sc-mk small{font:600 10px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);display:block}.sc-mk b{font-size:14px}
.sc-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.sc-list li{display:flex;gap:8px;align-items:center;font-size:13.5px}
.sc-list li svg{width:16px;height:16px;flex:none;stroke-width:2.6}
.sc-list.ok li svg{color:var(--grD)}html.dark .sc-list.ok li svg{color:var(--gr)}
.sc-list.off li{color:var(--tx3)}.sc-list.off li svg{color:var(--tx3)}
.sc-flow{list-style:none;display:flex;flex-direction:column;gap:8px}
.sc-flow li{display:flex;gap:10px;align-items:flex-start}
.sc-flow i{font:700 11px var(--fm);font-style:normal;width:22px;height:22px;border-radius:7px;background:var(--tx);color:var(--bg);display:grid;place-items:center;flex:none}
.sc-flow b{display:block;font-size:13.5px}.sc-flow small{font-size:12px;color:var(--tx3)}

/* protótipo pronto */
.rep{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.rep>div{padding:10px;border-radius:12px;background:var(--bg2)}
.rep b{font-size:19px;display:block;color:var(--grD)}html.dark .rep b{color:var(--gr)}
.rep small{font-size:11.5px;color:var(--tx2);line-height:1.3;display:block}
.rep-card .pv-url{margin-top:10px}

/* feedback */
.stars-in{display:flex;gap:4px}
.stars-in button{width:40px;height:40px;border-radius:11px;background:var(--bg2);display:grid;place-items:center;color:var(--tx3);transition:all .15s}
.stars-in button svg{width:22px;height:22px}
.stars-in button.on{color:#F5A524;background:#FEF3C7}.stars-in button.on svg{fill:currentColor}
html.dark .stars-in button.on{background:#3A2A08}
.fb-q{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.fb-q button{display:inline-flex;align-items:center;gap:4px;font:600 12px var(--f);padding:5px 9px;border-radius:9px;border:1px dashed var(--ln);color:var(--tx2)}
.fb-q button svg{width:12px;height:12px}.fb-q button:hover{border-color:var(--or);color:var(--or)}
.fbp{display:flex;flex-direction:column;gap:6px}
.fbp>div{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:12px;background:var(--bg2)}
.fbp svg{width:17px;height:17px;flex:none;margin-top:1px}
.fbp .ok svg{color:var(--grD)}.fbp .off svg{color:var(--yl)}
.fbp b{display:block;font-size:13.5px;font-weight:600}.fbp small{font-size:11.5px;color:var(--tx3)}

/* pentest */
.pts{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.pt{display:flex;gap:9px;align-items:flex-start;color:var(--tx3);transition:color .3s}
.pt .sd{width:20px;height:20px;border-radius:6px;border:2px solid var(--ln);display:grid;place-items:center;flex:none;margin-top:1px}
.pt .sd svg{width:12px;height:12px;stroke-width:3;opacity:0}
.pt b{display:block;font-size:13px;line-height:1.3}.pt small{font-size:11.5px;line-height:1.3;display:block;opacity:0;transition:opacity .3s}
.pt.run{color:var(--tx)}.pt.run .sd{border-color:var(--or);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
.pt.ok{color:var(--tx)}.pt.ok .sd{background:var(--gr);border-color:var(--gr);color:#0b3d22}.pt.ok .sd svg{opacity:1}.pt.ok small{opacity:1;color:var(--tx3)}
.pt-res .c-body{display:flex;gap:14px;align-items:center;background:radial-gradient(120% 120% at 0% 0%,color-mix(in srgb,var(--gr) 12%,var(--card)),var(--card) 60%)}
.pt-res b{font:800 16px var(--fh)}.pt-res p{font-size:13px;color:var(--tx2);margin-top:3px;line-height:1.45}

/* monitoramento */
.mon-up{display:flex;align-items:flex-end;gap:14px;margin-bottom:14px}
.mon-up small{font:600 10.5px var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);display:block}
.mon-up b{font-size:24px;color:var(--grD)}html.dark .mon-up b{color:var(--gr)}
.mon-bars{flex:1;display:flex;gap:2px;height:30px;align-items:stretch}
.mon-bars i{flex:1;border-radius:2px;background:var(--gr)}.mon-bars i.warn{background:var(--yl)}.mon-bars i.down{background:var(--rd)}
.mon-g{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mon-g>div{display:flex;gap:9px;align-items:center;padding:9px 10px;border-radius:12px;background:var(--bg2)}
.mon-g svg{width:18px;height:18px;color:var(--grD);flex:none}html.dark .mon-g svg{color:var(--gr)}
.mon-g small{font-size:11px;color:var(--tx3);display:block}.mon-g b{font-size:12.5px;line-height:1.3}
.mon-g>div:last-child:nth-child(odd){grid-column:span 2}
.mon-when{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx3);margin-top:12px}
.mon-when svg{width:14px;height:14px}
.mon-card.checking .c-body{opacity:.45;filter:blur(1px);transition:all .3s}

@media (max-width:560px){
  .mks{grid-template-columns:repeat(3,minmax(150px,1fr));overflow-x:auto;scroll-snap-type:x mandatory}
  .mk{scroll-snap-align:start}
  .b-opts,.pts{grid-template-columns:1fr}
  .ideas{grid-template-columns:1fr 1fr 1fr;gap:6px}.idea{padding:8px}
}

/* domínio com nome comprido: letra menor em vez de quebrar no meio */
.dom b{min-width:0;overflow-wrap:anywhere}
.dom.long b{font-size:12.5px}