/* rCompras — acabamento neutro (DEV, 2026-10-31).
   Última camada: carregada depois de vertice.css. Cores neutras, destaque só onde há ação ou estado;
   movimento só em transform/opacity, sem loops decorativos. */

:root{
 --p-ease:cubic-bezier(.22,1,.36,1);
 --p-exit:cubic-bezier(.4,0,1,1);
 --p-touch:90ms;
}

/* ---------- Marca no cabeçalho (mesmo ícone da landing) ---------- */
.scan-brand{position:relative;padding-left:42px!important}
.scan-brand .brand-mark{
 position:absolute;left:0;top:50%;transform:translateY(-50%);
 width:34px;height:34px;display:grid;place-items:center;border-radius:var(--v-r-md);
 background:var(--ink);color:var(--bg);
}
.scan-brand .brand-mark svg{width:18px;height:18px;stroke:currentColor;stroke-width:2}

/* ---------- Botões do cabeçalho: créditos sempre neutros, sem brilho pulsando ---------- */
#application .scan-header-actions #credits-trigger[data-plan]{
 animation:none!important;box-shadow:none!important;
 background:var(--v-control)!important;color:var(--ink)!important;border-color:var(--v-control-border)!important;
}
.scan-header-actions button:not(:disabled):active{transform:scale(.95)!important;transition:transform var(--p-touch) ease-out!important}

/* ---------- Busca: carregamento curto e itens entrando em sequência ---------- */
#application > .shopping-search-bar{box-shadow:var(--v-card-shine)!important;transition:border-color var(--v-dur-fast) ease}
#application > .shopping-search-bar:focus-within{border-color:var(--v-field-focus)!important}
#shopping-search{font-size:16px!important}
/* O foco é mostrado pela borda da barra inteira, não por um contorno dentro dela */
html #shopping-search:focus-visible{outline:none!important}
#application > .shopping-search-bar:focus-within{box-shadow:0 0 0 3px var(--v-field-ring)!important}
/* Botão de limpar da busca em cinza, no lugar do × azul do navegador */
#shopping-search::-webkit-search-cancel-button{
 -webkit-appearance:none;appearance:none;width:18px;height:18px;cursor:pointer;background:var(--muted);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/16px no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/16px no-repeat;
}
.shopping-search-bar > svg{transition:opacity 120ms ease,transform 160ms var(--p-ease)}
.shopping-search-bar .search-spinner{
 position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;
 border:2px solid var(--v-spin-track);border-top-color:var(--v-spin-head);
 opacity:0;transform:scale(.6);pointer-events:none;
 transition:opacity 120ms ease,transform 160ms var(--p-ease);
}
.shopping-search-bar.is-searching > svg{opacity:0;transform:scale(.6)}
.shopping-search-bar.is-searching .search-spinner{opacity:1;transform:scale(1);animation:v-spin .7s linear infinite}
@keyframes p-search-reveal{from{opacity:0;transform:translate3d(0,10px,0) scale(.985)}to{opacity:1;transform:none}}
#items > .list-item.search-reveal,#planning-items > .search-reveal{
 animation:p-search-reveal 280ms var(--p-ease) both!important;
 animation-delay:calc(var(--reveal-i,0) * 38ms)!important;
}
.search-empty{
 display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 16px;
 color:var(--muted);font:500 14px/1.45 var(--v-ui);text-align:center;
 animation:p-search-reveal 240ms var(--p-ease) both;
}
.search-empty svg{width:22px;height:22px;opacity:.7}

/* ---------- Distância da busca até o primeiro item ---------- */
html #application #list-content,
html #application.shopping-list-page #list-content,
html #application:not(.shopping-list-page) #list-content{padding-top:2px!important} /* busca → 1º item = 8 px, igual aos outros espaços */

