/* rCompras — Rande Vertice RDS 2.2 (DEV, 2026-10-30).
   Camada final de apresentação alinhada ao Rande ID (login, cadastro e conta).
   Substitui tokens, tipografia, materiais e estados; não altera dados, APIs nem fluxos. */

/* ---------- Tokens ---------- */
:root{
 --v-ui:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
 --v-display:'Syne','Onest',system-ui,sans-serif;
 --v-mono:'Azeret Mono',ui-monospace,Consolas,monospace;
 --v-curve:cubic-bezier(.22,.72,.25,1);
 --v-ease-enter:cubic-bezier(.16,1,.3,1);
 --v-dur-touch:110ms;--v-dur-fast:160ms;--v-dur-control:210ms;
 --v-r-xs:4px;--v-r-sm:6px;--v-r-md:8px;--v-r-lg:10px;

 /* Soft Light Surface (tema claro) */
 color-scheme:light;
 --bg:#F2F3F5;--surface:#FFFFFF;--ink:#121418;--muted:#56606C;
 --line:#D9DEE4;--soft:#ECEEF1;--dark:#101113;--focus:#121418;
 --shadow:0 1px 2px rgba(18,20,24,.06),0 10px 28px rgba(18,20,24,.09);
 --v-raised:#F7F8FA;--v-control:#EDF1F5;--v-control-hover:#E0E6EC;--v-control-border:#C5CFD9;
 --v-field:#FFFFFF;--v-field-border:#C5CFD9;--v-field-focus:#56606C;--v-field-ring:rgba(18,20,24,.08);
 --v-primary:#182330;--v-primary-hover:#22303F;--v-on-primary:#FFFFFF;--v-primary-edge:#182330;
 --v-primary-shine:inset 0 1px rgba(255,255,255,.12);
 --v-card:#FFFFFF;--v-card-shine:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(18,20,24,.05);
 --v-glass:linear-gradient(148deg,rgba(255,255,255,.86),rgba(246,248,250,.78) 46%,rgba(236,239,243,.84));
 --v-glass-edge:rgba(255,255,255,.9);--v-glass-ring:rgba(18,20,24,.1);
 --v-danger:#A92936;--v-danger-bg:#FFF0F2;--v-danger-border:#D1A0AA;
 --v-success:#1C7A4E;--v-warn:#8A5A0B;
}
html[data-theme='dark']{
 color-scheme:dark;
 --bg:#0B0B0C;--surface:#151618;--ink:#F5F7FA;--muted:#B8C2CE;
 --line:#30343A;--soft:#1D1F23;--dark:#030711;--focus:#F5F7FA;
 --shadow:0 8px 24px rgba(0,0,0,.34);
 --v-raised:#1D1F23;--v-control:#22272D;--v-control-hover:#2C333B;--v-control-border:#414852;
 --v-field:#191C21;--v-field-border:#373D45;--v-field-focus:#8D96A1;--v-field-ring:rgba(245,247,250,.08);
 --v-primary:#F5F7FA;--v-primary-hover:#FFFFFF;--v-on-primary:#0B0B0C;--v-primary-edge:#FFFFFF;
 --v-primary-shine:inset 0 1px rgba(255,255,255,.55),0 2px 7px rgba(0,0,0,.16);
 --v-card:linear-gradient(180deg,#1A1C1F 0%,#151618 100%);
 --v-card-shine:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.4);
 --v-glass:linear-gradient(148deg,rgba(55,60,66,.62),rgba(19,23,29,.9) 46%,rgba(29,33,40,.92));
 --v-glass-edge:rgba(255,255,255,.14);--v-glass-ring:rgba(0,0,0,.5);
 --v-danger:#F1787F;--v-danger-bg:#352328;--v-danger-border:#86515B;
 --v-success:#44C89A;--v-warn:#F1B75E;
}
html{scrollbar-color:var(--line) var(--bg)}
html,body{background:var(--bg)}
body{font-family:var(--v-ui);letter-spacing:-.012em;color:var(--ink)}
body,button,input,select,textarea{font-family:var(--v-ui)}
input::placeholder,textarea::placeholder{color:#8693A1}
::selection{background:#3A4049;color:#fff}
svg{stroke-linejoin:round;stroke-linecap:round}
:focus-visible,button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus)!important;outline-offset:3px!important}

