/* CBT — base compartilhada das telas (app e portal). Segue cbtexport.com: vermelho chapado, Chillax + Open Sans, um canto grande. */
@font-face{font-family:Chillax;font-weight:400;font-style:normal;font-display:swap;src:url("fonts/Chillax-400.woff2") format("woff2")}
@font-face{font-family:Chillax;font-weight:500;font-style:normal;font-display:swap;src:url("fonts/Chillax-500.woff2") format("woff2")}
@font-face{font-family:Chillax;font-weight:600;font-style:normal;font-display:swap;src:url("fonts/Chillax-600.woff2") format("woff2")}
@font-face{font-family:Chillax;font-weight:700;font-style:normal;font-display:swap;src:url("fonts/Chillax-700.woff2") format("woff2")}

:root {
  --vermelho: #9e0b0f; --vermelho-vivo: #d81419; --vermelho-escuro: #510608;
  --laranja: #f58220; --laranja-forte: #9c4c07; --laranja-suave: #fef1e5;
  --amarelo: #ffdd00; --amarelo-texto: #7a6a00; --amarelo-suave: #fff8cc;
  --verde: #80c342; --verde-forte: #507c27; --verde-suave: #eef6e4;
  --azul: #32407f; --azul-suave: #eceef8;
  --fundo: #f3f3f3; --superficie: #ffffff; --superficie-2: #ececec; --linha: #e2e2e2; --linha-forte: #8c8c8c; --vermelho-suave: #fbe9e9;
  --ink: #222222; --ink-2: #5e5e5e; --ink-3: #8f8f8f;
  --erro: #bf0d12; --erro-suave: #fdeced; --info: #3a4a92; --info-suave: #eceef8;
  --grad-marca: #9e0b0f;
  --petala: 6px 6px 40px 6px; --canto: 0 0 48px 0;
  --f-display: Chillax, "Segoe UI", sans-serif;
  --f-texto: "Open Sans", "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
/* Telas de app: altura fixa de celular, sem rolagem externa */
html:has(.app), body:has(.app) { overflow: hidden; height: 100%; }
.scroll { scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Ícones (Lucide, máscara na cor do texto) ---------- */
.i { display: inline-block; width: 22px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-sm { width: 18px; height: 18px; } .i-lg { width: 26px; height: 26px; }

/* ---------- Tipografia ---------- */
.display { font: 700 30px/1.02 var(--f-display); text-transform: uppercase; margin: 0; }
.display-sm { font: 700 16px/1.1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; margin: 0; }
.t1 { font: 600 26px/1.15 var(--f-display); margin: 0; }
.t2 { font: 600 20px/1.25 var(--f-display); margin: 0; }
.t3 { font: 600 16px/1.3 var(--f-texto); margin: 0; }
.body { font: 400 16px/1.5 var(--f-texto); margin: 0; }
.small { font: 400 14px/1.4 var(--f-texto); color: var(--ink-2); margin: 0; }
.tiny { font: 500 12px/1.3 var(--f-texto); color: var(--ink-2); margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.big-num { font: 600 36px/1 var(--f-display); font-variant-numeric: tabular-nums; }

/* ---------- Tela de app (390 × 844) ---------- */
.app { width: 390px; height: 844px; position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--fundo); color: var(--ink); font-family: var(--f-texto); }
.app[data-perfil="produtor"] { --acento: var(--verde); --acento-forte: var(--verde-forte); --acento-suave: var(--verde-suave); }
.app[data-perfil="orientador"] { --acento: var(--laranja); --acento-forte: var(--laranja-forte); --acento-suave: var(--laranja-suave); }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 20px; padding: 0 20px 24px; }
.scroll > * { flex-shrink: 0; }
.scroll { overscroll-behavior: contain; }
.app { touch-action: manipulation; -webkit-tap-highlight-color: rgba(158, 11, 15, .12); }
.hero + .scroll { padding-top: 20px; }
.topo + .scroll { padding-top: 8px; }
/* Seletor de código do produtor (CPF com mais de um código no ERP) */
.seletor { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 10px 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); color: #fff; font: 600 13px/1.2 var(--f-texto); }
.seletor .i { width: 16px; height: 16px; }
.hero .card .small, .hero .card .tiny, .hero .claro .tiny, .hero .claro .small { color: var(--ink-2); }

/* Topo com degradê da marca */
.hero { background: var(--vermelho); color: #fff; padding: 56px 20px 24px; border-radius: var(--canto); position: relative; overflow: hidden; }
.hero .small, .hero .tiny { color: rgba(255,255,255,.82); }
/* Topo compacto ao rolar (CBT.montarApp liga a classe) */
.hero { transition: padding .25s ease, border-radius .25s ease; }
.hero .recolhe { max-height: 160px; overflow: hidden; visibility: visible;
  transition: max-height .25s ease, opacity .2s ease, margin .25s ease, visibility 0s linear 0s; }
.hero-compacto { padding-top: 48px; padding-bottom: 14px; border-radius: 0 0 28px 0; }
/* Folded blocks also leave the tab order and the screen reader (visibility). */
.hero-compacto .recolhe { max-height: 0; opacity: 0; margin-top: calc(-1 * var(--hero-gap, 20px)); pointer-events: none; visibility: hidden;
  transition: max-height .25s ease, opacity .2s ease, margin .25s ease, visibility 0s linear .25s; }
.hero-compacto .so-aberto { display: none; }
.hero :focus-visible { outline-color: #ffffff; }
.hero .big-num { transition: font-size .25s ease; }
.hero-compacto .big-num { font-size: 26px !important; }
@media (prefers-reduced-motion: reduce) { .hero, .hero *, .hero .recolhe { transition: none !important; } }
.hero-flor { position: absolute; right: -54px; top: -30px; width: 230px; opacity: .13; pointer-events: none; }

/* Barra de topo simples */
.topo { display: flex; align-items: center; gap: 12px; padding: 52px 20px 12px; }
.topo .t2 { flex: 1; }
.icone-btn { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--superficie);
  border: 1px solid var(--linha); flex: none; cursor: pointer; }
.hero .icone-btn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: #fff; }

/* Barra de abas inferior */
.tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 8px 10px 26px; background: var(--superficie);
  border-top: 1px solid var(--linha); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 11px/1.2 var(--f-texto); color: var(--ink-2); padding: 6px 0; }
.tab .i { width: 22px; height: 22px; }
.tab-on { color: var(--vermelho); }
.tab-on .tab-ic { background: var(--vermelho); color: #fff; }
.tab-ic { width: 52px; height: 30px; border-radius: 16px; display: grid; place-items: center; }

/* Cards e superfícies */
.card { background: var(--superficie); border: 1px solid var(--linha); border-radius: 20px; padding: 16px; }
.petala { border-radius: var(--petala); }
.lista { background: var(--superficie); border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; }
.item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linha); min-height: 60px; }
.item:last-child { border-bottom: 0; }
.item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pastilha { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--vermelho-suave); color: var(--vermelho); flex: none; }
.secao { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.link { font: 600 14px/1.3 var(--f-texto); color: var(--vermelho); }

/* Selos de status (sempre com palavra) */
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 600 12px/1.4 var(--f-texto); white-space: nowrap; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo-ok { background: var(--verde-suave); color: var(--verde-forte); }
.selo-aviso { background: var(--amarelo-suave); color: var(--amarelo-texto); }
.selo-erro { background: var(--erro-suave); color: var(--erro); }
.selo-info { background: var(--info-suave); color: var(--info); }
.selo-neutro { background: var(--superficie-2); color: var(--ink-2); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 16px;
  border: 0; font: 700 16px/1 var(--f-texto); cursor: pointer; background: var(--ink); color: #fff; }
.btn-marca { background: var(--vermelho); color: #fff; }
.btn-acento { background: var(--acento-forte); color: #fff; }
.btn-claro { background: #fff; color: var(--vermelho); }
.btn-borda { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--linha-forte); }
.btn-bloco { width: 100%; }

/* Campos */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { font: 600 14px/1.2 var(--f-texto); color: var(--ink); }
.entrada { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border-radius: 16px; background: var(--superficie);
  border: 1.5px solid var(--linha-forte); font: 500 17px/1 var(--f-texto); color: var(--ink); }
.entrada:focus-within { box-shadow: 0 0 0 2px var(--ink); }
/* On the red top a dark ring disappears: a white ring set off by a red gap. */
.hero .entrada:focus-within { box-shadow: 0 0 0 2px var(--vermelho), 0 0 0 4px #fff; }
/* Pickers drawn as a pill with a transparent <select> on top: the ring goes on the pill. */
label:not(.entrada):has(> select:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.hero label:not(.entrada):has(> select:focus-visible), .seletor:has(> select:focus-visible) { outline-color: #fff; }
.entrada input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; padding: 0; height: 52px; }

/* Abas segmentadas */
.segmento { display: flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--superficie-2); }
.segmento a, .segmento button { flex: 1; text-align: center; padding: 9px 12px; border-radius: 999px; font: 600 14px/1.2 var(--f-texto); color: var(--ink-2); border: 0; background: transparent; }
.segmento .on { background: var(--superficie); color: var(--ink); box-shadow: 0 1px 3px rgba(28,21,18,.12); }

/* Chips de filtro */
.chips { display: flex; gap: 8px; overflow: hidden; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--superficie); font: 600 14px/1.2 var(--f-texto); white-space: nowrap; color: var(--ink-2); }
.chip-on { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }

/* Barra de progresso */
.barra { height: 10px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; display: flex; }
.barra span { display: block; height: 100%; }

/* ---------- Portal (página fluida) ---------- */
.portal { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); background: var(--fundo); color: var(--ink); font-family: var(--f-texto); }
.lateral { background: var(--vermelho); color: #fff; padding: 28px 16px; display: flex; flex-direction: column; gap: 28px; }
.lateral img { height: 40px; align-self: flex-start; margin-left: 8px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font: 500 15px/1.2 var(--f-texto); color: rgba(255,255,255,.78); }
.nav a.on { background: #fff; color: var(--vermelho); font-weight: 700; }
.nav-grupo { font: 600 12px/1.2 var(--f-texto); color: rgba(255,255,255,.55); padding: 0 12px 6px; margin: 0; }
.conteudo { padding: 28px 40px 48px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.cabeca { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cabeca .t1 { flex: 1; }
.busca { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linha); color: var(--ink-2); font: 400 15px/1 var(--f-texto); min-width: 280px; }
.p-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; border: 0; font: 600 15px/1 var(--f-texto); background: var(--vermelho); color: #fff; cursor: pointer; }
.p-btn-borda { background: var(--superficie); color: var(--ink); box-shadow: inset 0 0 0 1px var(--linha); }
.tabela { width: 100%; border-collapse: collapse; font: 400 15px/1.4 var(--f-texto); }
.tabela th { text-align: left; font: 600 13px/1.2 var(--f-texto); color: var(--ink-2); padding: 12px 16px; background: var(--superficie-2); }
.tabela td { padding: 14px 16px; border-top: 1px solid var(--linha); vertical-align: middle; }
.tabela .num { text-align: right; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--f-texto); background: var(--superficie-2); color: var(--ink-2); flex: none; }
.i-arrow-left{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m12 19-7-7 7-7' /%3E %3Cpath d='M19 12H5' /%3E %3C/svg%3E")}
.i-arrow-up-right{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M7 7h10v10' /%3E %3Cpath d='M7 17 17 7' /%3E %3C/svg%3E")}
.i-bell{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M10.268 21a2 2 0 0 0 3.464 0' /%3E %3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326' /%3E %3C/svg%3E")}
.i-book-open{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 7v14' /%3E %3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z' /%3E %3C/svg%3E")}
.i-bookmark{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z' /%3E %3C/svg%3E")}
.i-calendar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M8 2v4' /%3E %3Cpath d='M16 2v4' /%3E %3Crect width='18' height='18' x='3' y='4' rx='2' /%3E %3Cpath d='M3 10h18' /%3E %3C/svg%3E")}
.i-chart-column{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 3v16a2 2 0 0 0 2 2h16' /%3E %3Cpath d='M18 17V9' /%3E %3Cpath d='M13 17V5' /%3E %3Cpath d='M8 17v-3' /%3E %3C/svg%3E")}
.i-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 6 9 17l-5-5' /%3E %3C/svg%3E")}
.i-chevron-left{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m15 18-6-6 6-6' /%3E %3C/svg%3E")}
.i-chevron-right{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m9 18 6-6-6-6' /%3E %3C/svg%3E")}
.i-circle-alert{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='10' /%3E %3Cline x1='12' x2='12' y1='8' y2='12' /%3E %3Cline x1='12' x2='12.01' y1='16' y2='16' /%3E %3C/svg%3E")}
.i-circle-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='m9 12 2 2 4-4' /%3E %3C/svg%3E")}
.i-clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='10' /%3E %3Cpolyline points='12 6 12 12 16 14' /%3E %3C/svg%3E")}
.i-cloud-rain{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242' /%3E %3Cpath d='M16 14v6' /%3E %3Cpath d='M8 14v6' /%3E %3Cpath d='M12 16v6' /%3E %3C/svg%3E")}
.i-cloud-sun{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 2v2' /%3E %3Cpath d='m4.93 4.93 1.41 1.41' /%3E %3Cpath d='M20 12h2' /%3E %3Cpath d='m19.07 4.93-1.41 1.41' /%3E %3Cpath d='M15.947 12.65a4 4 0 0 0-5.925-4.128' /%3E %3Cpath d='M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z' /%3E %3C/svg%3E")}
.i-copy{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='14' height='14' x='8' y='8' rx='2' ry='2' /%3E %3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' /%3E %3C/svg%3E")}
.i-database{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cellipse cx='12' cy='5' rx='9' ry='3' /%3E %3Cpath d='M3 5V19A9 3 0 0 0 21 19V5' /%3E %3Cpath d='M3 12A9 3 0 0 0 21 12' /%3E %3C/svg%3E")}
.i-download{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' /%3E %3Cpolyline points='7 10 12 15 17 10' /%3E %3Cline x1='12' x2='12' y1='15' y2='3' /%3E %3C/svg%3E")}
.i-droplets{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z' /%3E %3Cpath d='M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97' /%3E %3C/svg%3E")}
.i-ellipsis{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='1' /%3E %3Ccircle cx='19' cy='12' r='1' /%3E %3Ccircle cx='5' cy='12' r='1' /%3E %3C/svg%3E")}
.i-eye-off{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49' /%3E %3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242' /%3E %3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143' /%3E %3Cpath d='m2 2 20 20' /%3E %3C/svg%3E")}
.i-eye{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0' /%3E %3Ccircle cx='12' cy='12' r='3' /%3E %3C/svg%3E")}
.i-file-text{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' /%3E %3Cpath d='M14 2v4a2 2 0 0 0 2 2h4' /%3E %3Cpath d='M10 9H8' /%3E %3Cpath d='M16 13H8' /%3E %3Cpath d='M16 17H8' /%3E %3C/svg%3E")}
.i-gauge{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m12 14 4-4' /%3E %3Cpath d='M3.34 19a10 10 0 1 1 17.32 0' /%3E %3C/svg%3E")}
.i-hand-coins{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17' /%3E %3Cpath d='m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9' /%3E %3Cpath d='m2 16 6 6' /%3E %3Ccircle cx='16' cy='9' r='2.9' /%3E %3Ccircle cx='6' cy='5' r='3' /%3E %3C/svg%3E")}
.i-headset{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z' /%3E %3Cpath d='M21 16v2a4 4 0 0 1-4 4h-5' /%3E %3C/svg%3E")}
.i-house{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8' /%3E %3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' /%3E %3C/svg%3E")}
.i-image{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='18' height='18' x='3' y='3' rx='2' ry='2' /%3E %3Ccircle cx='9' cy='9' r='2' /%3E %3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21' /%3E %3C/svg%3E")}
.i-info{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='M12 16v-4' /%3E %3Cpath d='M12 8h.01' /%3E %3C/svg%3E")}
.i-key-round{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z' /%3E %3Ccircle cx='16.5' cy='7.5' r='.5' fill='currentColor' /%3E %3C/svg%3E")}
.i-layout-dashboard{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='7' height='9' x='3' y='3' rx='1' /%3E %3Crect width='7' height='5' x='14' y='3' rx='1' /%3E %3Crect width='7' height='9' x='14' y='12' rx='1' /%3E %3Crect width='7' height='5' x='3' y='16' rx='1' /%3E %3C/svg%3E")}
.i-leaf{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z' /%3E %3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12' /%3E %3C/svg%3E")}
.i-lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='18' height='11' x='3' y='11' rx='2' ry='2' /%3E %3Cpath d='M7 11V7a5 5 0 0 1 10 0v4' /%3E %3C/svg%3E")}
.i-log-out{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4' /%3E %3Cpolyline points='16 17 21 12 16 7' /%3E %3Cline x1='21' x2='9' y1='12' y2='12' /%3E %3C/svg%3E")}
.i-map-pin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0' /%3E %3Ccircle cx='12' cy='10' r='3' /%3E %3C/svg%3E")}
.i-megaphone{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m3 11 18-5v12L3 14v-3z' /%3E %3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6' /%3E %3C/svg%3E")}
.i-menu{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cline x1='4' x2='20' y1='12' y2='12' /%3E %3Cline x1='4' x2='20' y1='6' y2='6' /%3E %3Cline x1='4' x2='20' y1='18' y2='18' /%3E %3C/svg%3E")}
.i-message-circle{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z' /%3E %3C/svg%3E")}
.i-message-square{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z' /%3E %3C/svg%3E")}
.i-mic{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z' /%3E %3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2' /%3E %3Cline x1='12' x2='12' y1='19' y2='22' /%3E %3C/svg%3E")}
.i-newspaper{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2' /%3E %3Cpath d='M18 14h-8' /%3E %3Cpath d='M15 18h-5' /%3E %3Cpath d='M10 6h8v4h-8V6Z' /%3E %3C/svg%3E")}
.i-package{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z' /%3E %3Cpath d='M12 22V12' /%3E %3Cpath d='m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7' /%3E %3Cpath d='m7.5 4.27 9 5.15' /%3E %3C/svg%3E")}
.i-paperclip{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M13.234 20.252 21 12.3' /%3E %3Cpath d='m16 6-8.414 8.586a2 2 0 0 0 0 2.828 2 2 0 0 0 2.828 0l8.414-8.586a4 4 0 0 0 0-5.656 4 4 0 0 0-5.656 0l-8.415 8.585a6 6 0 1 0 8.486 8.486' /%3E %3C/svg%3E")}
.i-pencil{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z' /%3E %3Cpath d='m15 5 4 4' /%3E %3C/svg%3E")}
.i-play{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpolygon points='6 3 20 12 6 21 6 3' /%3E %3C/svg%3E")}
.i-plus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 12h14' /%3E %3Cpath d='M12 5v14' /%3E %3C/svg%3E")}
.i-qr-code{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='5' height='5' x='3' y='3' rx='1' /%3E %3Crect width='5' height='5' x='16' y='3' rx='1' /%3E %3Crect width='5' height='5' x='3' y='16' rx='1' /%3E %3Cpath d='M21 16h-3a2 2 0 0 0-2 2v3' /%3E %3Cpath d='M21 21v.01' /%3E %3Cpath d='M12 7v3a2 2 0 0 1-2 2H7' /%3E %3Cpath d='M3 12h.01' /%3E %3Cpath d='M12 3h.01' /%3E %3Cpath d='M12 16v.01' /%3E %3Cpath d='M16 12h1' /%3E %3Cpath d='M21 12v.01' /%3E %3Cpath d='M12 21v-1' /%3E %3C/svg%3E")}
.i-receipt{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z' /%3E %3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8' /%3E %3Cpath d='M12 17.5v-11' /%3E %3C/svg%3E")}
.i-refresh-cw{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8' /%3E %3Cpath d='M21 3v5h-5' /%3E %3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16' /%3E %3Cpath d='M8 16H3v5' /%3E %3C/svg%3E")}
.i-scale{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z' /%3E %3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z' /%3E %3Cpath d='M7 21h10' /%3E %3Cpath d='M12 3v18' /%3E %3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2' /%3E %3C/svg%3E")}
.i-search{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='11' cy='11' r='8' /%3E %3Cpath d='m21 21-4.3-4.3' /%3E %3C/svg%3E")}
.i-send{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z' /%3E %3Cpath d='m21.854 2.147-10.94 10.939' /%3E %3C/svg%3E")}
.i-settings{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z' /%3E %3Ccircle cx='12' cy='12' r='3' /%3E %3C/svg%3E")}
.i-share-2{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='18' cy='5' r='3' /%3E %3Ccircle cx='6' cy='12' r='3' /%3E %3Ccircle cx='18' cy='19' r='3' /%3E %3Cline x1='8.59' x2='15.42' y1='13.51' y2='17.49' /%3E %3Cline x1='15.41' x2='8.59' y1='6.51' y2='10.49' /%3E %3C/svg%3E")}
.i-shield-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' /%3E %3Cpath d='m9 12 2 2 4-4' /%3E %3C/svg%3E")}
.i-sliders-horizontal{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cline x1='21' x2='14' y1='4' y2='4' /%3E %3Cline x1='10' x2='3' y1='4' y2='4' /%3E %3Cline x1='21' x2='12' y1='12' y2='12' /%3E %3Cline x1='8' x2='3' y1='12' y2='12' /%3E %3Cline x1='21' x2='16' y1='20' y2='20' /%3E %3Cline x1='12' x2='3' y1='20' y2='20' /%3E %3Cline x1='14' x2='14' y1='2' y2='6' /%3E %3Cline x1='8' x2='8' y1='10' y2='14' /%3E %3Cline x1='16' x2='16' y1='18' y2='22' /%3E %3C/svg%3E")}
.i-smartphone{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='14' height='20' x='5' y='2' rx='2' ry='2' /%3E %3Cpath d='M12 18h.01' /%3E %3C/svg%3E")}
.i-snowflake{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m10 20-1.25-2.5L6 18' /%3E %3Cpath d='M10 4 8.75 6.5 6 6' /%3E %3Cpath d='m14 20 1.25-2.5L18 18' /%3E %3Cpath d='m14 4 1.25 2.5L18 6' /%3E %3Cpath d='m17 21-3-6h-4' /%3E %3Cpath d='m17 3-3 6 1.5 3' /%3E %3Cpath d='M2 12h6.5L10 9' /%3E %3Cpath d='m20 10-1.5 2 1.5 2' /%3E %3Cpath d='M22 12h-6.5L14 15' /%3E %3Cpath d='m4 10 1.5 2L4 14' /%3E %3Cpath d='m7 21 3-6-1.5-3' /%3E %3Cpath d='m7 3 3 6h4' /%3E %3C/svg%3E")}
.i-sparkles{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z' /%3E %3Cpath d='M20 3v4' /%3E %3Cpath d='M22 5h-4' /%3E %3Cpath d='M4 17v2' /%3E %3Cpath d='M5 18H3' /%3E %3C/svg%3E")}
.i-sprout{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M7 20h10' /%3E %3Cpath d='M10 20c5.5-2.5.8-6.4 3-10' /%3E %3Cpath d='M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z' /%3E %3Cpath d='M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z' /%3E %3C/svg%3E")}
.i-sun{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='4' /%3E %3Cpath d='M12 2v2' /%3E %3Cpath d='M12 20v2' /%3E %3Cpath d='m4.93 4.93 1.41 1.41' /%3E %3Cpath d='m17.66 17.66 1.41 1.41' /%3E %3Cpath d='M2 12h2' /%3E %3Cpath d='M20 12h2' /%3E %3Cpath d='m6.34 17.66-1.41 1.41' /%3E %3Cpath d='m19.07 4.93-1.41 1.41' /%3E %3C/svg%3E")}
.i-thermometer{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z' /%3E %3C/svg%3E")}
.i-trash-2{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 6h18' /%3E %3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6' /%3E %3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2' /%3E %3Cline x1='10' x2='10' y1='11' y2='17' /%3E %3Cline x1='14' x2='14' y1='11' y2='17' /%3E %3C/svg%3E")}
.i-trending-down{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpolyline points='22 17 13.5 8.5 8.5 13.5 2 7' /%3E %3Cpolyline points='16 17 22 17 22 11' /%3E %3C/svg%3E")}
.i-trending-up{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17' /%3E %3Cpolyline points='16 7 22 7 22 13' /%3E %3C/svg%3E")}
.i-triangle-alert{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' /%3E %3Cpath d='M12 9v4' /%3E %3Cpath d='M12 17h.01' /%3E %3C/svg%3E")}
.i-truck{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2' /%3E %3Cpath d='M15 18H9' /%3E %3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14' /%3E %3Ccircle cx='17' cy='18' r='2' /%3E %3Ccircle cx='7' cy='18' r='2' /%3E %3C/svg%3E")}
.i-upload{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' /%3E %3Cpolyline points='17 8 12 3 7 8' /%3E %3Cline x1='12' x2='12' y1='3' y2='15' /%3E %3C/svg%3E")}
.i-user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2' /%3E %3Ccircle cx='12' cy='7' r='4' /%3E %3C/svg%3E")}
.i-users{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /%3E %3Ccircle cx='9' cy='7' r='4' /%3E %3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87' /%3E %3Cpath d='M16 3.13a4 4 0 0 1 0 7.75' /%3E %3C/svg%3E")}
.i-wallet{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1' /%3E %3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4' /%3E %3C/svg%3E")}
.i-wind{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12.8 19.6A2 2 0 1 0 14 16H2' /%3E %3Cpath d='M17.5 8a2.5 2.5 0 1 1 2 4H2' /%3E %3Cpath d='M9.8 4.4A2 2 0 1 1 11 8H2' /%3E %3C/svg%3E")}
.i-x{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M18 6 6 18' /%3E %3Cpath d='m6 6 12 12' /%3E %3C/svg%3E")}

/* ==========================================================================
   Moldura do protótipo (assets/cbt-frame.js) — não faz parte do produto.
   ========================================================================== */
.proto-barra { position: sticky; top: 0; z-index: 60; height: 44px; display: flex; align-items: center; gap: 4px; padding: 0 14px;
  background: var(--vermelho, #9e0b0f); color: #ffffff; font: 500 13px/1 var(--f-texto); }
.proto-barra .marca { display: flex; align-items: center; gap: 8px; margin-right: 12px; font: 600 14px/1 var(--f-display); white-space: nowrap; }
.proto-barra .marca img { width: 22px; height: 22px; }
.proto-barra .marca em { font: 500 11px/1 var(--f-texto); font-style: normal; color: rgba(255,255,255,.85); padding: 3px 7px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; }
.proto-barra a.ir { padding: 7px 10px; border-radius: 8px; color: rgba(255,255,255,.92); white-space: nowrap; }
.proto-barra a.ir:hover { background: rgba(255,255,255,.14); }
.proto-barra a.ir[aria-current="page"] { background: #ffffff; color: var(--vermelho, #9e0b0f); font-weight: 700; }
.proto-barra button.sair { margin-left: auto; padding: 7px 10px; border: 1px solid rgba(255,255,255,.45); border-radius: 8px; background: transparent; color: #fff; font: 600 13px/1 var(--f-texto); cursor: pointer; white-space: nowrap; }
.proto-barra button.sair:hover { background: rgba(255,255,255,.14); }
.proto-barra button.sair:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.proto-barra .sep { width: 1px; height: 20px; background: rgba(255,255,255,.35); margin: 0 6px; }
html.com-palco, html.com-palco body { overflow: auto; height: auto; }
.palco { min-height: calc(100vh - 44px); display: flex; align-items: flex-start; justify-content: center; gap: 32px; padding: 28px 16px 40px;
  background: radial-gradient(circle at 50% 0, #ffffff 0, #e6e2de 70%); }
.palco .celular { border-radius: 44px; padding: 10px; background: #1c1512; box-shadow: 0 30px 60px rgba(28,21,18,.28); flex: none; }
.palco .celular > .app { border-radius: 36px; }
.palco .nota-tela { width: 260px; flex: none; padding-top: 18px; color: var(--ink-2); font: 400 13px/1.5 var(--f-texto); }
.palco .nota-tela b { display: block; font: 600 15px/1.3 var(--f-display); color: var(--ink); margin-bottom: 6px; }
.palco .nota-tela p { margin: 0 0 10px; }
.palco .nota-tela h4 { margin: 14px 0 4px; font: 700 12px/1.2 var(--f-texto); color: var(--ink-3); }
.palco .nota-tela ul { margin: 0 0 10px; padding-left: 18px; }
.palco .nota-tela li { margin: 2px 0; }
.palco .nota-tela .pendente { background: var(--amarelo-suave); color: var(--amarelo-texto); border-radius: 8px; padding: 8px 10px; font-weight: 600; }
.palco .nota-tela .rodape { margin-top: 16px; font-size: 12px; color: var(--ink-3); }
.palco .nota-tela code { font: 500 12px/1.4 ui-monospace, Consolas, monospace; background: #fff; border: 1px solid var(--linha); border-radius: 6px; padding: 1px 5px; }
.palco .nota-tela a { color: var(--vermelho); font-weight: 600; }
/* Em celular de verdade, e com ?tela na URL, só a tela. */
html.so-tela .proto-barra, html.so-tela .palco .nota-tela { display: none; }
html.so-tela .palco { padding: 0; min-height: 0; background: none; display: block; }
html.so-tela .palco .celular { padding: 0; border-radius: 0; box-shadow: none; background: none; }
html.so-tela .palco .celular > .app { border-radius: 0; }
@media (max-width: 480px) {
  .proto-barra, .palco .nota-tela { display: none; }
  .palco { padding: 0; min-height: 0; background: none; display: block; }
  .palco .celular { padding: 0; border-radius: 0; box-shadow: none; background: none; }
  .palco .celular > .app { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
}
.toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 90; background: #222; color: #fff;
  padding: 12px 18px; border-radius: 12px; font: 600 14px/1.3 var(--f-texto); box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: 360px; }
.regra { display: flex; gap: 8px; align-items: flex-start; font: 500 13px/1.4 var(--f-texto); color: var(--ink-2); }
.regra .i { width: 16px; height: 16px; margin-top: 1px; }
.erro-campo { font: 600 13px/1.35 var(--f-texto); color: var(--erro); }
.entrada.com-erro { border-color: var(--erro); }
[hidden] { display: none !important; }
.toast[hidden], .toast:empty { display: none; }