/* ============================================================
   eMec — Componentes compartilhados (header, menus, tabelas,
   cards, modais, chat, mapas, carousel de banners)
   ============================================================ */

/* ---------- Header estilo Mercado Livre ---------- */
header{position:sticky;top:0;z-index:30;box-shadow:var(--shadow-lg)}
header .ml-top{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;background:var(--ml-yellow);
}
header .ml-top .gsearch input{background:#fff;border:none}
header .ml-logo{font-family:var(--font-title);font-weight:800;font-size:1.25rem;
  color:var(--ml-deep);letter-spacing:-.02em;white-space:nowrap;text-decoration:none}
header .ml-logo:hover{text-decoration:none}
header .ml-logo .bolt{color:var(--ml-deep);-webkit-text-stroke:1px var(--ml-deep)}
header .ml-logo-dot{color:var(--accent)}
.headactions{display:flex;align-items:center;gap:8px;margin-left:auto}
.iconbtn{background:#fff;border:none;border-radius:50%;width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;
  color:#333;position:relative;box-shadow:var(--shadow)}
.iconbtn:hover{box-shadow:0 2px 8px rgba(0,0,0,.18)}
.iconbtn.countdot{position:absolute;top:-4px;right:-4px}
.badge{background:#fff;border:1px solid var(--line-strong);border-radius:999px;padding:3px 10px;
  font-size:.72rem;color:var(--muted);font-weight:600}

.gsearch{flex:0 1 320px;position:relative}
/* Revisão Onda 6: o "?" da dica fica DENTRO do campo de busca (não quebra linha). */
.gsearch .tip{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:#fff}
.searchrow{display:flex;align-items:center;gap:6px}
.gsearch input{padding:10px 12px 10px 34px;border-radius:4px 999px 999px 4px;
  font-size:.9rem;color:var(--text);border:1px solid transparent}
.gsearch input:focus{border-color:var(--accent)}
.gsearch .gsicon{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.6;
  font-size:.8rem;pointer-events:none}
.gsearch.mobile{display:none}

.userchip{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-strong);
  border-radius:999px;padding:4px 14px 4px 5px;color:var(--text);font-weight:600;font-size:.85rem;cursor:pointer}
.userchip:hover{border-color:var(--accent)}
.userchip-avt-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.userchip .avt{width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--ml-yellow),#FFD100);color:var(--ml-deep);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;flex-shrink:0;
  border:1.5px solid var(--ml-deep)}
.userchip-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
.userchip-name-row{display:inline-flex;align-items:center;gap:6px;max-width:100%}
.userchip-provider,.acc-auth-badge{display:inline-flex;align-items:center;gap:4px;
  padding:1px 7px;border-radius:999px;background:#f8fafc;border:1px solid #cbd5e1;
  color:#475569;font-size:.66rem;font-weight:700;line-height:1.25;letter-spacing:.01em;white-space:nowrap}
.userchip-provider svg,.acc-auth-badge svg{width:11px;height:11px;flex-shrink:0;display:block}
.acc-auth-badge{font-size:.73rem;padding:2px 8px}
.acc-auth-badge.is-muted{background:transparent;border-color:var(--line-strong);color:var(--muted);font-weight:600}
.userchip-gdot{position:absolute;right:-3px;bottom:-2px;width:15px;height:15px;border-radius:50%;
  background:#fff;border:1.5px solid #cbd5e1;box-shadow:0 1px 2px rgba(0,0,0,.18);
  display:inline-flex;align-items:center;justify-content:center;padding:1.5px;pointer-events:none}
.userchip-gdot svg{width:10px;height:10px;display:block}
@media(min-width:720px){
  .userchip-gdot{display:none!important}
}
.userchip .sub{font-size:.68rem;color:var(--muted);font-weight:600}

/* ---------- Barra 2: Marketplace + dropdowns (Fase 61) ---------- */
.ml-cats{display:flex;align-items:center;gap:4px;overflow:visible;flex-wrap:wrap;
  padding:6px 12px;background:#fff;border-bottom:1px solid var(--line)}
.ml-cat{background:transparent;border:none;color:var(--muted);white-space:nowrap;
  padding:7px 11px;border-radius:999px;font-size:.82rem;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px}
.ml-cat:hover{background:var(--ml-yellow-soft);color:var(--ml-deep);text-decoration:none}
.ml-cat.active,.ml-menu.has-active>summary{background:var(--ml-yellow-soft);color:var(--ml-deep)}
.ml-market{color:var(--ml-deep);font-weight:800}
.ml-menu{position:relative;flex:0 0 auto}
.ml-menu>summary{list-style:none}
.ml-menu>summary::-webkit-details-marker{display:none}
.ml-caret{font-size:.62rem;opacity:.65;transition:transform .15s}
.ml-menu[open] .ml-caret{transform:rotate(180deg)}
.ml-drop{position:absolute;left:0;top:calc(100% + 5px);z-index:70;min-width:220px;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);
  padding:6px;display:grid;gap:2px}
.ml-drop a{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:8px;
  color:var(--text);font-size:.86rem;font-weight:600;white-space:nowrap}
.ml-drop a:hover{background:var(--ml-yellow-soft);text-decoration:none}
.ml-drop a.active{background:var(--ml-yellow);color:var(--ml-deep)}
.ml-menu:last-of-type .ml-drop{left:auto;right:0}
.ml-drop .ml-drop-label{padding:6px 10px 3px;color:var(--muted);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.06em;font-weight:800}
/* Atalhos completos continuam no DOM para testes de compatibilidade/QA; a
   barra visual é #mlCats e o hub completo é o menu lateral. */
#tabs{display:none!important}

/* ---------- Menu lateral (hambúrguer) ---------- */
.iconbtn#btnSideMenu{font-size:1.2rem}
.side-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
.side-menu{position:fixed;top:0;left:0;bottom:0;width:min(320px,88vw);background:#fff;z-index:50;
  transform:translateX(-105%);transition:transform .22s ease;display:flex;flex-direction:column;
  box-shadow:none;border-right:1px solid var(--line)}
.side-menu.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px;
  background:var(--ml-yellow);color:var(--ml-deep)}
.side-head b{font-family:var(--font-title)}
.side-head .iconbtn{width:32px;height:32px;box-shadow:none}
#sideMenuBody{flex:1;overflow:auto;padding:8px 10px 20px}
.side-group{border-bottom:1px solid var(--line);margin:0 0 4px;background:transparent}
.side-group summary{padding:11px 8px;font-weight:700;font-size:.84rem;color:var(--ml-deep);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:6px}
.side-group summary::-webkit-details-marker{display:none}
.side-group summary::after{content:"›";margin-left:auto;font-weight:800;color:#c0c0c0;
  transform:rotate(90deg);transition:transform .15s}
.side-group[open] summary::after{transform:rotate(-90deg)}
.side-links{display:grid;gap:2px;padding:2px 4px 8px}
.side-links a,.side-links button{display:block;width:100%;text-align:left;background:transparent;
  border:none;padding:9px 12px;border-radius:8px;color:var(--text);font:inherit;
  font-size:.9rem;font-weight:500;text-decoration:none;cursor:pointer}
.side-links a:hover,.side-links button:hover{background:var(--ml-yellow-soft);text-decoration:none}
.side-links a.active{background:var(--ml-yellow);color:var(--ml-deep);font-weight:700}
.side-foot{padding:12px;border-top:1px solid var(--line);background:var(--panel2)}

/* ---------- Navegação segmentada (quick-nav) ---------- */
main{width:min(100%,1600px);margin:0 auto;padding:14px 16px 120px}
.tabs{display:flex;gap:6px;overflow:auto;padding:8px 16px;position:sticky;top:0;z-index:15;
  background:#fff;border-bottom:1px solid var(--line)}
.tabs a{background:transparent;color:var(--muted);white-space:nowrap;padding:9px 13px;
  border-radius:999px;font-weight:600;font-size:.88rem;text-decoration:none;display:inline-block}
.tabs a:hover{background:var(--ml-yellow-soft);text-decoration:none}
.tabs a.active{background:var(--ml-yellow);color:var(--ml-deep);font-weight:700}
.tabs .tabgroup{display:inline-flex;align-items:center;gap:2px;flex-wrap:nowrap;flex:0 0 auto;
  padding:0 10px 0 0;border-right:1px solid var(--line);margin-right:8px}
.tabs .tabgroup:last-child{border-right:none}
.tablabel{display:none}
.tabs{align-items:center}

/* ---------- Bottom nav + FAB (mobile) ---------- */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.08);
  padding:6px 2px calc(6px + env(safe-area-inset-bottom))}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--muted);font-size:.62rem;font-weight:700;text-decoration:none;padding:4px 0}