/* ---------- Cabeçalho (padrão topline do Rande ID) ---------- */
.scan-header{background:var(--bg)!important;border-bottom:1px solid var(--line)!important}
.scan-header h1,.scan-brand h1{font-family:var(--v-display)!important;font-weight:650!important;letter-spacing:-.065em!important;color:var(--ink)}
.list-subtitle{font:600 11px/1.4 var(--v-ui)!important;letter-spacing:.04em;color:var(--muted)!important}
.scan-header-actions .clear-list-button,
.scan-header-actions .credits-trigger,
.scan-header-actions>button:not(.account-avatar){
 background:var(--v-control)!important;border:1px solid var(--v-control-border)!important;color:var(--ink)!important;
 border-radius:var(--v-r-md)!important;box-shadow:none!important;
}
@media(hover:hover) and (pointer:fine){.scan-header-actions .clear-list-button:not(:disabled):hover,
.scan-header-actions .credits-trigger:hover{background:var(--v-control-hover)!important}}
.scan-header-actions .clear-list-button:disabled{opacity:.42}
.credits-trigger #credits-counter{font:600 12px/1 var(--v-mono)!important;letter-spacing:-.02em}

/* ---------- Superfícies de conteúdo (Solid) ---------- */
.list-item,.budget-card,.planning-card,.guest-bar,.subs-plan-card,.subs-cards>*,.credits-details,
#rande-account .account-section,#rande-account .account-option{
 border-radius:var(--v-r-lg)!important;
}
.list-item,.planning-card,.budget-card{
 background:var(--v-card)!important;border:1px solid var(--line)!important;box-shadow:var(--v-card-shine)!important;
}
.guest-bar{
 background:var(--v-raised)!important;border:1px solid var(--line)!important;color:var(--ink)!important;
 font:550 12px/1.45 var(--v-ui)!important;box-shadow:var(--v-card-shine);
}
.guest-bar button{
 background:var(--v-primary)!important;color:var(--v-on-primary)!important;border:1px solid var(--v-primary-edge)!important;
 border-radius:var(--v-r-md)!important;font:650 12px/1.3 var(--v-ui)!important;min-height:38px;padding:9px 13px!important;
 box-shadow:var(--v-primary-shine);
}
.item-name{font-weight:650!important;letter-spacing:-.02em}
.item-sub{color:var(--muted)!important}
.item-value,.qty-number,#manual-total,.item-draft-price{font-family:var(--v-ui);font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.item-check{background:var(--v-control)!important;border-color:var(--v-control-border)!important;border-radius:var(--v-r-md)!important}
.item-done .item-check{background:var(--v-primary)!important;color:var(--v-on-primary)!important;border-color:var(--v-primary-edge)!important}
.qty-stepper button,.item-edit,.item-remove,.quick-minus,.quick-plus,.mini-close,.upload-button{
 background:var(--v-control)!important;border:1px solid var(--v-control-border)!important;color:var(--ink)!important;border-radius:var(--v-r-md)!important;
}
.item-remove,.delete-button{color:var(--v-danger)!important}
.empty-mark{background:var(--v-raised)!important;border:1px solid var(--line)!important;border-radius:var(--v-r-lg)!important;box-shadow:var(--v-card-shine)!important;color:var(--ink)}
.empty-list{color:var(--muted)!important;font-weight:550}

/* ---------- Totais flutuantes ---------- */
#dock-wrap #floating-totals,.floating-totals{
 background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--v-r-lg)!important;
 box-shadow:var(--shadow),var(--v-card-shine)!important;color:var(--ink)!important;
}
.floating-totals strong{font-variant-numeric:tabular-nums}
.floating-totals .final-line strong,#floating-totals .final-line strong{font-family:var(--v-display)!important;font-weight:650!important;letter-spacing:-.04em!important}
.total-caption,.summary-row span,.summary-details-toggle{color:var(--muted)!important}
.summary-details-toggle{font:650 11px/1.4 var(--v-ui)!important;letter-spacing:.04em}