/* ---------- Cards de item: menos bordas, controles agrupados ---------- */
#items > .list-item{transition:background-color .18s ease,border-color .18s ease!important}
/* −  qtd  + num controle só */
#items > .list-item .quick-measure{
 display:inline-flex;align-items:center;gap:0;height:42px;padding:0 2px;
 border:1px solid var(--v-control-border);border-radius:var(--v-r-md);background:var(--v-control);
}
#items > .list-item .quick-measure button{
 width:38px!important;height:38px!important;min-width:38px!important;
 background:transparent!important;border:0!important;box-shadow:none!important;border-radius:var(--v-r-sm)!important;
 transition:transform var(--p-touch) ease-out,background-color .14s ease!important;
}
#items > .list-item .quick-measure button:disabled{opacity:.35}
#items > .list-item .quick-number{min-width:26px;text-align:center;font:650 15px/1 var(--v-ui);font-variant-numeric:tabular-nums}
/* Peso: campo sem moldura própria dentro do grupo, com o sufixo kg */
#items > .list-item .quick-weight{
 width:48px!important;height:38px;border:0!important;background:transparent!important;box-shadow:none!important;
 padding:0 0 0 10px!important;font:600 16px/1 var(--v-ui)!important;font-variant-numeric:tabular-nums;color:var(--ink);
}
#items > .list-item .quick-measure:has(.quick-weight:not([hidden]))::after{
 content:"kg";padding:0 10px 0 2px;font:600 13px/1 var(--v-ui);color:var(--muted);
}
/* Editar e excluir: só ícone; o fundo aparece no toque */
#items > .list-item .item-actions{gap:2px!important}
#items > .list-item .item-actions .item-edit,
#items > .list-item .item-actions .item-remove{
 width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;flex-basis:42px!important;
 background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;color:var(--muted)!important;
 transition:transform var(--p-touch) ease-out,background-color .14s ease,color .14s ease!important;
}
#items > .list-item .item-actions .item-remove svg{stroke:currentColor}
@media(hover:hover) and (pointer:fine){
 #items > .list-item .item-actions .item-edit:hover{background:var(--v-control)!important;color:var(--ink)!important}
 #items > .list-item .item-actions .item-remove:hover{background:var(--v-danger-bg)!important;color:var(--v-danger)!important}
 #items > .list-item .quick-measure button:not(:disabled):hover{background:var(--v-control-hover)!important}
}
#items > .list-item .item-actions .item-edit:active{background:var(--v-control)!important;color:var(--ink)!important;transform:scale(.92)!important}
#items > .list-item .item-actions .item-remove:active{background:var(--v-danger-bg)!important;color:var(--v-danger)!important;transform:scale(.92)!important}
#items > .list-item .quick-measure button:not(:disabled):active{background:var(--v-control-hover)!important;transform:scale(.9)!important}
.item-quick .quick-price{font-size:16px!important}

/* Carregando leitura: só o anel gira; a faixa de brilho que corria pelo card saiu */
#items > .scan-processing::before,#items > .scan-processing:not(.scan-processing-exiting)::before,
#planning-items > #planning-loading::before,.scan-processing::before{animation:none!important;display:none!important}