.bottom-nav a.active{color:var(--accent)}
.bottom-nav .bn-ico{font-size:1.25rem;line-height:1}
.bottom-nav .bn-fab{flex:1;position:relative}
.bottom-nav .fabb{width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;
  transform:translateY(-16px);box-shadow:0 6px 14px rgba(0,165,80,.4)}
.bottom-nav a.bn-fab.active .fabb{background:var(--accent);box-shadow:0 6px 14px rgba(52,131,250,.4)}
.bottom-nav a.bn-fab .bn-fab-label{margin-top:-12px;color:var(--muted)}
.bottom-nav a .bn-fab-label{color:var(--muted)}

/* ---------- Cards, grid, dados ---------- */
.card{background:var(--panel);border:none;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card h2{margin:0 0 8px;font-size:1.05rem;font-weight:700}
.grid{display:grid;gap:12px}
@media(min-width:720px){.grid.two{grid-template-columns:1fr 1fr}}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted);font-size:.85rem}
.kv{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:.9rem}
.kv span{color:var(--muted)}
.stat{background:var(--panel2);border-radius:10px;padding:12px}
.stat b{display:block;font-size:1.4rem;letter-spacing:-.01em}
.item{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:none}
.money{font-variant-numeric:tabular-nums;font-weight:700}
.price{font-weight:700;font-size:1.15rem}
.spinner{width:16px;height:16px;border:2px solid rgba(52,131,250,.25);border-top-color:var(--accent);
  border-radius:50%;display:inline-block;animation:spin .8s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}