/* ---------- Dock (Glass para controles flutuantes) ---------- */
#dock-wrap #dock,.dock{
 border-radius:var(--v-r-lg)!important;border:1px solid var(--v-glass-edge)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px var(--v-glass-ring),0 12px 32px rgba(0,0,0,.18)!important;
}
#dock[data-mode='closed']{
 background:var(--v-glass)!important;
 -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);
}
#dock:not([data-mode='closed']){background:var(--surface)!important;border-color:var(--line)!important}
#dock[data-mode='closed'] .dock-buttons{background:transparent!important}
#dock .dock-buttons{background:var(--surface)}
#dock .dock-button{color:var(--ink);border-radius:var(--v-r-md)!important}
#dock .dock-indicator{border-radius:var(--v-r-md)!important}
html[data-theme='light'] #dock .dock-indicator{background:var(--v-primary)!important;border-color:var(--v-primary)!important}
html[data-theme='dark'] #dock .dock-indicator{background:var(--v-primary)!important;border-color:var(--v-primary-edge)!important;box-shadow:inset 0 1px rgba(255,255,255,.55)}
html[data-theme='dark'] #dock .dock-button.active{color:var(--v-on-primary)!important}
html[data-theme='dark'] #dock .dock-button.active svg{stroke:var(--v-on-primary)!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#dock[data-mode='closed']{background:var(--surface)!important}}
@media (prefers-reduced-transparency:reduce){#dock[data-mode='closed']{background:var(--surface)!important;backdrop-filter:none;-webkit-backdrop-filter:none}}

.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 h1,#rande-account h2{
 font-family:var(--v-display)!important;font-weight:650!important;letter-spacing:-.055em!important;color:var(--ink);text-wrap:balance;
}

/* ---------- Formulários (contrato do Rande ID) ---------- */
.field-label,.subs-field-label,.pix-entry-label,.qty-label,.quick-price-label,.account-section-label,.subs-eyebrow{
 font:650 11px/1.4 var(--v-ui)!important;letter-spacing:.055em!important;color:var(--muted)!important;
}
.field-input,.planning-edit-input,.measure-weight-input,.quick-price,
.dock-content :is(input:not([type='checkbox']):not([type='radio']):not([type='range']),select,textarea){
 background:var(--v-field)!important;border:1px solid var(--v-field-border)!important;color:var(--ink)!important;
 border-radius:var(--v-r-md)!important;font-family:var(--v-ui);letter-spacing:0;
 transition:border-color var(--v-dur-fast) var(--v-curve),box-shadow var(--v-dur-fast) var(--v-curve),background-color var(--v-dur-fast) var(--v-curve);
}
.field-input:focus,.field-input:focus-visible,
html[data-theme='light'] .field-input:focus,html[data-theme='dark'] .field-input:focus,
html[data-theme='light'] .field-input:focus-visible,html[data-theme='dark'] .field-input:focus-visible,
.dock[data-mode='manual'] .field-input:focus,.dock[data-mode='edit'] .field-input:focus-visible,
.dock-content :is(input,select,textarea):focus{
 border-color:var(--v-field-focus)!important;border-bottom-color:var(--v-field-focus)!important;
 outline:none!important;box-shadow:0 0 0 3px var(--v-field-ring)!important;
}
select{color-scheme:inherit}