/* ---------- Estado vazio ---------- */
#items > .empty-list{gap:10px}
#items > .empty-list .empty-mark{animation:p-search-reveal 360ms var(--p-ease) both}
#items > .empty-list strong{color:var(--ink);font:650 16px/1.3 var(--v-ui);letter-spacing:-.015em}
#items > .empty-list .empty-hint{
 margin:0;max-width:260px;text-align:center;color:var(--muted);font:450 13px/1.5 var(--v-ui);
 animation:p-search-reveal 360ms 60ms var(--p-ease) both;
}
#items > .empty-list .empty-actions{display:flex;gap:8px;margin-top:6px;animation:p-search-reveal 360ms 120ms var(--p-ease) both}
#items > .empty-list .empty-actions button{
 display:flex;flex-direction:column;align-items:center;gap:6px;min-width:76px;padding:12px 10px 10px;
 background:var(--v-control);color:var(--ink);border:1px solid var(--v-control-border);border-radius:var(--v-r-md);
 font:600 12px/1.2 var(--v-ui);-webkit-tap-highlight-color:transparent;touch-action:manipulation;
 transition:transform var(--p-touch) ease-out,background-color .14s ease;
}
#items > .empty-list .empty-actions svg{width:20px;height:20px}
#items > .empty-list .empty-actions button:active{transform:scale(.95);background:var(--v-control-hover)}
@media(hover:hover) and (pointer:fine){#items > .empty-list .empty-actions button:hover{background:var(--v-control-hover)}}

/* ---------- Total: número em Onest tabular (Syne só no display grande) ---------- */
#dock-wrap #floating-totals .final-line strong,.floating-totals .final-line strong{
 font-family:var(--v-ui)!important;font-weight:700!important;letter-spacing:-.025em!important;font-variant-numeric:tabular-nums!important;
}
#floating-totals{--finance-accent:var(--muted)}
/* Só o total visível: a altura calculada em financeGeometry reserva 8px por lado (borda incluída);
   com o padding de 12px a linha descia. Aqui ela fica centrada. Com mais linhas nada muda. */
html body #application #dock-wrap #floating-totals:not(.has-budget):not(.show-details-header):not(.show-discount){
 padding-top:7px!important;padding-bottom:7px!important;align-content:center!important;
}
/* Total sozinho: rótulo e valor nas extremidades, centralizados na altura. */
html body #application #dock-wrap #floating-totals:not(.has-budget):not(.show-details-header):not(.show-discount) > .summary-row.final-line{
 display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
}
html body #application #dock-wrap #floating-totals:not(.has-budget):not(.show-details-header):not(.show-discount) > .final-line > :is(span,strong){
 flex:0 0 auto!important;margin:0!important;
}
/* "Mais detalhes": a faixa do cabeçalho ganhou 3px (financeGeometry) e a linha divisória sobe 3px,
   para o primeiro item ficar à mesma distância dela que os itens ficam entre si. */
html body #application:not(.shopping-list-page) #dock-wrap #floating-totals.show-details-header > #summary-details-toggle{
 height:calc(100% - 3px)!important;align-self:start!important;
}

/* Privacidade: texto das opções alinhado ao centro do quadradinho */
.scan-privacy-modal label,.scan-privacy label{align-items:center!important}
.scan-privacy-modal label input[type=checkbox],.scan-privacy input[type=checkbox]{margin:0!important}

/* ---------- Tipografia: títulos de modal e preços em Onest ---------- */
.dock-heading,.dock-heading h2,.dock-content h2,.tier-title,.credits-page-title,.credits-plan-name,
.confirm-card h2,.price-mode-heading h2,.scan-privacy-modal h2,.subs-header h1,.subs-header h2,.subs-card-head h3,
.install-help-panel h2,#rande-account h2,#credits-title{
 font-family:var(--v-ui)!important;font-weight:700!important;letter-spacing:-.025em!important;
}
.credits-plan-name{font-size:14px!important;color:var(--muted)!important;font-weight:600!important;letter-spacing:0!important}
.subs-price,.subs-price strong,.pix-amount,.subs-payment-amount,.price-line b{
 font-family:var(--v-ui)!important;font-weight:700!important;letter-spacing:-.03em!important;font-variant-numeric:tabular-nums
}
#rande-account .account-identity h1{font-family:var(--v-ui)!important;font-weight:700!important;letter-spacing:-.02em!important}
#rande-account .account-avatar-large{font-family:var(--v-ui)!important;font-weight:650!important}

