.demo{flex:1;height:100%;position:relative;display:flex;align-items:center;justify-content:center}
.jan{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 24px 60px rgba(20,32,42,.10);overflow:hidden;position:relative}
.jan .barra-j{height:58px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 22px;background:#FAFBFC}
.jan .barra-j i{width:14px;height:14px;border-radius:7px;background:#DCE1E7;display:block}
.jan .barra-j b{margin-left:14px;font-size:22px;font-weight:600;color:var(--ink)}
.jan .barra-j em{margin-left:auto;font-style:normal;font-size:17px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 10px;background:#fff}
.jan .corpo{padding:28px 30px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--cor);color:#fff;font-weight:700;font-size:24px;padding:14px 26px;border-radius:8px}
.toast{position:absolute;right:26px;top:80px;background:#fff;border:1px solid var(--line);border-left:6px solid #1E7B3A;border-radius:8px;padding:18px 22px;font-size:21px;font-weight:600;box-shadow:0 14px 34px rgba(20,32,42,.14);display:flex;gap:14px;align-items:center}
.toast svg{width:30px;height:30px;flex-shrink:0}
.cursor{position:absolute;left:0;top:0;width:38px;height:38px;z-index:9;pointer-events:none;opacity:0}
.cursor .onda{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:22px;border:3px solid var(--cor);opacity:0}
.flut{width:100%;display:flex;justify-content:center}
.btn .spin{width:22px;height:22px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;display:none}
.toast{top:auto;bottom:26px;z-index:4}
.toast.alto{top:76px;bottom:auto}
/* ---- pacote 151–200: base das demos ---- */
.jan .carga-j{height:3px;background:transparent;position:relative;margin-top:-1px}
.jan .carga-j i{display:block;height:100%;width:0;background:var(--cor)}
.jan .barra-j .baixar{margin-left:auto;position:relative;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--cort);display:flex;align-items:center;justify-content:center}
.jan .barra-j .baixar svg{width:24px;height:24px}
.jan .barra-j .baixar .qt{position:absolute;right:-9px;top:-9px;min-width:24px;height:24px;border-radius:12px;background:var(--cor);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;font-style:normal;transform:scale(var(--p,0));opacity:var(--p,0)}
.jan .barra-j .baixar + em,.jan .barra-j .arq-j + em{margin-left:12px}
.jan .barra-j .arq-j{margin-left:12px;font-size:18px;font-weight:600;color:var(--cort);border:1px solid var(--line);border-radius:6px;padding:4px 10px;background:#fff;opacity:var(--p,0);transform:translateX(calc((1 - var(--p,0)) * -14px))}
.abas-j{position:relative;display:flex;gap:6px;padding:0 30px;border-bottom:1px solid var(--line);background:#fff}
.abas-j .aba{font-size:21px;font-weight:600;color:var(--muted);padding:16px 18px 14px;border-radius:6px 6px 0 0}
.abas-j .aba.on{color:var(--cort)}
.abas-j .ind-aba{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--cor);border-radius:2px;text-decoration:none}
.btn{position:relative;overflow:hidden;box-shadow:0 3px 0 rgba(20,32,42,.22)}
.btn.hov{background:color-mix(in srgb,var(--cor) 86%,#fff)}
.btn.apt{box-shadow:0 0 0 rgba(20,32,42,0)}
.hov:not(.btn){box-shadow:0 0 0 4px color-mix(in srgb,var(--cor) 18%,transparent)}
.btn .bprog{position:absolute;left:0;bottom:0;height:5px;width:0;background:rgba(255,255,255,.55)}
.btn .bok{display:inline-flex}
.btn .bok .okt{width:26px;height:26px;display:block;color:#fff}
.okt path{stroke-dasharray:1;stroke-dashoffset:1}
.cursor svg{transform-origin:6px 4px;position:relative}
.cursor .rastro{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:5px;background:var(--cor);opacity:0}
.cursor .onda.o2{border-width:2px}
.toast{overflow:hidden}
.toast .tempo-av{position:absolute;left:0;bottom:0;height:3px;background:color-mix(in srgb,var(--cor) 55%,transparent);width:100%}
.pilha-av{position:absolute;right:26px;bottom:26px;z-index:5;width:0;height:0}
.pilha-av .toast{right:0;bottom:0;white-space:nowrap}
.pilha-av.alto{top:76px;bottom:auto}
.pilha-av.alto .toast{top:0;bottom:auto}
/* campos com máscara e validação */
.valido{border-color:#1E7B3A !important;background:#F6FBF7 !important}
.vck{position:absolute;right:12px;top:50%;width:28px;height:28px;margin-top:-14px;color:#1E7B3A;display:none}
.valido > .vck{display:block}
/* menu suspenso */
.sel{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:6px;padding:12px 16px;font-size:23px;font-weight:600;min-height:54px;background:#FCFDFE;color:var(--muted)}
.sel .sel-v{color:var(--ink)}
.sel .sel-seta{width:24px;height:24px;color:var(--muted)}
.sel.aberto{border-color:var(--cor)}
.sel.aberto .sel-seta{transform:rotate(180deg)}
.sel-lista{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 36px rgba(20,32,42,.14);padding:6px;z-index:6;visibility:hidden;display:flex;flex-direction:column}
.sel-op{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:6px;font-size:22px;font-weight:500;color:var(--ink)}
.sel-op.hl{background:color-mix(in srgb,var(--cor) 10%,#fff);color:var(--cort);font-weight:700}
.sel-op .sel-ok{width:24px;height:24px;color:var(--cor)}
/* chave liga/desliga */
.chave{position:relative;display:inline-block;width:62px;height:36px;border-radius:18px;background:#D5DBE2;flex-shrink:0}
.chave b{position:absolute;inset:0;border-radius:18px;background:var(--cor);opacity:var(--p,0)}
.chave i{position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:14px;background:#fff;box-shadow:0 1px 3px rgba(20,32,42,.3);transform:translateX(calc(var(--p,0) * 26px))}
/* caixa de seleção */
.cx{position:relative;display:inline-block;width:28px;height:28px;border:2px solid #C3CBD4;border-radius:6px;background:#fff;flex-shrink:0;vertical-align:middle}
.cx b{position:absolute;inset:-2px;border-radius:6px;background:var(--cor);opacity:var(--p,0);transform:scale(calc(.6 + var(--p,0) * .4))}
.cx svg{position:absolute;inset:2px;width:20px;height:20px}
.cx path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.sel-lista.cima{top:auto;bottom:calc(100% + 6px)}