/* ---------- Botões ---------- */
.primary-btn,.subs-primary,.confirm-accept,.dialog-close,.connection-retry,.voice-retry{
 background:var(--v-primary)!important;color:var(--v-on-primary)!important;border:1px solid var(--v-primary-edge)!important;
 border-radius:var(--v-r-md)!important;font:650 13px/1.3 var(--v-ui)!important;letter-spacing:0!important;
 box-shadow:var(--v-primary-shine)!important;
}
.primary-btn svg,.subs-primary svg{stroke:currentColor}
@media(hover:hover) and (pointer:fine){.primary-btn:hover:not(:disabled),.subs-primary:hover:not(:disabled),.confirm-accept:hover{background:var(--v-primary-hover)!important}}
.outline-btn,.subs-secondary,.confirm-cancel,.subs-cancel-back,.subs-copy-pix,.scan-error-close,.island-dismiss{
 background:var(--v-control)!important;color:var(--ink)!important;border:1px solid var(--v-control-border)!important;
 border-radius:var(--v-r-md)!important;font:650 13px/1.3 var(--v-ui)!important;box-shadow:none!important;
}
@media(hover:hover) and (pointer:fine){.outline-btn:hover:not(:disabled),.subs-secondary:hover:not(:disabled),.confirm-cancel:hover{background:var(--v-control-hover)!important}}
.budget-dock-form .outline-btn{background:transparent!important;border-color:transparent!important;color:var(--muted)!important}
.primary-btn:disabled,.subs-primary:disabled{opacity:.46!important}
/* Ações destrutivas: apenas o texto em vermelho, sem borda, fundo ou sombra. */
.delete-button,.scan-privacy-erase,.subs-cancel-confirm,.account-signout{
 background:transparent!important;color:var(--v-danger)!important;border:0!important;box-shadow:none!important;
 font:650 13px/1.3 var(--v-ui)!important;
}
.edit-secondary{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
/* Retorno tátil uniforme: pressionar .985, 110ms */
.primary-btn:active,.outline-btn:active,.item-edit:active,.subs-primary:active,.subs-secondary:active,
.clear-list-button:not(:disabled):active,.mini-close:active,.upload-button:active,.guest-bar button:active,
.confirm-accept:active,.confirm-cancel:active{transform:scale(.985)!important;transition-duration:var(--v-dur-touch)!important}

/* ---------- Diálogos, sheets e toast ---------- */
.confirm-card,.price-mode-dialog,.credits-dialog,.scan-privacy-modal,.install-help-panel,.subs-shell{
 background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important;
 border-radius:var(--v-r-lg)!important;box-shadow:0 26px 80px rgba(0,0,0,.28),var(--v-card-shine)!important;
}
.confirm-card p,.price-mode-dialog p,.scan-privacy-modal p,.credits-subpage-help,.subs-lead,.minimal-note{color:var(--muted)!important}
.confirm-icon,.install-help-icon{background:var(--v-raised)!important;border:1px solid var(--line)!important;border-radius:var(--v-r-lg)!important}
.confirm-scrim,.credits-overlay,.price-mode-overlay,.scan-privacy-overlay,.install-help-overlay{background:rgba(3,7,17,.58)!important}
.confirm-card{animation-duration:250ms!important;animation-timing-function:var(--v-ease-enter)!important}
.price-mode-option,.subs-chip{border-radius:var(--v-r-md)!important;border-color:var(--line)!important;background:var(--v-raised)!important;color:var(--ink)!important}
.toast{
 background:#25272B!important;color:#F5F7FA!important;border:1px solid #50535A!important;border-radius:var(--v-r-md)!important;
 box-shadow:0 8px 24px rgba(0,0,0,.27)!important;font:600 13px/1.4 var(--v-ui)!important;
}
.subs-price,.pix-amount,.subs-payment-amount,.price-line b{font-family:var(--v-display)!important;font-weight:650!important;letter-spacing:-.05em!important}
.subs-plan-status,.subs-chip,.account-sub-status{font:650 11px/1.3 var(--v-ui)!important;letter-spacing:.03em}
.scan-inline-error,.subs-error{color:var(--v-danger)!important}

/* ---------- Movimento ---------- */
.list-item{animation-duration:170ms!important;animation-timing-function:var(--v-ease-enter)!important}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* ---------- Modalidades de preço: seleção múltipla ---------- */
.price-mode-option{transition:border-color var(--v-dur-fast) var(--v-curve),background-color var(--v-dur-fast) var(--v-curve),box-shadow var(--v-dur-fast) var(--v-curve)!important}
.price-mode-option small{display:block;margin-top:2px;font:550 11px/1.3 var(--v-ui);color:var(--muted)}
.price-mode-option.is-locked{cursor:default}
.price-mode-option.is-locked .price-mode-selection{opacity:.55}
.price-mode-dialog .price-mode-selection{
 width:22px;height:22px;flex:0 0 22px;border-radius:var(--v-r-sm);
 border:1.5px solid var(--v-control-border);background:var(--v-field);
 transition:background-color var(--v-dur-fast) var(--v-curve),border-color var(--v-dur-fast) var(--v-curve);
}
.price-mode-dialog .price-mode-selection svg{
 width:16px!important;height:16px!important;fill:none!important;stroke:var(--v-on-primary)!important;stroke-width:2.6!important;
 stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset 220ms var(--v-ease-enter) 40ms;
}
.price-mode-option.is-selected .price-mode-selection{background:var(--v-primary);border-color:var(--v-primary)}
.price-mode-option.is-selected .price-mode-selection svg{stroke-dashoffset:0}
.price-mode-done{margin-top:2px;min-height:46px!important;flex:0 0 auto}
@media(prefers-reduced-motion:reduce){.price-mode-dialog .price-mode-selection svg{transition:none}}
/* ---------- Sua conta: réplica da lista do Rande ID (gerenciamento de conta, mobile) ---------- */
#rande-account{
 --rid-bg:#F3F6FA;--rid-text:#182330;--rid-icon:#4A5B6C;--rid-muted:#66788A;--rid-desc:#7D8B99;
 --rid-line:rgba(55,74,92,.15);--rid-danger:#A92936;
 --rid-track:#EAF0F5;--rid-track-line:#D5DEE7;
 --rid-thumb:linear-gradient(140deg,rgba(255,255,255,.93),rgba(226,232,239,.88));
 --account-bg:var(--rid-bg);--account-surface:var(--rid-bg);--account-text:var(--rid-text);
 --account-muted:var(--rid-muted);--account-border:var(--rid-line);--account-soft:var(--rid-track);
 font-family:var(--v-ui)!important;letter-spacing:-.01em;
}
html[data-theme='dark'] #rande-account{
 --rid-bg:#0B0B0C;--rid-text:#F5F7FA;--rid-icon:#B8C2CE;--rid-muted:#929CA8;--rid-desc:#A4AFBC;
 --rid-line:rgba(170,184,201,.15);--rid-danger:#F1787F;
 --rid-track:#1D1F23;--rid-track-line:#30343A;
 --rid-thumb:linear-gradient(145deg,rgba(74,82,94,.42),rgba(31,35,41,.83));
}
#rande-account .account-shell{background:var(--rid-bg)!important;color:var(--rid-text)}
#rande-account .account-bar{background:var(--rid-bg)!important;border-bottom:0!important;grid-template-columns:44px 1fr auto!important;gap:10px;padding-left:12px!important;padding-right:16px!important}
#rande-account .account-back{background:transparent!important;border:0!important;color:var(--rid-text)!important;border-radius:var(--v-r-sm)!important}
#rande-account .account-bar strong{font:650 14px/1.3 var(--v-ui)!important;letter-spacing:-.01em}
#rande-account .account-bar .account-brand{font:650 15px/1 var(--v-display)!important;letter-spacing:-.065em!important;color:var(--rid-text)!important;text-transform:none}
#rande-account .account-scroll{padding:8px 17px calc(34px + env(safe-area-inset-bottom))!important}