/* ---------- Campos: 16px para o iOS não dar zoom ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:max(16px,1rem)!important}
.scan-privacy input,.scan-privacy-modal label input,input[type=checkbox]{accent-color:var(--ink)!important}
/* Privacidade: checkbox desenhado igual ao das modalidades de preço, sem cor do sistema */
.scan-privacy input[type=checkbox],.scan-privacy-modal label input[type=checkbox]{
 -webkit-appearance:none;appearance:none;display:grid;place-items:center;margin:2px 0 0;
 width:20px!important;height:20px!important;flex:0 0 20px!important;border-radius:var(--v-r-sm);
 border:1.5px solid var(--v-control-border);background:var(--v-field);cursor:pointer;
 transition:background-color 160ms ease,border-color 160ms ease;
}
.scan-privacy input[type=checkbox]::after,.scan-privacy-modal label input[type=checkbox]::after{
 content:"";width:9px;height:5px;margin-top:-2px;border-left:2px solid var(--v-on-primary);border-bottom:2px solid var(--v-on-primary);
 transform:rotate(-45deg) scale(.4);opacity:0;transition:transform 180ms var(--p-ease),opacity 120ms ease;
}
.scan-privacy input[type=checkbox]:checked,.scan-privacy-modal label input[type=checkbox]:checked{background:var(--v-primary);border-color:var(--v-primary)}
.scan-privacy input[type=checkbox]:checked::after,.scan-privacy-modal label input[type=checkbox]:checked::after{transform:rotate(-45deg) scale(1);opacity:1}

/* ---------- Dock: indicador desliza com transform ---------- */
html #dock[data-mode] .dock-indicator{
 left:calc(50% - 25px)!important;
 transform:translate3d(var(--indicator-shift,0px),0,0)!important;
 transition:transform 320ms var(--p-ease),opacity 160ms ease!important;
}
@media(max-width:359px){html #dock[data-mode] .dock-indicator{left:calc(50% - 23px)!important}}
#dock .dock-button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#dock .dock-button:not(:disabled):active svg{transform:scale(.88);transition:transform var(--p-touch) ease-out}
#dock .dock-button svg{transition:transform 180ms var(--p-ease)}

/* ---------- Toque: retorno uniforme em controles ---------- */
.guest-bar button,.outline-btn,.primary-btn,.subs-select,.subs-primary,.subs-secondary,.price-mode-option,
#credits-extra-controls button,#credits-home-back,#subscription-back,#price-mode-close{
 -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.subs-select:not(:disabled):active,#credits-extra-controls button:active,#credits-home-back:active,
#subscription-back:active,#price-mode-close:active,.price-mode-option:not(.is-locked):active{
 transform:scale(.97)!important;transition:transform var(--p-touch) ease-out!important;
}

/* ---------- Planos: cards entram em sequência ---------- */
@keyframes p-card-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
#subscription-overlay .subs-cards > .subs-plan-card{animation:p-card-in 360ms var(--p-ease) both}
#subscription-overlay .subs-cards > .subs-plan-card:nth-child(2){animation-delay:50ms}
#subscription-overlay .subs-cards > .subs-plan-card:nth-child(3){animation-delay:100ms}
#subscription-overlay .subs-cards > .subs-plan-card:nth-child(4){animation-delay:150ms}
#subscription-overlay .subs-cards > .subs-plan-card:nth-child(n+5){animation-delay:200ms}

/* ---------- Créditos: anel entra junto com o número ---------- */
#credits-overlay .credit-ring-center strong,#credits-overlay .credits-plan-info{animation:p-search-reveal 320ms 80ms var(--p-ease) both}

@media(prefers-reduced-motion:reduce){
 .shopping-search-bar .search-spinner{display:none}
 #items > .list-item.search-reveal,#planning-items > .search-reveal,.search-empty,
 #subscription-overlay .subs-cards > .subs-plan-card,#items > .empty-list *{animation:none!important}
}


/* Fade no rodapé: a lista vai escurecendo perto do fim, por baixo do painel financeiro e da barra de ações,
   para os dois se destacarem do conteúdo que rola. Fica entre a lista (camada 0) e o painel (camada 1). */