.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:700}
.pill.ok{background:#00a6501a;color:var(--brand)}.pill.pending{background:#fff4e5;color:#b45309}
.pill.bad{background:#ffe5e5;color:#b91c1c}.pill.info{background:#3483fa1a;color:var(--accent)}
/* Fase 108 (Onda 6): cor semântica por estado — alarme (laranja) e fora (cinza). */
.pill.warn{background:#ffe9d6;color:#c2410c}.pill.off{background:#e5e7eb;color:#4b5563}

/* Onda 8 (Fase 180.2): legenda das cores de estado (stateLegend()). */
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  padding:10px 12px;margin:0 0 12px;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--radius);font-size:.78rem;color:var(--muted)}
.legend-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.legend-item .pill{cursor:default}

/* ---------- Rodapé profissional (Fase 110, Onda 6) ---------- */
/* Onda 9 (Fases 203/204): cores configuráveis com contraste AA corrigido pela
   UI; `--footer-fg-softer` mantém a hierarquia visual do texto secundário. */
.site-footer{margin-top:48px;padding:38px 5vw 18px;background:var(--footer-bg,#080808);
  border-top:3px solid #ffe600;color:var(--footer-fg,#fff);font-size:.84rem}
.site-footer .muted{color:var(--footer-fg-softer,#d6d6d6)}
.site-footer h3{margin:0 0 12px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#ffe600}
.site-footer .footer-social-h{margin-top:14px}
.site-footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1.2fr 1.15fr;gap:32px;align-items:start}
.footer-brand{font-weight:800;font-size:1.12rem;margin-bottom:6px;color:#fff}
.footer-brand .bolt{color:#ffe600}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col a,.footer-col .linklike{color:#fff;text-decoration:none;border-radius:6px;padding:1px 0;width:fit-content}
.footer-col a:hover,.footer-col .linklike:hover{color:#ffe600;text-decoration:underline;text-underline-offset:3px}
.footer-col .linklike{background:none;border:0;font:inherit;cursor:pointer}
.footer-tagline{margin:0 0 14px;max-width:34ch;line-height:1.65}
.footer-company{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);
  color:#cfcfcf;font-size:.78rem;line-height:1.7}
.footer-subhead{margin-top:20px!important}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:30px;padding-top:14px;border-top:1px solid rgba(255,230,0,.3);font-size:.76rem;color:#bdbdbd}
.footer-bottom p{margin:0}
.footer-made{color:#ffe600}
@media (max-width:900px){.site-footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.site-footer{padding:26px 4vw 16px}.site-footer-grid{grid-template-columns:1fr;gap:24px}}
/* Onda 8 (Fase 176): distribuição, filtros e resposta do vendedor. */
.chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:999px;padding:3px 10px;font-size:.78rem;cursor:pointer}
.chip.active{background:var(--brand);border-color:var(--brand);color:#111;font-weight:700}
.review-bars{display:grid;gap:3px;max-width:340px}
.review-bar{display:grid;grid-template-columns:34px 1fr 28px;align-items:center;gap:6px;font-size:.78rem}
.review-bar-label{border:0;background:none;color:var(--brand);text-align:left;cursor:pointer;padding:0;font:inherit}
.review-bar-track{height:8px;background:var(--panel2,#eee);border-radius:999px;overflow:hidden;display:block}
.review-bar-fill{display:block;height:100%;background:#f5a623;border-radius:999px}
.review-bar-qty{text-align:right;font-size:.72rem}
.review-reply{margin-top:6px;padding:8px 10px;border-left:3px solid var(--brand);background:var(--panel2);border-radius:0 8px 8px 0;font-size:.82rem}
.review-reply b{display:block;font-size:.75rem;margin-bottom:2px}
.countdot{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 5px;border-radius:999px;background:var(--brand);color:#fff;font-size:.62rem;font-weight:800;
  margin-left:6px;position:absolute;top:-2px;right:-4px}
.countdot.warn{background:var(--danger)}

/* ---------- Breadcrumbs ---------- */
.crumbs{display:flex;gap:6px;align-items:center;font-size:.82rem;color:var(--muted);
  margin-bottom:10px;flex-wrap:wrap}
.crumbs a{color:var(--accent);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---------- Tabelas de dados (primeira classe) ---------- */
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
table.data{width:100%;border-collapse:collapse;font-size:.85rem}
table.data th,table.data td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  white-space:nowrap;vertical-align:middle}
table.data th{color:var(--ml-deep);font-weight:700;cursor:pointer;user-select:none;
  position:sticky;top:0;background:var(--panel2)}
table.data th:hover{color:var(--accent)}
table.data th .arr{opacity:.5;font-size:.68rem;margin-left:4px}
table.data tbody tr:hover td{background:var(--ml-yellow-soft)}
/* Onda 4 (Fase 57): dados de tabela clicáveis (padrão de hyperlink). */
table.data a{color:var(--accent);text-decoration:none;font-weight:600}
table.data a:hover{text-decoration:underline}
table.data tbody tr.clickable{cursor:pointer}
table.data tbody tr.clickable:hover td{background:var(--ml-yellow-soft)}
.filterrow{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.filterrow input,.filterrow select{width:auto;min-width:150px}
/* Fase 36: filtro global + filtro por coluna das tabelas de dados */
.dt-tools{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.dt-tools input.dt-filter{max-width:320px;width:100%}
table.data tr.dt-filters th{padding:4px 6px;background:var(--panel2);cursor:default}
table.data input.dt-col-filter{width:100%;min-width:70px;font-size:.72rem;padding:4px 6px}
table.data input.dt-col-filter::placeholder{color:var(--muted);opacity:.7}
/* Fase 103 (Onda 6): zebra nas tabelas do app + rodapé de somatório */
table.data tbody tr:nth-child(even) td{background:var(--panel2,#F7F9FC)}
table.data tbody tr:hover td{background:var(--ml-yellow-soft)}
table.data tfoot td{border-top:2px solid var(--line);background:var(--panel2);
  font-variant-numeric:tabular-nums}
table.data tfoot td b{color:var(--ml-deep)}

/* ---------- Tips (Fase 106, Onda 6) ---------- */
.tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  margin-left:6px;border-radius:50%;background:var(--ml-deep);color:#fff;font-size:.68rem;
  font-weight:700;cursor:help;user-select:none;vertical-align:middle}
.tip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (hover:hover){
  .tip:hover::after,.tip:focus::after{
    content:attr(data-tip);position:absolute;z-index:9999;max-width:280px;width:max-content;
    background:var(--ml-deep);color:#fff;font-size:.74rem;font-weight:400;line-height:1.4;
    padding:8px 10px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.25);
    transform:translateY(-4px);white-space:normal;text-align:left}
  .tip{position:relative}
}

/* ---------- Sub-nav administrativa ---------- */
.adminsub{display:flex;gap:6px;overflow:auto;padding:10px 0;flex-wrap:wrap}
.adminsub button{background:#fff;border:1px solid var(--line-strong);color:var(--muted);
  padding:8px 14px;border-radius:999px;font-size:.8rem;font-weight:600;white-space:nowrap}
.adminsub button:hover{border-color:var(--accent);color:var(--accent)}
.adminsub button.active{background:var(--ml-yellow);color:var(--ml-deep);border-color:var(--ml-yellow);font-weight:700}
/* Revisão Onda 6: Centro de Administração do SITE com menu CONVENCIONAL
   (item-pai expansível + sub-itens) ao lado do conteúdo. */
.adminlayout{display:grid;grid-template-columns:250px 1fr;gap:14px;align-items:start;margin-top:10px}
@media (max-width:880px){.adminlayout{grid-template-columns:1fr}}
.adminmenu{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;
  position:sticky;top:10px;max-height:calc(100vh - 24px);overflow:auto}
.adminmenu input[type="search"],.adminmenu input{width:100%;margin-bottom:10px;padding:8px 11px;
  border-radius:9px;border:1px solid var(--line-strong);font-size:.8rem;font-family:inherit}
.adminmenu .searchrow input{margin-bottom:10px}
.adminmenu .searchrow .tip{flex:0 0 auto}
.adminmenu-group{margin-bottom:6px}
.adminmenu-h{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:#F7F9FC;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ml-deep);cursor:pointer;font-family:inherit;text-align:left}
.adminmenu-h:hover{border-color:var(--accent);color:var(--accent)}
.adminmenu-items{display:none;padding:5px 0 4px 10px;margin:4px 0 0 7px;border-left:2px solid var(--line)}
.adminmenu-group.open .adminmenu-items{display:flex;flex-direction:column;gap:2px}
.adminmenu-items button{background:transparent;border:none;text-align:left;padding:8px 11px;
  border-radius:8px;font-size:.82rem;color:var(--muted);cursor:pointer;font-weight:600;
  font-family:inherit;display:block;width:100%}
.adminmenu-items button:hover{background:#F7F9FC;color:var(--accent)}
.adminmenu-items button.active{background:var(--ml-yellow);color:var(--ml-deep);font-weight:700}
.adminmenu-h .navcaret,.navtitle .navcaret{transition:transform .15s ease}
.adminmenu-group:not(.open) .adminmenu-h .navcaret{transform:rotate(-90deg)}
.adminpanel{min-width:0}
/* Revisão Onda 6: abas com DESENHO DE TAB (não botões) — faixa com régua
   inferior, aba ativa conectada ao painel e marca de destaque. */
.centabs{display:flex;flex-wrap:wrap;gap:2px;margin:14px 0 0;padding:0 2px;
  border-bottom:2px solid var(--line-strong)}
.centtab{background:transparent;border:1px solid transparent;border-bottom:none;
  border-radius:10px 10px 0 0;color:var(--muted);padding:10px 18px;font-size:.85rem;font-weight:600;
  cursor:pointer;margin-bottom:-2px;font-family:inherit;position:relative}
.centtab:hover{color:var(--accent);background:#2968C80f}
.centtab.active{background:#fff;border-color:var(--line-strong);color:var(--ml-deep);font-weight:700;
  box-shadow:inset 0 -3px 0 var(--ml-yellow)}
.centtab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.censec{background:#fff;border:1px solid var(--line);border-top:none;border-radius:0 0 10px 10px;
  padding:12px 16px 4px}

/* ---------- Modais / toast ---------- */
#modal{position:fixed;inset:0;background:rgba(45,50,119,.45);z-index:100;padding:6vh 4vw;
  overflow:auto;animation:fadeIn .16s ease}
#modal .panel{max-width:680px;margin:0 auto;background:#fff;border-radius:var(--radius-lg);
  padding:18px;box-shadow:var(--shadow-lg);animation:slideUp .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;background:var(--ml-deep);color:#fff;
  padding:12px 18px;border-radius:10px;z-index:99;display:none;max-width:92%;box-shadow:var(--shadow-lg);
  font-size:.9rem;font-weight:600}

/* ---------- Dropdowns (notificações) ---------- */
.drop{position:fixed;z-index:60;min-width:320px;max-width:380px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);
  max-height:70vh;overflow:auto;animation:slideUp .16s ease}
.drop .dhead{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  border-bottom:1px solid var(--line);font-weight:700;font-size:.85rem}
.drop .dhead a{font-size:.72rem;color:var(--accent);cursor:pointer;text-decoration:none;font-weight:700}
.drop .ditem{display:block;width:100%;padding:10px 14px;border:none;background:transparent;text-align:left;
  color:var(--text);font-size:.84rem;border-bottom:1px solid var(--line);cursor:pointer;line-height:1.35}
.drop .ditem:last-child{border-bottom:none}
.drop .ditem:hover{background:var(--panel2)}
.drop .ditem .dtime{display:block;font-size:.68rem;color:var(--muted);margin-top:2px}
.drop .ditem.unread-item{background:var(--ml-yellow-soft)}
.drop .dempty{padding:22px 14px;text-align:center;color:var(--muted);font-size:.85rem}

/* ---------- Skeleton ---------- */
.skel{position:relative;overflow:hidden;background:var(--panel2);border-radius:10px}
.skel.line{height:14px;margin:8px 0}
.skel.card{height:150px}
.skel.stat{height:74px}
.skel:after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,230,0,.35),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.skelgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:14px}

/* ---------- Chat ---------- */
.chat{display:grid;gap:10px;max-height:420px;overflow:auto;padding:6px}
.bubble{max-width:78%;padding:9px 12px;border-radius:14px;font-size:.9rem;line-height:1.35}
.bubble.me{margin-left:auto;background:var(--ml-yellow);color:var(--ml-deep)}
.bubble.other{background:var(--panel2);border:1px solid var(--line)}
.bubble .meta{display:block;font-size:.68rem;opacity:.75;margin-top:3px}
.unread{background:var(--accent);color:#fff;border-radius:999px;font-size:.68rem;padding:1px 7px;margin-left:6px}
.bubble a{text-decoration:underline}

/* ---------- Rastreio / Leaflet (estilo Uber) ---------- */
.track{position:relative;height:360px;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:var(--panel2)}
#realMap{width:100%;height:100%;z-index:1}
.map-overlay{position:absolute;top:10px;right:10px;z-index:500;background:#ffffffeb;backdrop-filter:blur(6px);
  border:1px solid var(--line);padding:10px 14px;border-radius:12px;font-size:.85rem;max-width:240px;
  box-shadow:var(--shadow-lg)}
.custom-marker{background:var(--brand);color:#fff;border:2.5px solid #fff;border-radius:50%;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 4px 12px rgba(0,0,0,.3);
  animation:pulse 2s infinite}
.custom-marker.client{background:var(--accent);box-shadow:0 4px 12px rgba(52,131,250,.5)}
.custom-marker.dest{background:var(--warn);box-shadow:0 4px 12px rgba(247,61,1,.5)}
@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(0,165,80,.55)}
  70%{transform:scale(1.06);box-shadow:0 0 0 10px rgba(0,165,80,0)}100%{transform:scale(.95)}}
.timeline{list-style:none;margin:8px 0 0;padding:0}
.timeline li{padding:6px 0 6px 16px;border-left:2px solid var(--line-strong);position:relative;font-size:.85rem}
.timeline li:before{content:"";position:absolute;left:-5px;top:12px;width:8px;height:8px;border-radius:50%;
  background:var(--brand)}

/* ---------- Marketplace: cards de produto estilo Mercado Livre ---------- */
.store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:14px;margin-top:14px}
.store-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease;position:relative}
.store-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.store-card-img{width:100%;height:175px;object-fit:cover;background:var(--panel2);display:block;
  border-bottom:1px solid var(--line);transition:transform .3s ease;padding:6px}
.store-card:hover .store-card-img{transform:scale(1.03)}
.store-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1}
.store-card-title{font-size:.92rem;font-weight:700;margin:0 0 6px;line-height:1.35;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;
  cursor:pointer}
.store-card-title:hover{color:var(--accent)}
.store-card-tag{font-size:.68rem;padding:2px 8px;border-radius:999px;background:var(--panel2);
  color:var(--muted);width:max-content;margin-bottom:6px;font-weight:600}
.store-card-seller{font-size:.74rem;color:var(--accent);margin-bottom:6px;display:flex;align-items:center;gap:4px}
.badge-full{background:var(--brand);color:#fff;font-size:.62rem;font-weight:800;padding:2px 6px;
  border-radius:4px;display:inline-flex;align-items:center;gap:2px}
.badge-free-ship{color:var(--brand);font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:4px}
.store-rating{color:#B45309;font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:4px;margin-bottom:4px}
.store-price-box{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.store-price-main{font-size:1.45rem;font-weight:800;color:var(--text);letter-spacing:-.02em}
.store-price-sub{font-size:.76rem;color:var(--muted);font-weight:600}
.store-badge-tier{font-size:.68rem;background:var(--ml-yellow-soft);color:#b45309;padding:2px 6px;
  border-radius:6px;font-weight:700;margin-left:4px;border:1px solid var(--ml-yellow)}
.store-card-actions{display:flex;gap:6px;margin-top:12px}
/* Fase 66: mini-carrossel de fotos dentro do card */
.card-carousel{position:relative;height:175px;overflow:hidden;background:var(--panel2);touch-action:pan-y}
.card-carousel-track{position:relative;height:100%}
.card-carousel-img{position:absolute;inset:0;height:100%;opacity:0;visibility:hidden;
  transition:opacity .25s ease,transform .25s ease;cursor:pointer;border-bottom:0}
.card-carousel-img.is-active{opacity:1;visibility:visible}
.card-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;
  display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.92);
  color:#0f172a;font-size:1.25rem;line-height:1;cursor:pointer;z-index:2;
  box-shadow:0 2px 8px rgba(15,23,42,.18);opacity:0;pointer-events:none;transition:opacity .18s ease}
.card-carousel-arrow.prev{left:8px}
.card-carousel-arrow.next{right:8px}
.card-carousel:hover .card-carousel-arrow,.card-carousel:focus-within .card-carousel-arrow{opacity:1;pointer-events:auto}
.card-carousel-arrow:hover{background:#fff}
.card-carousel-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;
  gap:5px;z-index:2;pointer-events:none}
.card-carousel-dot{width:7px;height:7px;padding:0;border-radius:50%;cursor:pointer;pointer-events:auto;
  border:1px solid rgba(255,255,255,.95);background:rgba(15,23,42,.45)}
.card-carousel-dot.is-active{background:#fff;border-color:#fff;transform:scale(1.15)}
@media (hover:none){.card-carousel-arrow{display:none}}
.cardgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.cardgrid .card{padding:10px}
.cardgrid .card h3{margin:6px 0 2px;font-size:.9rem;font-weight:600}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.thumb{width:46px;height:46px;object-fit:cover;border-radius:8px;border:1px solid var(--line);
  cursor:zoom-in;display:block;background:var(--panel2)}
.thumb.lg{width:100%;max-height:300px;object-fit:contain;cursor:zoom-in;background:var(--panel2)}
.kanbancol{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px;min-width:210px;flex:1}
.kanbancol h4{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.kanbanrow{display:flex;gap:10px;overflow:auto;align-items:flex-start}

/* ---------- Marketplace: filtros na sidebar esquerda (Fase 64) ---------- */
.market-toolbar{margin-bottom:14px}
.market-toolbar-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.market-toolbar-row input{min-width:220px}
.market-filter-toggle{display:none}
.market-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.market-sidebar{display:grid;gap:14px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
.market-sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.market-sidebar-head h2{margin:0;font-size:1.05rem}
.market-sidebar-close{display:none}
.market-filter-group{display:grid;gap:6px}
.market-filter-group label,.market-filter-label{font-size:.74rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.market-price-row{display:flex;align-items:center;gap:6px}
.market-price-row input{min-width:0;width:100%}
.market-check{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600}
.market-quicktags{display:flex;gap:6px;flex-wrap:wrap}
.market-quicktags .badge{cursor:pointer;border:1px solid var(--line-strong);background:#fff}
.mkt-facets{display:flex;gap:6px;flex-wrap:wrap}
.market-results{min-width:0}
.market-results-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.market-sidebar-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:79}
.market-feed-status{margin:14px 0 0;text-align:center;font-size:.78rem}
.market-sentinel{height:1px}
.market-load-more{display:flex;justify-content:center;margin:16px 0 4px}
.skeleton-card{pointer-events:none}
.skeleton-block{background:linear-gradient(90deg,var(--panel2) 25%,#e9eef5 37%,var(--panel2) 63%);
  background-size:400% 100%;animation:market-skeleton 1.25s ease infinite}
.skeleton-img{height:175px;border-bottom:1px solid var(--line)}
.skeleton-body{padding:14px;display:grid;gap:9px}
.skeleton-line{height:11px;border-radius:6px}
.skeleton-line.w70{width:70%}
.skeleton-line.w90{width:90%}
.skeleton-line.w45{width:45%}
@keyframes market-skeleton{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (max-width:900px){
  .market-layout{grid-template-columns:1fr}
  .market-sidebar{position:fixed;top:0;left:0;bottom:0;z-index:80;width:min(86vw,330px);
    max-height:none;border-radius:0 14px 14px 0;transform:translateX(-105%);
    transition:transform .22s ease;box-shadow:var(--shadow-lg)}
  .market-sidebar.open{transform:translateX(0)}
  .market-filter-toggle{display:inline-flex}
  .market-sidebar-close{display:inline-flex}
  body.market-filters-open{overflow:hidden}
}

/* ---------- Carousel de banners ---------- */
.banner-carousel{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px;
  box-shadow:var(--shadow-lg);min-height:170px;background:var(--ml-yellow)}
.bc-track{display:flex;width:100%;transition:transform .45s ease}
.bc-slide{min-width:100%;min-height:170px;display:flex;align-items:center;position:relative;overflow:hidden}
.bc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
/* Contraste AA (Fase 68): o painel claro isola o texto da cor/imagem do banner,
   que é configurável pelo admin e pode ser clara ou escura. */
.bc-content{position:relative;z-index:2;padding:18px 24px;max-width:min(70%,620px);
  margin:18px 24px;background:rgba(255,255,255,.93);border-radius:12px;box-shadow:var(--shadow)}
.bc-title{margin:0 0 4px;font-size:1.35rem;font-weight:800;color:var(--ml-deep);line-height:1.2}
.bc-sub{margin:0 0 12px;font-size:.92rem;color:#333;font-weight:500}
.bc-cta{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;
  padding:9px 18px;border-radius:6px;font-weight:700;font-size:.88rem;box-shadow:var(--shadow);
  text-decoration:none}
.bc-cta:hover{background:var(--accent-dark);text-decoration:none}
.bc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:36px;height:64px;
  background:rgba(255,255,255,.85);border:none;border-radius:8px;font-size:1.6rem;color:var(--ml-deep);
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.banner-carousel:hover .bc-arrow{opacity:1}
.bc-left{left:10px}.bc-right{right:10px}
.bc-dots{position:absolute;bottom:10px;left:0;right:0;z-index:6;display:flex;gap:6px;justify-content:center}
.bc-dots button{width:9px;height:9px;border-radius:50%;background:rgba(45,50,119,.35);border:none;padding:0}
.bc-dots button.on{background:var(--ml-deep);transform:scale(1.25)}

/* ---------- Assistente de fotos do produto ---------- */
/* Onda 10: upload é a ação principal para qualquer imagem do sistema. */
.image-upload{display:grid;gap:8px;border:1px dashed var(--line-strong,#bbb);border-radius:10px;padding:10px;background:var(--panel2,#fafafa)}
.image-upload-actions{align-items:center;gap:8px;flex-wrap:wrap}
.image-upload-preview{min-height:70px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;overflow:hidden}
.image-upload-preview img{max-width:100%;max-height:190px;object-fit:contain;display:block}
.image-upload.is-uploading{opacity:.65;pointer-events:none}
.image-upload-advanced{margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
.image-upload-advanced summary{cursor:pointer;color:var(--muted);font-size:.8rem;font-weight:700}
.pw-card{background:var(--ml-yellow-soft);border:1px solid var(--ml-yellow);border-radius:10px;padding:12px;margin-top:12px}
.pw-gallery{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;min-height:60px}
.pw-item{width:110px;position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:6px;cursor:grab}
.pw-item:active{cursor:grabbing}
.pw-item img{width:100%;height:80px;object-fit:cover;border-radius:6px;display:block}
.pw-item .pw-main{position:absolute;top:2px;left:2px;background:var(--brand);color:#fff;font-size:.58rem;
  font-weight:800;padding:2px 6px;border-radius:4px;text-transform:uppercase}
.pw-item-actions{display:flex;gap:4px;justify-content:center;margin-top:4px}
.pw-empty{width:100%}

/* ---------- Onda 2 (Fase 21): páginas de formulário e CRUD ---------- */
/* Botões compactos das ações de linha (✏️ Editar / 🗑 Excluir) */
.btn.mini{font-size:.72rem;padding:5px 8px}
/* Onda 4 (Fase 51): .btn.danger pinta o fundo de vermelho; a variante mini é
   outline — precisa ZERAR o fundo (antes: texto vermelho sobre fundo vermelho,
   botão "Cancelar" do chamado ilegível) e definir a borda de fato. */
.btn.mini.danger{background:#fff;color:var(--danger);border:1px solid var(--line-strong)}
.btn.mini.danger:hover{border-color:var(--danger);background:#fef2f2}
.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* Destaque da linha recém-salva ao voltar para a listagem */
.item.flash{animation:fpFlash 2.4s ease-out 1;border-radius:8px}
@keyframes fpFlash{0%{background:rgba(0,166,80,.18)}100%{background:transparent}}
/* Empty-state das listagens com CTA de cadastro */
.empty{text-align:center;padding:18px 6px;color:var(--muted)}
.empty .btn{margin-top:8px}
/* Página de formulário: herda .card/.grid/.row do design system */
#formPage .card{max-width:820px}

/* ---------- Onda 4 (Fase 62): loja pública + editor ---------- */
.store-hero{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.store-cover{height:230px;background:linear-gradient(120deg,var(--store-theme,#FFE600),#2d3277);
  position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.store-cover img{width:100%;height:100%;object-fit:cover;display:block}
.store-cover-fallback{color:#fff;font-weight:800;font-size:1.4rem;text-align:center;padding:20px;
  text-shadow:0 2px 10px rgba(0,0,0,.35)}
.store-identity{display:flex;gap:16px;align-items:flex-end;padding:0 22px 20px;margin-top:-46px;position:relative}
.store-logo{width:96px;height:96px;border-radius:18px;background:#fff;border:4px solid #fff;
  box-shadow:0 8px 24px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:1.7rem;font-weight:900;color:var(--store-theme,#2d3277);flex:0 0 auto}
.store-logo img{width:100%;height:100%;object-fit:cover}
.store-head{padding-top:50px;min-width:0}
.store-head h1{margin:4px 0;font-size:1.65rem;line-height:1.15}
.store-head p{margin:0 0 8px;color:var(--muted)}
.store-chips{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.store-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.store-stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center}
.store-stat b{display:block;font-size:1.3rem;color:var(--ml-deep)}
.store-stat span{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.store-layout{display:grid;grid-template-columns:minmax(240px,310px) minmax(0,1fr);gap:14px;margin-top:14px}
.store-about h2,.store-catalog h2{font-size:1.1rem}
.store-about p{white-space:pre-line;line-height:1.55}
.store-rating-box{display:grid;gap:2px;background:var(--panel2);border-radius:8px;padding:10px;margin-top:10px}
.store-rating-box b{font-size:1.25rem}.store-rating-box span{font-size:.8rem;color:var(--muted)}
.store-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:12px}
.store-product{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.store-product:hover{box-shadow:0 8px 24px rgba(0,0,0,.10);transform:translateY(-1px)}
.store-product-img{height:150px;background:var(--panel2);display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:2rem;text-decoration:none}
.store-product-img img{width:100%;height:100%;object-fit:contain;padding:10px}
.store-product-body{padding:10px;display:flex;flex-direction:column;gap:5px;flex:1}
.store-product-title{color:var(--text);font-size:.88rem;line-height:1.3;font-weight:600;height:2.6em;
  overflow:hidden;text-decoration:none}
.store-product-title:hover{text-decoration:underline}
.store-product-rating{font-size:.72rem;color:#b45309}
.store-product-price{font-size:1.18rem;font-weight:800;color:var(--ml-deep)}
.store-product-ship{font-size:.72rem;color:var(--brand);min-height:1.2em}
.store-product-btn{margin-top:auto;padding:7px;font-size:.78rem}
.store-empty{text-align:center;padding:26px 14px}
.store-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:14px;align-items:start}
.store-form-grid .span2{grid-column:1/-1}
.store-checks{margin-top:14px;gap:16px}
.store-checks .check{display:flex;align-items:center;gap:7px;font-weight:600}
.store-preview{position:sticky;top:14px;overflow:hidden;padding:0}
.store-preview h2,.store-preview>.muted{padding:0 14px}
.store-preview h2{margin:14px 14px 0}
.store-preview-cover{height:108px;background:var(--store-theme,#FFE600);display:flex;align-items:center;
  justify-content:center;overflow:hidden;margin-top:12px}
.store-preview-cover img{width:100%;height:100%;object-fit:cover}
.store-preview-cover span{color:#fff;font-weight:800;text-align:center;padding:14px;font-size:.9rem;
  text-shadow:0 2px 8px rgba(0,0,0,.35)}
.store-preview-body{padding:0 14px 16px;display:grid;gap:7px}
.store-preview-logo{width:58px;height:58px;border-radius:14px;background:#fff;border:3px solid #fff;
  box-shadow:0 4px 14px rgba(0,0,0,.16);margin-top:-30px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-weight:900;color:var(--store-theme,#2d3277)}
.store-preview-logo img{width:100%;height:100%;object-fit:cover}
.store-preview-body h3{margin:0;font-size:1.15rem}
.store-preview-body p{margin:0;color:var(--muted);font-size:.84rem;white-space:pre-line}
.store-preview-meta{font-size:.8rem;color:var(--muted);line-height:1.55}
#sfColor{height:42px;padding:3px}
@media (max-width:900px){
  .store-layout,.store-editor{grid-template-columns:1fr}
  .store-preview{position:static}
}
@media (max-width:600px){
  .store-cover{height:170px}
  .store-identity{padding:0 14px 16px;margin-top:-36px;gap:10px}
  .store-logo{width:76px;height:76px;border-radius:14px}
  .store-head{padding-top:40px}
  .store-head h1{font-size:1.25rem}
  .store-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .store-products{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
  .store-product-img{height:120px}
}

/* ---------------- Documentos legais (Onda 7, Fases 140/146) ---------------- */
.legal-doc{line-height:1.65;font-size:.95rem;max-width:78ch}
.legal-doc h2{margin:26px 0 10px;font-size:1.15rem;font-weight:700;border-bottom:1px solid var(--line);padding-bottom:6px}
.legal-doc h3{margin:20px 0 8px;font-size:1.02rem;font-weight:700}
.legal-doc h4,.legal-doc h5,.legal-doc h6{margin:16px 0 6px;font-weight:700}
.legal-doc p{margin:0 0 10px}
.legal-doc ul,.legal-doc ol{margin:0 0 12px;padding-left:22px}
.legal-doc li{margin:3px 0}
.legal-doc blockquote{margin:12px 0;padding:10px 14px;border-left:3px solid var(--brand);
  background:var(--panel-2,#f7f8fa);border-radius:0 8px 8px 0;color:var(--muted)}
.legal-doc code{background:var(--panel-2,#f2f3f5);padding:1px 5px;border-radius:4px;font-size:.9em}
.legal-doc hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.legal-doc table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.88rem;display:block;overflow-x:auto}
.legal-doc th,.legal-doc td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.legal-doc th{background:var(--panel-2,#f2f3f5);font-weight:700}
.legal-doc tbody tr:nth-child(even){background:rgba(0,0,0,.02)}
.legal-doc a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.legal-doc:focus{outline:none}
@media (max-width:600px){
  .legal-doc{font-size:.92rem;max-width:100%}
  .legal-doc h2{font-size:1.05rem}
}

/* ==================== Onda 9 — Fase 202 ==================== */
/* Miniaturas acessíveis: link com foco visível e thumb 48px nas tabelas. */
.thumb-link{display:inline-flex;flex-shrink:0;border-radius:8px;cursor:zoom-in}
.thumb-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.thumb-48{width:48px;height:48px}
/* Responsividade R88: no mobile a tabela de catálogo/estoque vira "cards"
   empilhados mantendo a miniatura à esquerda. */
@media (max-width:720px){
  #productList table.data thead{display:none}
  #productList table.data tbody tr{display:block;border:1px solid var(--line);
    border-radius:12px;margin:8px 0;padding:8px;background:var(--panel2,#fff)}
  #productList table.data tbody td{display:flex;align-items:center;gap:8px;
    border:0;padding:3px 6px}
  #supProducts table.data thead{display:none}
  #supProducts table.data tbody tr{display:block;border:1px solid var(--line);
    border-radius:12px;margin:8px 0;padding:8px}
  #supProducts table.data tbody td{display:flex;align-items:center;gap:8px;border:0;padding:3px 6px}
}

/* ==================== Onda 9 — Fase 205: QR Pix 300×300 ==================== */
/* QR legível: 300×300 fixos no desktop, quiet zone interno e responsivo no
   mobile (nunca estoura a largura da tela). */
.pix-qr{width:300px;height:300px;margin:12px auto;padding:14px;background:#fff;
  border:1px solid var(--line);border-radius:14px;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.pix-qr svg{width:100%;height:100%;display:block}
.pix-status{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem}
.pix-status.pending{color:#a16207}
.pix-status.waiting{color:#2563eb}
.pix-status.paid{color:#15803d}
.pix-status.expired{color:#b91c1c}
.pix-copy-feedback{font-size:.78rem;font-weight:700;color:#15803d;display:none}
.pix-copy-feedback.on{display:inline}
@media (max-width:720px){
  .pix-qr{width:min(300px,92vw);height:min(300px,92vw)}
}

/* ==================== Onda 9 — Fases 203/204: Rodapé v2 + widget WhatsApp ==================== */
/* Logo local do rodapé (arquivo da própria API, nunca domínio externo). */
.footer-logo{max-height:44px;max-width:200px;object-fit:contain;display:block;margin-bottom:6px}
/* Redes sociais: ícones SVG locais, alinhados e acessíveis. */
.footer-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;text-decoration:none;color:#ffe600;border:1px solid rgba(255,230,0,.45);
  background:rgba(255,230,0,.05)}
.footer-social a svg{width:20px;height:20px;fill:currentColor}
.footer-social a:hover{background:#ffe600;color:#111;opacity:1}
.footer-menu{display:flex;flex-direction:column;gap:6px}
/* Widget flutuante de WhatsApp (Fase 204): estilos próprios em
   css/support.css (carregado pelo index.html junto deste tema). */

/* Onda 9 (Fase 201): convite do carrinho do visitante. */
.cart-guest-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand, #ffe600);
  border-radius: 10px;
  background: var(--panel2, #f5f5f5);
}
.cart-guest-cta .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .cart-guest-cta .row { width: 100%; }
  .cart-guest-cta .row .btn { flex: 1 1 100%; }
}

/* ==================== One-page checkout / carrinho responsivo ==================== */
.cart-line{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0}
.cart-line .thumb{width:50px;height:50px;object-fit:cover;border-radius:8px}
.cart-line-main{min-width:0}
.cart-line-main > div:first-child{overflow-wrap:anywhere}
.cart-line-actions{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.cart-payment-col{position:sticky;top:12px;align-self:start}
.cart-trust{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:11px;color:var(--muted)}
.cart-trust span{white-space:nowrap}
.check-inline{display:inline-flex;align-items:center;gap:6px;font-weight:600}
@media (max-width:560px){
  .cart-line{grid-template-columns:52px minmax(0,1fr);gap:8px;align-items:start}
  .cart-line .thumb{width:48px;height:48px}
  .cart-line-actions{grid-column:1/-1;justify-content:flex-end;border-top:1px dashed var(--line);padding-top:8px;margin-top:2px}
  .cart-payment-col{position:static}
  .cart-pay-btn{position:sticky;bottom:8px;z-index:5;box-shadow:0 8px 22px rgba(0,0,0,.16)}
}
@media (max-width:430px){
  .store-grid{grid-template-columns:1fr}
  .store-card-img,.card-carousel{height:190px}
  .market-layout{grid-template-columns:1fr}
  .market-filter-group label,.market-sidebar label{font-size:13px;min-height:44px;display:flex;align-items:center;gap:8px}
  #roleBadge{display:none}
  .headactions{gap:2px}
  .headactions .btn.secondary{padding:8px 10px}
}
/* Documentos longos (ajuda e políticas) */
.doc-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start;max-width:1180px;margin:0 auto}
.doc-toc{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
.doc-toc .card{padding:14px}
.doc-toc h3{margin:0 0 8px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.doc-toc a{display:block;padding:6px 8px;border-radius:8px;text-decoration:none;color:var(--text);font-size:.84rem;line-height:1.3}
.doc-toc a:hover,.doc-toc a.active{background:var(--panel2);color:var(--accent-dark);font-weight:700}
.doc-toc a.toc-sub{padding-left:18px;font-size:.78rem;color:var(--muted)}
.doc-main .legal-doc{max-width:none;font-size:1rem;line-height:1.7}
@media print{
  #mlHeader,#siteFooter,#tabs,.side-menu,.side-backdrop,.cookie-banner,.cookie-prefs,.support-widget,.doc-toc,.crumbs{display:none !important}
  .doc-shell{display:block}
  .doc-main .card{border:0;box-shadow:none;padding:0}
  .doc-main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
  .doc-main h2,.doc-main h3{break-after:avoid}
  .doc-main table,.doc-main .doc-callout{break-inside:avoid}
}
.doc-main .card{padding:22px 26px}
.doc-hero{border-left:5px solid var(--brand);padding:10px 14px;background:var(--panel2);border-radius:0 10px 10px 0;margin-bottom:14px}
.doc-hero h1,.doc-hero h2{margin:0 0 4px;font-size:1.35rem}
.doc-meta{font-size:.78rem;color:var(--muted)}
.doc-callout{border:1px solid var(--line);border-left:4px solid var(--info, #2563eb);background:var(--panel2);border-radius:8px;padding:10px 12px;margin:12px 0}
.doc-callout.warn{border-left-color:var(--warning, #b45309)}
.doc-callout.ok{border-left-color:var(--success, #15803d)}
.doc-callout.danger{border-left-color:var(--danger)}
.doc-main table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.88rem;display:block;overflow-x:auto}
.doc-main th,.doc-main td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.doc-main th{background:var(--panel2);font-weight:800}
.doc-main tbody tr:nth-child(even){background:rgba(0,0,0,.02)}
.doc-main h2{scroll-margin-top:76px;margin-top:24px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.doc-main h3{scroll-margin-top:76px}
@media (max-width:820px){
  .doc-shell{grid-template-columns:1fr}
  .doc-toc{position:static;max-height:none;order:2}
  .doc-main .card{padding:16px}
  .doc-toc details{border:1px solid var(--line);border-radius:10px;background:var(--panel)}
  .doc-toc summary{cursor:pointer;padding:12px;font-weight:800}
  .doc-toc .toc-links{padding:0 10px 10px}
}

/* ==================== Banner de aprovação e Minha Conta -> Documentos ==================== */
.approval-banner{
  background:var(--panel, #fff);
  border:1px solid var(--line, #e5e5e5);
  border-left:5px solid var(--warn, #c2410c);
  border-radius:var(--radius-lg, 14px);
  padding:16px 18px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}
.approval-banner.warn{
  border-left-color:var(--warn, #c2410c);
  background:linear-gradient(90deg, #fffbeb 0%, #ffffff 36%);
}
.approval-banner.bad{
  border-left-color:var(--danger, #b91c1c);
  background:linear-gradient(90deg, #fef2f2 0%, #ffffff 36%);
}
.approval-banner-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}
.approval-banner-title{
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 4px;
  color:var(--text, #333);
}
.approval-checklist{
  list-style:none;
  margin:12px 0 0;
  padding:10px 12px;
  background:var(--panel2, #f5f5f5);
  border:1px solid var(--line, #e5e5e5);
  border-radius:var(--radius, 8px);
  display:grid;
  gap:8px;
}
.approval-check-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:.9rem;
}
.approval-check-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  flex:1 1 220px;
}
.approval-banner-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.doc-req-list{
  display:grid;
  gap:12px;
  margin-top:12px;
}
.doc-req-card{
  border:1px solid var(--line, #e5e5e5);
  border-radius:var(--radius, 8px);
  padding:14px;
  background:var(--panel, #fff);
  display:grid;
  gap:8px;
}
.doc-req-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}
.doc-req-meta{
  font-size:.82rem;
  color:var(--muted, #666);
}
.doc-req-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:4px;
}
.doc-req-actions input[type="file"]{
  width:auto;
  max-width:100%;
  flex:1 1 240px;
  padding:7px 10px;
}
.doc-sub-item{
  border:1px solid var(--line, #e5e5e5);
  border-radius:var(--radius, 8px);
  padding:8px 10px;
  background:var(--panel2, #f5f5f5);
  margin-top:6px;
}
.doc-inline-reject{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:6px;
}
.doc-inline-reject input{
  flex:1 1 200px;
  padding:6px 10px;
}
@media (max-width:560px){
  .approval-banner{padding:14px}
  .approval-banner-actions .btn{width:100%}
  .doc-req-actions .btn{width:100%}
}
/* ==================== Cadastro e login social por perfil ==================== */
.role-hint-box{
  margin:8px 0 12px;
  padding:8px 12px;
  border-radius:var(--radius, 8px);
  border:1px solid var(--line, #e5e5e5);
  border-left:4px solid var(--accent, #2968c8);
  background:var(--panel2, #f5f5f5);
  font-size:.82rem;
  color:var(--text, #333);
}
.role-hint-box.is-provider{
  border-left-color:var(--warn, #c2410c);
  background:#fffbeb;
}
.social-register-box{
  margin:12px 0;
  padding:12px;
  border-radius:var(--radius, 8px);
  border:1px solid var(--line, #e5e5e5);
  background:var(--panel2, #f5f5f5);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.social-reg-title{
  font-size:.82rem;
  font-weight:700;
  color:var(--text, #333);
}
.social-reg-note{
  margin:2px 0 0;
  font-size:.78rem;
  line-height:1.4;
}
.btn-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  background:#fff;
  color:var(--text, #333);
  border:1px solid var(--line-strong, #d9d9d9);
}
.btn-social:hover{
  background:#fafafa;
  border-color:var(--accent, #2968c8);
  color:var(--text, #333);
}
.btn-social svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.auth-or-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 6px;
  color:var(--muted, #666);
  font-size:.78rem;
}
.auth-or-divider::before,
.auth-or-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line, #e5e5e5);
}

/* ==================== Painel inicial por papel e barra da vitrine ==================== */
.lp-logged-bar{
  background:linear-gradient(135deg,var(--ml-yellow-soft,#fffbe5),#ffffff);
  border:1px solid #facc15;
  border-left:5px solid var(--ml-deep,#2d3277);
  border-radius:var(--radius-lg,16px);
  padding:14px 18px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
}
.lp-logged-bar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.lp-logged-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.home-welcome-card{
  background:linear-gradient(135deg,var(--ml-yellow-soft,#fffbe5) 0%,#ffffff 62%);
  border:1px solid #f5e27a;
  margin-bottom:14px;
}
.home-welcome-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.home-hero-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.home-online-pill-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.home-rate-bar{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 14px;
  margin:12px 0;
  border-radius:var(--radius,8px);
  background:var(--panel2,#f5f5f5);
  border:1px solid var(--line,#e5e5e5);
}
.home-rate-bar .home-rate-field{
  flex:1 1 200px;
  max-width:260px;
}
.home-rate-bar label{margin-top:0}
.home-explore-card-wrap{
  margin-top:14px;
}
.home-explore-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;
  margin-top:10px;
}
.home-explore-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px;
  border-radius:var(--radius,8px);
  border:1px solid var(--line,#e5e5e5);
  background:#fff;
  color:var(--text,#333);
  text-decoration:none;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.home-explore-card:hover{
  border-color:var(--accent,#2968c8);
  box-shadow:0 4px 12px rgba(41,104,200,.1);
  transform:translateY(-1px);
  text-decoration:none;
}
.home-explore-ico{font-size:1.35rem;line-height:1}
.hub-section{margin-top:14px}
.hub-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.hub-section-head h2,.hub-section-head h3{margin:0}
.hub-filter-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 12px;
}
.hub-filter-row input{max-width:340px}
.hub-kpi-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
  margin:10px 0 14px;
}
.hub-kpi{
  padding:10px 12px;
  border-radius:var(--radius,8px);
  border:1px solid var(--line,#e5e5e5);
  background:var(--panel2,#f5f5f5);
}
.hub-kpi b{
  display:block;
  font-size:1.2rem;
  color:var(--ml-deep,#2d3277);
  margin-top:2px;
}
.hub-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
}
.hub-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  padding:14px;
  border-radius:var(--radius,8px);
  border:1px solid var(--line,#e5e5e5);
  background:#fff;
}
.hub-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.hub-meta-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:.84rem;
  color:var(--muted,#666);
}
.hub-rate-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--ml-yellow-soft,#fffbe5);
  border:1px solid #facc15;
  color:var(--ml-deep,#2d3277);
  font-weight:700;
  font-size:.78rem;
}
.hub-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:4px;
}
@media (max-width:640px){
  .lp-logged-actions .btn,.home-hero-actions .btn,.hub-actions .btn{width:100%}
  .home-rate-bar .home-rate-field{max-width:none;width:100%}
}

/* ==================== Construtor de Orçamento e Solicitações ==================== */
.qb-shell{max-width:960px}
.qb-step-card{
  margin-bottom:14px;
}
.qb-step-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.qb-step-head h3{margin:0;font-size:1.02rem}
.qb-request-card{
  margin-top:12px;
  padding:14px;
  border-radius:var(--radius,8px);
  border:1px solid #dbe4f0;
  background:#f8fbff;
}
.qb-request-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.qb-request-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
  font-size:.86rem;
  color:var(--text,#333);
}
.qb-spec-chip{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line,#e5e5e5);
  font-size:.78rem;
  color:var(--muted,#555);
}
.qb-problem-box{
  margin-top:10px;
  padding:10px 12px;
  border-radius:var(--radius,8px);
  border:1px solid var(--line,#e5e5e5);
  background:#fff;
  white-space:pre-wrap;
  line-height:1.45;
}
.qb-photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(122px,1fr));
  gap:10px;
  margin-top:10px;
}
.qb-photo-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:6px;
  border-radius:var(--radius,8px);
  border:1px solid var(--line,#e5e5e5);
  background:#fff;
}
.qb-photo-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:100%;
  padding:4px;
}
.qb-photo-btn img,
.qb-photo-thumb{
  width:100%;
  height:88px;
  object-fit:cover;
  border-radius:6px;
  display:block;
  background:#f3f4f6;
}
.qb-mini-photos{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}
.qb-mini-photos .qb-photo-btn{
  width:72px;
  padding:2px;
}
.qb-mini-photos .qb-photo-btn img{
  height:56px;
}
.qb-mode-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:10px;
  margin-top:6px;
}
.qb-mode-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:4px;
  padding:12px 14px;
  border-radius:var(--radius,8px);
  border:2px solid var(--line,#e5e5e5);
  background:#fff;
  color:var(--text,#333);
}
.qb-mode-btn strong{font-size:.94rem}
.qb-mode-btn span{font-size:.82rem;color:var(--muted,#666);font-weight:400;line-height:1.35}
.qb-mode-btn.is-active{
  border-color:var(--accent,#2968c8);
  background:#eff6ff;
}
.qb-item-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
  padding:10px;
  margin-bottom:8px;
  border-radius:var(--radius,8px);
  border:1px solid var(--line,#e5e5e5);
  background:#fafafa;
}
.qb-item-field{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.qb-item-field label{
  margin:0;
  font-size:.75rem;
  color:var(--muted,#666);
}
.qb-item-field.grow{flex:2 1 180px}
.qb-item-field.num{flex:0 1 110px}
.qb-item-field.qty{flex:0 1 78px}
.qb-line-sub{
  font-weight:700;
  font-size:.88rem;
  color:var(--ml-deep,#2d3277);
  padding:6px 4px;
  min-width:92px;
  text-align:right;
}
.qb-total-box{
  padding:12px 14px;
  border-radius:var(--radius,8px);
  border:1px solid #f5e27a;
  background:var(--ml-yellow-soft,#fffbe5);
}
.qb-total-breakdown{
  font-size:.84rem;
  color:var(--muted,#555);
  margin-top:4px;
}
@media (max-width:640px){
  .qb-line-sub{text-align:left;min-width:0}
  .qb-item-field.num,.qb-item-field.qty{flex:1 1 44%}
}
/* ==================== Notificações na Home & Comparador de Orçamentos ==================== */
.home-notif-banner{
  margin-bottom:14px;
  border:1px solid #bfdbfe;
  background:linear-gradient(135deg,#eff6ff 0%,#ffffff 65%);
}
.home-notif-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.home-notif-head h2,.home-notif-head h3{margin:0}
.home-notif-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.home-notif-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 12px;
  border-radius:var(--radius,8px);
  border:1px solid #dbeafe;
  background:#fff;
}
.home-notif-item-meta{
  flex:1 1 240px;
  min-width:0;
}
.orc-req-group{
  margin-top:12px;
  padding:14px;
  border-radius:var(--radius,8px);
  border:1px solid var(--line,#e5e5e5);
  background:#fafcff;
}
.orc-req-group-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.orc-prop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(265px,1fr));
  gap:10px;
  margin-top:8px;
}
.orc-prop-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  padding:12px;
  border-radius:var(--radius,8px);
  border:1px solid var(--line,#e5e5e5);
  background:#fff;
}
.orc-prop-card.is-chosen{
  border-color:#22c55e;
  box-shadow:0 0 0 1px #86efac;
  background:#f0fdf4;
}
.orc-kind-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 9px;
  border-radius:999px;
  font-size:.76rem;
  font-weight:700;
  border:1px solid transparent;
}
.orc-kind-visit{
  background:#fef3c7;
  border-color:#fde68a;
  color:#92400e;
}
.orc-kind-full{
  background:#dbeafe;
  border-color:#bfdbfe;
  color:#1e40af;
}
.op-head-chips{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:6px;
}
.op-provider-box{
  margin-top:10px;
  padding:10px 12px;
  border-radius:var(--radius,8px);
  border:1px solid var(--line,#e5e5e5);
  background:var(--panel2,#f5f5f5);
}
.op-req-box{
  margin-top:10px;
  padding:12px;
  border-radius:var(--radius,8px);
  border:1px solid #dbe4f0;
  background:#f8fbff;
}
@media (max-width:640px){
  .orc-prop-grid{grid-template-columns:1fr}
}