/* Identidade em linha, como no Rande ID */
#rande-account .account-identity{
 display:grid!important;grid-template-columns:64px minmax(0,1fr);column-gap:14px;align-items:center;text-align:left!important;
 padding:14px 0 22px!important;margin-bottom:4px;border-bottom:1px solid var(--rid-line);
}
#rande-account .account-avatar-wrap{grid-row:1 / span 2;width:64px!important;height:64px!important;margin:0!important}
#rande-account .account-avatar-large{width:64px!important;height:64px!important;font:650 24px/1 var(--v-display)!important;background:var(--rid-track)!important;border-color:var(--rid-track-line)!important;color:var(--rid-text)!important}
#rande-account .account-avatar-edit{width:26px!important;height:26px!important;right:-4px!important;bottom:-2px!important;background:var(--rid-track)!important;border-color:var(--rid-track-line)!important;box-shadow:0 0 0 3px var(--rid-bg)!important}
#rande-account .account-identity h1{align-self:end;margin:0 0 3px!important;font:650 19px/1.2 var(--v-display)!important;letter-spacing:-.055em!important;color:var(--rid-text)!important;overflow-wrap:anywhere}
#rande-account .account-identity p{align-self:start;margin:0!important;font:500 12px/1.4 var(--v-ui)!important;color:var(--rid-desc)!important}

/* Lista de opções */
#rande-account .account-menu-panel{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
#rande-account .account-section-label{
 display:block;margin:0!important;padding:19px 0 7px!important;background:none!important;animation:none!important;
 font:600 10px/14px var(--v-mono)!important;letter-spacing:.09em!important;color:var(--rid-muted)!important;text-transform:uppercase;
}
#rande-account .account-section-label~.account-section-label,
#rande-account #account-connected .account-section-label{padding-top:26px!important;margin-top:0!important}
#rande-account .account-option{
 display:grid!important;grid-template-columns:22px minmax(0,1fr) 19px!important;gap:14px!important;align-items:center;
 width:100%;min-height:56px!important;margin:0!important;padding:12px 3px!important;
 background:transparent!important;border:0!important;border-bottom:1px solid var(--rid-line)!important;border-radius:0!important;
 box-shadow:none!important;color:var(--rid-text)!important;text-align:left;transform:none!important;
 transition:opacity .14s!important;animation:none!important;
}
#rande-account .account-option:hover,#rande-account .account-option:active{background:transparent!important}
#rande-account .account-option:active{opacity:.6}
#rande-account .account-option>i:first-child{color:var(--rid-icon)!important;width:22px;justify-content:flex-start!important}
#rande-account .account-option>i:first-child svg{width:18px!important;height:18px!important}
#rande-account .account-option>i:last-child{color:var(--rid-muted)!important;width:19px}
#rande-account .account-option>i:last-child svg{width:16px!important;height:16px!important}
#rande-account .account-option>span{display:flex!important;flex-direction:column;gap:2px;min-width:0;font:600 13px/18.2px var(--v-ui)!important;letter-spacing:-.01em;color:inherit!important}
#rande-account .account-desc{display:block;font:400 11px/16.5px var(--v-ui);color:var(--rid-desc)}