#application::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(42vh,340px);z-index:0;pointer-events:none;
 background:linear-gradient(to bottom,rgba(16,19,24,0) 0%,rgba(16,19,24,.035) 30%,rgba(16,19,24,.09) 60%,rgba(16,19,24,.16) 100%)}
:root[data-theme="dark"] #application::after{
 background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 35%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.72) 100%)}


/* =====================================================================
   2026-11-01 — ajustes do app (cabeçalho, conta, câmera, listas vazias,
   editor de produto e teclado).
   ===================================================================== */

/* ---------- Marca: o mesmo ícone do app instalado (icon.svg) ---------- */
.scan-brand .brand-mark{
 width:34px;height:34px;overflow:hidden;background:#0B0B0C!important;color:#F5F7FA!important;
 border-radius:var(--v-r-md);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
html[data-theme='dark'] .scan-brand .brand-mark{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.scan-brand .brand-mark svg{width:100%!important;height:100%!important;stroke:none!important;fill:currentColor}

/* ---------- Botões do cabeçalho: todos com a mesma altura ---------- */
#application .scan-header-actions{gap:5px!important}
#application .scan-header-actions>button{
 height:38px!important;min-height:38px!important;max-height:38px!important;box-sizing:border-box!important;
}
#application .scan-header-actions>button:not(#credits-trigger){width:38px!important;min-width:38px!important;flex:0 0 38px!important;padding:0!important}
#application .scan-header-actions>#credits-trigger{padding:0 9px!important;gap:5px!important}
#application .scan-header-actions>button[hidden]{display:none!important}
#application .scan-header-actions>.dev-fixture-trigger{display:grid;place-items:center}
#application .scan-header-actions>.dev-fixture-trigger svg{width:18px;height:18px}
/* Perfil: bolinha */
#application .scan-header-actions>#rande-profile-trigger{border-radius:50%!important;overflow:hidden;display:grid;place-items:center}
#application .scan-header-actions>#rande-profile-trigger img{width:100%;height:100%;border-radius:50%;object-fit:cover}
#application .scan-header-actions>#rande-profile-trigger svg{width:20px!important;height:20px!important}
/* O nome encolhe quando os botões ocupam o espaço; em último caso fica só o ícone + Carrinho/Lista */
#application .scan-header-actions{flex:0 0 auto}
#application .scan-brand{flex:1 1 0;min-width:0;min-height:34px;justify-content:center}
.scan-brand h1{min-width:0;max-width:100%;overflow:hidden;white-space:nowrap}
/* fitBrandTitle() em app.js reduz a fonte do nome ou põe .brand-icon conforme o espaço medido */
.scan-brand.brand-icon h1{font-size:0!important;line-height:0!important;margin:0!important}
@media(max-width:400px){
 #application .scan-header-actions{gap:4px!important}
 #application .scan-header-actions>button{height:36px!important;min-height:36px!important;max-height:36px!important}
 #application .scan-header-actions>button:not(#credits-trigger){width:36px!important;min-width:36px!important;flex-basis:36px!important}
 #application .scan-header-actions>#credits-trigger{padding:0 7px!important;gap:4px!important}
}

/* ---------- Sua conta: tema em linha (Automático · Claro · Escuro) ---------- */
#rande-account .account-theme{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#rande-account .account-theme::before{
 left:4px;right:auto;top:4px;bottom:4px;height:auto;width:calc((100% - 8px) / 3);box-sizing:border-box;
 transition:transform .26s cubic-bezier(.22,.76,.2,1);
}
#rande-account .account-theme[data-selected='light']::before{transform:translateX(100%)}
#rande-account .account-theme[data-selected='dark']::before{transform:translateX(200%)}
#rande-account .account-theme .theme-option{min-height:46px!important;padding:8px 6px!important;gap:7px!important;font:650 13px/1.2 var(--v-ui)!important}
#rande-account .account-theme .theme-option i svg{width:16px!important;height:16px!important}
@media(max-width:350px){
 #rande-account .account-theme .theme-option{flex-direction:column;gap:4px!important;min-height:56px!important;font-size:12px!important}
}