/* Sair: só o texto em vermelho, sem borda, fundo ou caixa */
#rande-account .account-option.account-signout,
#rande-account #account-connected .account-option.account-signout{
 color:var(--rid-danger)!important;border-top:0!important;border-color:var(--rid-line)!important;background:transparent!important;
}
#rande-account .account-option.account-signout i{color:var(--rid-danger)!important}

/* Tema: trilho quase da cor do fundo com cursor deslizante (igual ao Rande ID) */
#rande-account .account-theme-block{padding:16px 0 4px;border-bottom:1px solid var(--rid-line)}
#rande-account .account-theme-title{display:flex;align-items:center;gap:14px;padding:0 3px 12px;font:600 13px/1.3 var(--v-ui);color:var(--rid-text)}
#rande-account .account-theme-title i{color:var(--rid-icon)!important;width:22px;justify-content:flex-start!important}
#rande-account .account-theme-title i svg{width:18px!important;height:18px!important}
#rande-account .account-theme{
 position:relative;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;
 margin:0!important;padding:4px!important;min-inline-size:0;animation:none!important;
 background:var(--rid-track)!important;border:1px solid var(--rid-track-line)!important;border-radius:10px!important;
}
#rande-account .account-theme::before{
 content:"";position:absolute;left:4px;right:4px;top:4px;height:calc((100% - 8px) / 3);
 background:var(--rid-thumb);border:1px solid var(--rid-track-line);border-radius:8px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 7px rgba(0,0,0,.09);
 transition:transform .19s cubic-bezier(.22,.76,.2,1);pointer-events:none;
}
#rande-account .account-theme[data-selected='light']::before{transform:translateY(100%)}
#rande-account .account-theme[data-selected='dark']::before{transform:translateY(200%)}
#rande-account .account-theme .theme-option{
 position:relative;z-index:1;display:flex!important;align-items:center;justify-content:center;gap:10px!important;
 min-height:60px!important;margin:0!important;padding:10px!important;cursor:pointer;
 background:transparent!important;border:0!important;border-radius:7px!important;box-shadow:none!important;
 font:650 14px/1.3 var(--v-ui)!important;color:var(--rid-icon)!important;white-space:nowrap;
}
#rande-account .account-theme .theme-option:has(input:checked){color:var(--rid-text)!important;background:transparent!important;box-shadow:none!important}
#rande-account .account-theme .theme-option i{color:inherit!important}
#rande-account .account-theme .theme-option i svg{width:18px!important;height:18px!important}
#rande-account .account-theme .theme-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
#rande-account .account-theme .theme-option:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}
#rande-account .account-theme-hint{margin:0!important;padding:9px 0 12px!important;text-align:center;font:400 11px/1.5 var(--v-ui)!important;color:var(--rid-desc)!important}
@media(prefers-reduced-motion:reduce){#rande-account .account-theme::before{transition:none}}

/* ---------- Modalidades de preço: lista simples (sem hover preso no toque) ---------- */
html #price-mode-overlay .price-mode-options{gap:0!important}
html #price-mode-overlay .price-mode-option.price-mode-option{
 min-height:54px!important;padding:12px 2px!important;margin:0!important;
 background:transparent!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;
 box-shadow:none!important;outline:none;color:var(--ink)!important;transform:none!important;
 transition:opacity .14s!important;-webkit-tap-highlight-color:transparent;
}
html #price-mode-overlay .price-mode-option.price-mode-option:last-child{border-bottom:0!important}
html #price-mode-overlay .price-mode-option.price-mode-option:is(:hover,:active,:focus,[aria-pressed='true'],[aria-checked='true'],.is-selected){
 background:transparent!important;border-color:var(--line)!important;box-shadow:none!important;color:var(--ink)!important;
}
html #price-mode-overlay .price-mode-option.price-mode-option:active{opacity:.6}
html #price-mode-overlay .price-mode-option.price-mode-option:focus-visible{outline:2px solid var(--focus)!important;outline-offset:-2px}
@media(hover:hover) and (pointer:fine){
 html #price-mode-overlay .price-mode-option.price-mode-option:not(.is-locked):hover{opacity:.78}
}
html #price-mode-overlay .price-mode-option strong{font:600 14px/1.3 var(--v-ui)!important;letter-spacing:-.01em}
html #price-mode-overlay .price-mode-option.is-locked strong{color:var(--muted)}
html #price-mode-overlay .price-mode-dialog{gap:10px!important}