/* ---------- Câmera: desativada só na lista de compras; ativa segue as outras ---------- */
html[data-theme] #application #dock-wrap #dock #camera-button.active:not(:disabled) svg{
 color:var(--v-on-primary)!important;stroke:var(--v-on-primary)!important;opacity:1!important;
}

/* ---------- Listas vazias: sem rolagem fantasma ---------- */
#application:not(.shopping-list-page) .list-scroller:has(#items > .empty-list),
#application.shopping-list-page .list-scroller:has(#planning-items > .planning-empty){
 padding-bottom:0!important;overflow-y:hidden!important;
}

/* ---------- Painéis com formulário: altura natural, rolagem interna se faltar espaço ---------- */
html body #application #dock[data-mode='manual'],
html body #application #dock[data-mode='edit'],
html body #application #dock[data-mode='budget'],
html body #application #dock[data-mode='scan-review']{
 height:var(--rcompras-fit-height,auto)!important;max-height:none!important;
}
html body #application #dock[data-mode='manual'] .dock-content,
html body #application #dock[data-mode='edit'] .dock-content,
html body #application #dock[data-mode='budget'] .dock-content,
html body #application #dock[data-mode='scan-review'] .dock-content{
 flex:1 1 auto;min-height:0;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;
 scrollbar-width:none;
}
#dock .dock-content::-webkit-scrollbar{display:none}
/* O painel sobe junto com o teclado sem atraso */
html.rcompras-keyboard #dock-wrap{transition:none!important}

/* ---------- Editor de produto (editar e corrigir leitura) ---------- */
html body #dock .edit-form{display:flex!important;flex-direction:column!important;gap:10px!important}
html body #dock .edit-form .field-label{
 margin:0 0 -4px!important;font:600 12px/1.3 var(--v-ui)!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important;
}
html body #dock .edit-form .field-input{
 height:46px!important;min-height:46px!important;padding:0 13px!important;border-radius:var(--v-r-md)!important;
 font:500 16px/1 var(--v-ui)!important;
}
html body #dock .edit-form .review-reference,html body #dock .edit-form #edit-base-label{
 display:flex!important;flex-direction:column;gap:8px;margin:0!important;
}
html body #dock .edit-form .review-reference[hidden],html body #dock .edit-form #edit-base-label[hidden],
html body #dock .edit-form [hidden]{display:none!important}
html body #dock .edit-form .primary-btn{min-height:48px!important;height:48px!important;margin:2px 0 0!important}
html body #dock .edit-form .minimal-note{margin:-2px 0 -2px!important;font:500 13px/1.4 var(--v-ui)!important;text-align:center}
html body #dock .edit-form .edit-secondary{margin:0!important}

/* Seletor de duas opções com cursor deslizante */
.seg-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.seg-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.seg-label{font:600 12px/1.3 var(--v-ui);color:var(--muted)}
.seg{
 --seg-thumb:var(--ink);
 position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
 padding:3px;height:38px;box-sizing:border-box;
 background:var(--v-control);border:1px solid var(--v-control-border);border-radius:var(--v-r-lg);
}
/* Cursor invertido: preto com texto branco no claro, branco com texto preto no escuro. */
.seg::before{
 content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 2);box-sizing:border-box;
 background:var(--seg-thumb);border:0;border-radius:var(--v-r-md);
 box-shadow:0 1px 3px rgba(0,0,0,.14);
 transform:translateX(calc(var(--seg-i,0) * 100%));
 transition:transform .3s cubic-bezier(.22,.76,.2,1);pointer-events:none;
}
.seg[data-index='1']{--seg-i:1}
.seg>button{
 position:relative;z-index:1;display:grid;place-items:center;min-width:0;height:100%;padding:0 6px;margin:0;
 background:transparent!important;border:0!important;box-shadow:none!important;border-radius:var(--v-r-md);
 font:650 14px/1 var(--v-ui);color:var(--muted);cursor:pointer;
 -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color .2s ease;
}
.seg>button[aria-checked='true']{color:var(--surface)}
/* Quantidade da tela manual: mesmo seletor, à direita do rótulo. */
.measure-row .seg{width:168px;flex:none}
.seg>button:focus-visible{outline:2px solid var(--focus)!important;outline-offset:-3px!important}