/* ---------- Carregamento padrão Rande ID: anel central simples, quase sem texto ---------- */
:root{--v-spin-track:#D5DEE7;--v-spin-head:#182330}
html[data-theme='dark']{--v-spin-track:#30343A;--v-spin-head:#F5F7FA}
@keyframes v-spin{to{transform:rotate(360deg)}}
.auth-spinner,.scan-pending-orb{
 width:16px!important;height:16px!important;flex:0 0 16px!important;border-radius:50%!important;
 border:2px solid var(--v-spin-track)!important;border-top-color:var(--v-spin-head)!important;
 background:transparent!important;box-shadow:none!important;animation:v-spin .8s linear infinite!important;
}
.scan-pending-orb span{display:none!important}
.auth-screen{gap:10px!important;background:var(--bg)!important}
.auth-screen p,#subscription-overlay .subs-connect p{font:400 11px/1.4 var(--v-ui)!important;letter-spacing:.012em;color:var(--muted)!important;margin:0!important}
/* Planos carregando: ocupa toda a área da tela, sem cartão nem fundo próprio */
#subscription-overlay #subscription-content:has(> .subs-connect){display:flex!important;flex-direction:column;padding:0!important}
#subscription-overlay .subs-connect{
 flex:1 1 auto!important;min-height:100%!important;width:100%;display:flex!important;flex-direction:column;
 align-items:center;justify-content:center;gap:10px!important;
 background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;color:var(--muted)!important;
}
#subscription-overlay .subs-connect .auth-spinner{width:16px!important;height:16px!important}
@media(prefers-reduced-motion:reduce){.auth-spinner,.scan-pending-orb{animation-duration:1.6s!important}}

/* ---------- Planos: neutros; a cor do plano é só um accent discreto ---------- */
/* --plan é uma versão dessaturada da cor de cada plano: aparece no ponto ao lado do nome
   e num degradê muito leve no topo do card. Texto, bordas e botões ficam neutros. */
#subscription-overlay .subs-plan-card{
 --plan:#8A949F;
 position:relative;border:1px solid var(--line)!important;box-shadow:var(--v-card-shine)!important;
 background:linear-gradient(180deg,color-mix(in srgb,var(--plan) 12%,var(--surface)) 0,var(--surface) 62%)!important;
}
#subscription-overlay .subs-plan-card[data-tier='p']{--plan:#5F9A80}
#subscription-overlay .subs-plan-card[data-tier='m']{--plan:#6683A6}
#subscription-overlay .subs-plan-card[data-tier='g']{--plan:#AD8E58}
html[data-theme='dark'] #subscription-overlay .subs-plan-card{--plan:#5A626C}
html[data-theme='dark'] #subscription-overlay .subs-plan-card[data-tier='p']{--plan:#4E8A70}
html[data-theme='dark'] #subscription-overlay .subs-plan-card[data-tier='m']{--plan:#55739A}
html[data-theme='dark'] #subscription-overlay .subs-plan-card[data-tier='g']{--plan:#9A7C47}
html[data-theme='dark'] #subscription-overlay .subs-plan-card{
 background:linear-gradient(180deg,color-mix(in srgb,var(--plan) 13%,#151618) 0,#151618 60%)!important;
}
#subscription-overlay .subs-plan-card h3,#subscription-overlay .subs-plan-card .subs-price strong{color:var(--ink)!important}
#subscription-overlay .subs-plan-card h3{display:flex;align-items:center;gap:8px}
#subscription-overlay .subs-plan-card h3::before{
 content:"";width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--plan);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--plan) 18%,transparent);
}
#subscription-overlay .subs-plan-card .subs-chip{background:var(--v-raised)!important;border:1px solid var(--line)!important;color:var(--ink)!important}
#subscription-overlay .subs-plan-card .subs-select{
 background:var(--v-control)!important;color:var(--ink)!important;border:1px solid var(--v-control-border)!important;
 border-radius:var(--v-r-md)!important;font:650 14px/1.3 var(--v-ui)!important;box-shadow:none!important;
}
#subscription-overlay .subs-plan-card.is-popular .subs-select:not(:disabled):not(.is-cancel){
 background:var(--v-primary)!important;color:var(--v-on-primary)!important;border-color:var(--v-primary-edge)!important;box-shadow:var(--v-primary-shine)!important;
}
#subscription-overlay .subs-plan-card .subs-select:disabled{
 background:transparent!important;color:var(--muted)!important;border:1px dashed var(--line)!important;box-shadow:none!important;opacity:1!important;
}
#subscription-overlay .subs-plan-card .subs-select.is-cancel{background:transparent!important;border:0!important;color:var(--v-danger)!important;box-shadow:none!important}
/* Todos os cards com o mesmo tamanho; linhas alinhadas entre cards e rodapé ancorado na base. */
#subscription-overlay .subs-cards{padding-top:10px;align-items:stretch}
#subscription-overlay .subs-plan-card{gap:12px!important}
#subscription-overlay .subs-plan-card h3{line-height:1.1!important}
#subscription-overlay .subs-priority{display:block;margin-top:4px;line-height:1.3}
#subscription-overlay .subs-allowance{gap:4px!important;line-height:1.4!important}
#subscription-overlay .subs-card-foot{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;margin-top:auto}
@supports(grid-template-rows:subgrid){
 #subscription-overlay .subs-plan-card{display:grid!important;grid-row:span 4;grid-template-rows:subgrid;align-content:stretch}
}
#subscription-overlay .subs-cards-note{margin:22px 2px 0!important}
/* Recomendado: mesmo tamanho dos outros; destaque só pela borda em tinta e pelo selo neutro. */
#subscription-overlay .subs-plan-card.is-popular{border-color:var(--ink)!important;box-shadow:0 0 0 .5px var(--ink),var(--shadow)!important}
#subscription-overlay .subs-popular{
 position:absolute;top:0;left:16px;transform:translateY(-50%);
 padding:4px 8px;border-radius:var(--v-r-sm);background:var(--ink);color:var(--bg);
 font:600 10px/1.2 var(--v-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
/* Estados antigos de plano atual por cor (básico/atacado) não se aplicam mais. */
#subscription-overlay .subs-plan-card.is-current{animation:none!important}

/* ---------- Plano Beneficiário (oculto; só para Bolsa Família / INSS) e desconto ---------- */
#subscription-overlay .subs-plan-card[data-tier='beneficiario']{--plan:#8E80A8}
html[data-theme='dark'] #subscription-overlay .subs-plan-card[data-tier='beneficiario']{--plan:#76699A}
#subscription-overlay .subs-price{flex-wrap:wrap;align-items:baseline;column-gap:8px}
#subscription-overlay .subs-price-was{width:100%;font:500 13px/1.2 var(--v-ui);color:var(--muted);text-decoration-thickness:1.5px}
#subscription-overlay .subs-discount{font:650 11px/1 var(--v-mono);font-style:normal;letter-spacing:.04em;padding:4px 7px;border-radius:var(--v-r-sm);background:var(--v-raised);border:1px solid var(--line);color:var(--ink)}
#subscription-overlay .subs-benefit-note{margin:8px 0 0;font:500 13px/1.5 var(--v-ui);color:var(--muted)}

/* ---------- Créditos: anel fino em tinta, levemente tingido pela cor do plano ---------- */
.credit-ring-item{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
#credits-overlay{--plan:transparent;--credits-accent:var(--ink)}
#credits-overlay[data-plan=p]{--plan:#5F9A80}
#credits-overlay[data-plan=m]{--plan:#6683A6}
#credits-overlay[data-plan=g]{--plan:#AD8E58}
#credits-overlay[data-plan=beneficiario]{--plan:#8E80A8}
#credits-overlay[data-plan]:not([data-plan=gratuito]):not([data-plan=guest]){--credits-accent:color-mix(in srgb,var(--plan) 45%,var(--ink))}
#credits-overlay .credit-ring{position:relative;background:none!important;width:min(34vw,136px);height:min(34vw,136px)}
#credits-overlay .credit-ring-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
#credits-overlay .credit-ring-svg circle{fill:none;stroke-width:5}
#credits-overlay .credit-ring-track{stroke:var(--line)}
#credits-overlay .credit-ring-arc{stroke:var(--credits-accent);stroke-linecap:round;filter:none}
#credits-overlay .credit-ring-center{position:relative;background:transparent!important;width:auto;height:auto;gap:1px}
#credits-overlay .credit-ring-center strong{font:650 32px/1 var(--v-ui);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#credits-overlay .credit-ring-center small{font-size:11px;margin-top:3px}
#credits-details .credits-plan-benefit{display:inline-block;align-self:center;margin-top:2px;padding:3px 8px;border-radius:var(--v-r-sm);font:600 11px/1.4 var(--v-ui);color:var(--ink);background:var(--v-raised);border:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){#credits-overlay .credit-ring-arc{transition:none!important}}