/* Quantidade: número grande com − e + */
.amount-field{display:flex;flex-direction:column;gap:6px}
.amount-stepper{
 display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;height:58px;padding:4px;box-sizing:border-box;
 background:var(--v-control);border:1px solid var(--v-control-border);border-radius:var(--v-r-lg);
}
.amount-stepper:focus-within{border-color:var(--v-field-focus);box-shadow:0 0 0 3px var(--v-field-ring)}
.amount-step{
 width:48px;height:48px;display:grid;place-items:center;padding:0;margin:0;
 background:transparent!important;border:0!important;box-shadow:none!important;border-radius:var(--v-r-md);color:var(--ink);
 cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
 transition:background-color .14s ease,transform var(--p-touch) ease-out,opacity .14s ease;
}
.amount-step svg{width:20px;height:20px}
.amount-step:not(:disabled):active{background:var(--v-control-hover)!important;transform:scale(.92)}
@media(hover:hover) and (pointer:fine){.amount-step:not(:disabled):hover{background:var(--v-control-hover)!important}}
.amount-step:disabled{opacity:.3;cursor:default}
.amount-value{display:flex;align-items:baseline;justify-content:center;gap:5px;min-width:0;height:100%;cursor:text}
html body #dock .amount-value input{
 field-sizing:content;width:4.5ch;min-width:1.5ch;max-width:100%;height:100%;padding:0!important;margin:0;
 background:transparent!important;border:0!important;outline:none!important;box-shadow:none!important;
 font:650 26px/1 var(--v-ui)!important;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:center;color:var(--ink);
}
.amount-unit{font:600 14px/1 var(--v-ui);color:var(--muted);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.seg::before,.seg>button{transition:none}}

/* Formulário manual: com o teclado aberto mantém os tamanhos normais (as regras antigas por
   altura de tela compactavam tudo quando o WebView encolhe); o painel rola por dentro. */
html.rcompras-keyboard body #dock[data-mode='manual'] .dock-content{padding:14px 16px 8px!important}
html.rcompras-keyboard body #dock[data-mode='manual'] .dock-heading{min-height:40px!important;margin-bottom:6px!important}
html.rcompras-keyboard body #dock[data-mode='manual'] .dock-form{gap:8px!important}
html.rcompras-keyboard body #dock[data-mode='manual'] .field-label{font-size:12px!important;margin:0!important}
html.rcompras-keyboard body #dock[data-mode='manual'] .field-input{height:42px!important;min-height:42px!important;padding:0 11px!important}
html.rcompras-keyboard body #dock[data-mode='manual'] .measure-toggle{padding:3px!important}
html.rcompras-keyboard body #dock[data-mode='manual'] .measure-toggle button{min-height:32px!important}
html.rcompras-keyboard body #dock[data-mode='manual'] .qty-block{min-height:52px!important}
html.rcompras-keyboard body #dock[data-mode='manual'] .qty-stepper button{width:46px!important;height:42px!important;min-height:42px!important}
html.rcompras-keyboard body #dock[data-mode='manual'] .wholesale-settings{padding:8px 11px!important}
html.rcompras-keyboard body #dock[data-mode='manual'] .primary-btn{min-height:44px!important}
html.rcompras-keyboard body #dock[data-mode='manual'] #manual-total{font-size:13px!important}