.finance-entry{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#fafaf8;color:#172019;min-height:100svh;display:grid;place-items:center;padding:24px} .finance-auth-card{width:min(100%,420px);border:1px solid #e5e7e3;border-radius:24px;background:white;padding:28px;box-sizing:border-box} .finance-entry-loading{padding:0}.finance-app-loading{position:fixed;z-index:40;inset:0;min-height:100svh;display:grid;place-items:center;padding:0;background:#fafaf8} .finance-loading-spinner{display:inline-grid;place-items:center;line-height:0}.finance-loading-spinner>span{display:block;width:22px;height:22px;box-sizing:border-box;border:2px solid transparent;border-top-color:#087a3e;border-right-color:#087a3e;border-radius:50%;animation:finance-spinner 800ms linear infinite}.finance-loading-spinner.large>span{width:30px;height:30px;border-width:3px}.finance-loading-spinner.button>span{width:17px;height:17px;border-width:2px;border-top-color:currentColor;border-right-color:currentColor}.finance-loading-spinner.button{vertical-align:middle}@keyframes finance-spinner{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.finance-loading-spinner>span{animation-duration:2s}} .finance-auth-card h1{font-size:26px;letter-spacing:-.025em;margin:12px 0 7px} .finance-auth-hint{font-size:13px;color:#6c766e;margin:0 0 17px} .finance-auth-card label{display:grid;gap:6px;margin:14px 0;color:#425047;font-size:13px;font-weight:650} .finance-auth-card input{box-sizing:border-box;width:100%;background:#fbfcfa;color:#172019;border:1px solid #dfe4df;border-radius:12px;padding:11px 12px;font-size:16px;min-height:44px} .finance-password-wrap{display:block;position:relative} .finance-password-wrap input{padding-right:88px} .finance-password-wrap button{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#087a3e;font-size:12px;font-weight:750;padding:10px;cursor:pointer} .finance-auth-primary,.finance-auth-other{width:100%;padding:12px 14px;border-radius:12px;font-weight:750;font-size:14px;cursor:pointer;min-height:46px} .finance-auth-primary{margin-top:12px;border:0;background:#087a3e;color:white} .finance-auth-other{margin:6px 0;background:#fff;color:#283f30;border:1px solid #dbe4dd} .finance-auth-primary:disabled,.finance-auth-other:disabled{opacity:.43;cursor:not-allowed} .finance-auth-link{display:block;border:0;color:#087a3e;background:transparent;font-size:13px;font-weight:750;margin:15px auto 0;cursor:pointer} .finance-auth-divider{margin:20px 0 11px;border-top:1px solid #e5e9e5;height:7px;text-align:center;font-size:12px;color:#6c766e} .finance-auth-divider span{position:relative;top:-10px;background:white;padding:0 12px} .finance-auth-error{font-size:12px;color:#9c3f35} .finance-auth-success{font-size:12px;color:#087a3e} /* Auth methods use the existing Rotina visual system in both login and Sistema > Mais. */ .finance-auth-divider{display:flex;align-items:center;gap:13px;height:auto;border:0;margin:19px 0 13px;white-space:nowrap;text-align:center} .finance-auth-divider:before,.finance-auth-divider:after{content:"";height:1px;background:#e5e9e5;flex:1} .finance-auth-divider span{position:static;background:transparent;padding:0;font-size:12px;color:#748078} .finance-google-button{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:0} .finance-google-button svg{flex:0 0 19px} .finance-biometric-backdrop{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:rgba(10,23,16,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overscroll-behavior:contain;padding:20px;box-sizing:border-box} .finance-biometric-dialog{width:min(100%,390px);border-radius:24px;border:1px solid #e5e9e5;background:#fff;color:#172019;padding:24px;box-shadow:0 24px 80px #0003;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif} .finance-biometric-symbol{width:48px;height:48px;border-radius:16px;background:#e5f4e9;color:#087a3e;display:grid;place-items:center;font-size:32px;font-weight:700} .finance-biometric-symbol img{width:36px;height:36px;display:block;object-fit:contain} .finance-biometric-dialog h2{font-size:21px;letter-spacing:-.02em;margin:18px 0 8px} .finance-biometric-dialog p{font-size:14px;color:#647369;line-height:1.5;margin:0 0 18px} .finance-biometric-never{display:flex;align-items:center;gap:10px;padding:5px 0;margin:0 0 22px;font-size:13px;color:#425047;cursor:pointer} .finance-biometric-never input{width:17px;height:17px;accent-color:#087a3e} .finance-biometric-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px} .finance-biometric-actions button{min-height:45px;border-radius:12px;border:1px solid #dfe7e0;background:#fff;color:#314837;font-weight:750} .finance-biometric-actions button:last-child{border-color:#087a3e;background:#087a3e;color:#fff} .finance-biometric-actions button:disabled{opacity:.5;cursor:default} .finance-access-settings{background:#fff;border:1px solid #e5e7e3;border-radius:20px;padding:18px;margin:12px 0;color:#1c2b21} .finance-access-settings h3{font-size:15px;margin:0 0 3px} .finance-access-settings>p{font-size:12px;color:#728076;margin:0 0 13px} .finance-access-method{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid #edf0ec} .finance-access-method>div{display:grid;gap:3px;min-width:0} .finance-access-method strong{font-size:14px;overflow-wrap:anywhere}.finance-access-method>div{flex:1;min-width:0;overflow:hidden}.finance-access-method>div>.finance-fade-text{font-size:14px;max-width:100%} .finance-access-method small{font-size:12px;color:#77837a} .finance-access-method button{border:0;background:transparent;color:#087a3e;border-radius:0;min-width:72px;min-height:44px;padding:10px 4px;font-size:13px;font-weight:750;cursor:pointer;touch-action:manipulation} .finance-access-method button:disabled{opacity:.45;cursor:not-allowed} .finance-biometric-dialog{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain} .finance-biometric-dialog h2{line-height:1.22} .finance-biometric-progress{background:#eff8f1;color:#145c32!important;font-size:12px!important;line-height:1.45;padding:10px 12px;border-radius:11px;margin:9px 0!important} .finance-biometric-dialog .finance-auth-error{margin:10px 0!important;color:#9c3f35!important;font-size:12px!important} .finance-access-settings .finance-biometric-progress{margin:8px 0 12px!important} @media(max-width:420px){.finance-biometric-backdrop{padding:12px}.finance-biometric-dialog{padding:19px 17px;max-height:calc(100dvh - 24px)}} .finance-auto-scan{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-height:252px;justify-content:center} .finance-auto-scan>img{width:52px;height:52px;object-fit:contain;background:#e5f4e9;padding:12px;border-radius:18px;box-sizing:content-box} .finance-auto-scan h1{margin:8px 0 1px} .finance-auto-scan .finance-auth-hint{margin:0 0 9px;line-height:1.5} .finance-auto-scan .finance-auth-other{margin:0;max-width:270px} .finance-auth-card .finance-auth-check{display:flex;align-items:center;gap:9px;font-size:13px;color:#405347;cursor:pointer;margin:6px 0 2px} .finance-auth-card .finance-auth-check input{width:17px!important;height:17px!important;min-width:17px;flex:0 0 auto;accent-color:#087a3e;margin:0;padding:0;border-radius:4px} .finance-auth-card input[type=file]{padding:10px;max-width:100%;font-size:12px;color:#53695b} /* Cadastro: um menu para avatar e username, com edição inline sem alterar o formulário. */ .finance-register-profile{display:flex;flex-direction:column;align-items:center;gap:3px;margin:12px 0 19px;position:relative} .finance-auth-card .finance-register-file-input,.finance-settings-profile .finance-register-file-input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;padding:0!important;border:0!important;min-height:0!important} .finance-register-avatar-readonly{cursor:default;pointer-events:none}.finance-register-avatar-button{width:94px;height:94px;display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid #cce8d3;border-radius:50%;background:#e3f4e8;color:#087a3e;padding:0;touch-action:manipulation;-webkit-touch-callout:none} .finance-register-profile-trigger{display:flex;flex-direction:column;align-items:center;gap:3px;max-width:100%;border:0;border-radius:10px;background:transparent;color:inherit;padding:0 12px 10px;cursor:pointer;touch-action:manipulation}.finance-register-profile-trigger:focus-visible{outline:3px solid #42996d;outline-offset:3px}.finance-register-profile-readonly{cursor:default;pointer-events:none} .finance-register-avatar-initial{font-size:43px;font-weight:750;line-height:1;text-transform:uppercase} .finance-register-avatar-silhouette{display:grid;place-items:center;color:#8a9a8f;line-height:0} .finance-register-avatar-photo{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none} .finance-register-username-display{font:800 17px/1.25 Inter,ui-sans-serif,system-ui,sans-serif;color:#172019;text-decoration:underline;text-decoration-color:#6cab84;text-underline-offset:4px;min-height:28px;box-sizing:border-box;padding:4px 0 0;margin-top:0;overflow-wrap:anywhere;max-width:100%} .finance-register-username-static{cursor:default;user-select:text;pointer-events:none} .finance-register-username-static:hover{background:transparent} .finance-onboarding-card .finance-auth-primary{margin-top:16px} .finance-onboarding-card .finance-access-settings{margin:12px 0;padding:12px} /* Reusable A/B reconciliation, rendered only for authorized conflicts. */ .finance-merge-resolver{max-width:700px;width:100%;display:flex;flex-direction:column;gap:12px} .finance-merge-resolver h2{font-size:20px;margin:0}.finance-merge-resolver p{color:#657269;font-size:13px} /* Configurações: identidade persistente, convite lado a lado, formulário compacto. */ .finance-settings-stack{display:flex;flex-direction:column;gap:15px;padding-bottom:16px} .finance-settings-card{background:#fff;border:1px solid #e5e7e3;border-radius:20px;overflow:visible;color:#172019} .finance-settings-profile{padding:20px 14px 16px;position:relative} .finance-settings-identity{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:start;gap:6px} /* The pair shrinks with the width alone, sized for the longest accepted names (15 characters; an older, longer username counts by its length), never for what is written or being typed (FIN-016). */ .finance-settings-identity.inviting{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;container-type:inline-size;--finance-pair-username-size:clamp(9px,calc((100cqi - 10px) / 2 / (var(--finance-pair-chars) * .64)),16px);--finance-pair-name-size:clamp(9px,calc((100cqi - 10px) / 2 / (15 * .58)),13px);--finance-pair-avatar:clamp(56px,calc((100cqi - 10px) / 2 * .62),88px)} .finance-settings-identity.inviting :is(.finance-settings-owner .finance-register-avatar-button,.finance-settings-guest-avatar){width:var(--finance-pair-avatar);height:var(--finance-pair-avatar)} .finance-settings-identity.inviting :is(.finance-settings-owner .finance-register-avatar-initial,.finance-settings-guest-avatar>span){font-size:calc(var(--finance-pair-avatar) * .42)} .finance-settings-identity.inviting .finance-settings-guest-avatar>svg{width:calc(var(--finance-pair-avatar) * .52);height:calc(var(--finance-pair-avatar) * .52)} .finance-settings-identity.inviting .finance-settings-partnership-mark{top:calc(var(--finance-pair-avatar) / 2 + 4px)} .finance-settings-identity.inviting .finance-register-name-display{font-size:var(--finance-pair-name-size)} .finance-settings-owner,.finance-settings-guest{min-width:0;width:100%;display:flex;flex-direction:column;align-items:center} .finance-settings-owner .finance-register-profile{margin:4px 0 8px;min-width:0;width:100%} .finance-settings-owner .finance-register-avatar-button{width:88px;height:88px}.finance-settings-owner .finance-register-avatar-button:has(.finance-register-avatar-photo){padding:0;background:#fff;border:2px solid #fff;box-shadow:0 0 0 1px #dce2dc} .finance-settings-owner .finance-register-avatar-initial{font-size:39px} .finance-settings-owner .finance-register-username-display{font-size:16px} .finance-settings-identity.inviting .finance-register-username-display{box-sizing:border-box;max-width:100%;height:44px;min-height:44px;min-width:0;margin:0;padding:10px 0;font:800 var(--finance-pair-username-size)/20px Inter,ui-sans-serif,system-ui,sans-serif;text-align:center;white-space:nowrap;overflow-wrap:normal} .finance-settings-identity.inviting .finance-register-username-display{display:flex;align-items:center;justify-content:center} .finance-settings-owner .finance-register-avatar-anchor{position:relative;display:grid;place-items:center;width:auto;height:auto}.finance-settings-owner .finance-register-avatar-trailing{top:44px} .finance-register-avatar-trailing{position:absolute;top:50%;left:calc(100% + 7px);transform:translateY(-50%);z-index:2} .finance-settings-partner-button{display:grid;place-items:center;width:44px;height:44px;padding:6px;border:0;background:transparent;color:#087a3e;cursor:pointer;touch-action:manipulation} .finance-settings-partner-button:hover,.finance-settings-partner-button:focus-visible{color:#065d30} .finance-settings-identity.inviting .finance-settings-partner-button{width:44px;height:44px} .finance-settings-identity.inviting .finance-settings-partner-button svg{width:24px;height:24px} .finance-settings-partnership-mark{position:absolute;left:50%;top:48px;transform:translate(-50%,-50%);width:26px;height:26px;display:grid;place-items:center;color:#087a3e;pointer-events:none;z-index:1}.finance-settings-partnership-mark svg{width:100%;height:100%;display:block}.finance-settings-guest{padding-top:4px} .finance-settings-guest-avatar{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:#eef3ef;border:2px solid #fff;box-shadow:0 0 0 1px #dce2dc;color:#8a9a8f} .finance-settings-guest-username{position:relative;width:100%;max-width:100%;height:44px;margin-top:3px} .finance-settings-guest input{box-sizing:border-box;min-width:0;max-width:100%;width:100%;height:44px;min-height:44px;font:800 var(--finance-pair-username-size,16px)/20px Inter,ui-sans-serif,system-ui,sans-serif;border:0;border-radius:0;text-align:center;margin:0;padding:10px 0;background:transparent;color:#172019;caret-color:#087a3e;outline:none;text-decoration:underline;text-decoration-color:#6cab84;text-underline-offset:4px} .finance-settings-guest input:focus{text-decoration-color:#087a3e;outline:0} .finance-settings-guest-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font:800 var(--finance-pair-username-size,16px)/20px Inter,ui-sans-serif,system-ui,sans-serif;color:#777;text-decoration:underline;text-decoration-color:#a5bfae;text-underline-offset:4px} .finance-settings-invite-actions{display:flex;flex-direction:column;align-items:center;margin-top:14px} .finance-settings-invite-actions>.finance-settings-invite-buttons{width:100%;max-width:320px} .finance-settings-invite-cancel{min-height:44px;border-radius:10px;border:1px solid #d6e0d8;background:transparent;color:#536858;font-weight:750} .finance-settings-invite-primary,.finance-settings-invite-buttons button:last-child:not(:only-child){background:#087a3e;color:#fff;border:1px solid #087a3e;border-radius:10px;min-height:44px;padding:10px 16px;font-weight:750} .finance-settings-invite-primary:disabled,.finance-settings-invite-buttons button:disabled{opacity:.45} .finance-settings-invite-confirm{width:100%;background:#f7faf7;border-radius:12px;padding:12px;font-size:13px} .finance-settings-invite-confirm p{margin:0 0 6px} .finance-settings-invite-confirm small{display:block;line-height:1.5;color:#647567} .finance-settings-invite-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px} .finance-settings-invite-buttons button:first-child{border-radius:10px;border:1px solid #d6e0d8;background:#fff;color:#29392d;min-height:44px} .finance-settings-feedback{margin:10px 0 0;text-align:center} .finance-settings-stack .activity-card{margin:0} .finance-security-password .finance-access-method{margin:0} .finance-settings-exit{display:grid;justify-items:center;gap:0;margin:0} .finance-settings-logout{text-align:center;padding:0} .finance-settings-logout button{padding:6px 16px;border:0;background:transparent;color:#597368;font-weight:750} .finance-settings-stack .finance-access-settings{margin:0} /* FIN-013: the simple typing field of the whole system (a card, a payment, Username and Apelido, the password that confirms identity, a new password): the label above and one box: 46px, a thin line, 12px corners, the green line on focus. It lives here so screens before the app (merging) wear it too; fields with a design of their own keep it. */ .form-field{display:grid;gap:6px;margin:12px 0;color:#425047;font-size:13px;font-weight:650} :root :is(.form-field>input,.form-field>.finance-password-wrap>input){box-sizing:border-box;width:100%;min-height:46px;margin:0;padding:0 12px;border:1px solid #dfe4df;border-radius:12px;background:#fbfcfa;color:#172019;font:inherit;outline:none} :root :is(.form-field>input,.form-field>.finance-password-wrap>input):focus{border-color:#9bc8aa!important} .form-field>input::placeholder{color:#89958d} /* the password that confirms identity carries the entry's eye, in the box */ :root .form-field>.finance-password-wrap>input{padding-right:46px} .form-field .finance-password-wrap button{display:grid;place-items:center;right:3px;width:40px;height:40px;padding:0;color:#087a3e} /* Núcleo FIN-016: the Profile sections follow the filter window: the title centred in capitals like a filter group's, each field a row like a filter option (same text), thin rules only between rows, the row's action on the right. */ .finance-settings-stack .finance-access-settings{padding:4px 18px} .finance-settings-stack .finance-access-settings>h3{margin:10px 4px 4px;text-align:center;font-size:11px;font-weight:800;line-height:normal;letter-spacing:.08em;text-transform:uppercase;color:#173522} .finance-settings-stack .finance-access-method{box-sizing:border-box;min-height:48px;margin:0;padding:0;border-top:1px solid #edf0ec} .finance-settings-stack .finance-access-settings>h3+.finance-access-method,.finance-settings-stack .finance-access-settings>h3+.finance-security-password>.finance-access-method:first-child{border-top:0} .finance-settings-stack .finance-access-method strong,.finance-settings-stack .finance-access-method>div>.finance-fade-text{color:#7a857f;font-size:15px;font-weight:700;line-height:1.25} .finance-settings-stack .finance-access-method button{padding-right:0;text-align:right} /* FIN-016: the photo, the username and, right under its line, the nickname as a subtitle: neutral, regular weight, touching the line. In a pair the username sits in a 44px box, so the subtitle climbs to its line. */ .finance-register-name-display{box-sizing:border-box;display:block;width:100%;max-width:100%;margin:-4px 0 0;padding:0;overflow:hidden;color:#77837a;font:400 13px/15px Inter,ui-sans-serif,system-ui,sans-serif;text-align:center;white-space:nowrap;text-overflow:ellipsis} .finance-settings-identity.inviting .finance-register-name-display{margin-top:-14px} .finance-settings-identity.inviting .finance-settings-guest>.finance-register-name-display{margin-top:-11px} /* Editar nome: from the last box to the buttons, the same room as from one box to the next (the field margin, the label line and its gap: 12 + 16 + 6). */ .sheet-layer>.sheet>form.finance-names-form{padding-bottom:22px} @media(max-width:410px){.finance-settings-profile{padding:17px 9px}.finance-settings-identity.inviting{gap:3px}.finance-settings-owner .finance-register-avatar-button,.finance-settings-guest-avatar{width:78px;height:78px}.finance-settings-guest label{font-size:10px}.finance-settings-partnership-mark{top:43px;width:24px;height:24px}.finance-settings-owner .finance-register-avatar-trailing{top:39px;left:calc(50% + 44px)}} .finance-register-avatar-initial.double{font-size:35px;letter-spacing:-.065em} /* Configurações: única expansão, sem estilos legados de diálogo de reautenticação. */ .finance-settings-auth-backdrop{position:fixed;inset:0;z-index:2147483100;display:grid;place-items:center;padding:16px;background:rgba(11,24,17,.45);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);overscroll-behavior:contain} .finance-settings-auth-dialog{width:min(100%,350px);box-sizing:border-box;background:#fff;border:1px solid #e4ebe5;border-radius:20px;box-shadow:0 20px 60px rgba(4,27,13,.24);padding:22px;color:#1c2b21} .finance-settings-auth-dialog h2{font-size:17px;line-height:1.3;font-weight:750;margin:0 0 18px} .finance-settings-auth-dialog form{display:grid;gap:13px} .finance-settings-auth-buttons,.finance-settings-expanded-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px} .finance-settings-auth-buttons button,.finance-settings-expanded-actions button{min-height:44px;padding:10px 12px;border-radius:11px;font-size:13px;font-weight:750;cursor:pointer} .finance-settings-auth-buttons button:first-child,.finance-settings-expanded-actions button:first-child{background:#fff;color:#285339;border:1px solid #d2e2d6} .finance-settings-auth-buttons button:last-child,.finance-settings-expanded-actions button:last-child{background:#087a3e;color:#fff;border:1px solid #087a3e} .finance-settings-auth-buttons button:disabled,.finance-settings-expanded-actions button:disabled{opacity:.5;cursor:default} .finance-settings-expanded{padding:13px 0 6px;display:grid;gap:10px} .finance-settings-expanded-actions{padding:11px 0 4px} .finance-settings-stack .finance-settings-invite-buttons{max-width:100%} @media(max-width:420px){.finance-settings-auth-dialog{padding:19px 17px;border-radius:17px}.finance-settings-auth-backdrop{padding:12px}} /* Own row: the "never ask" checkbox rule sized every input in its row to 17px. */ .finance-preview-build{margin:8px 0 0;text-align:center;color:#859189;font-size:10px;font-weight:500;letter-spacing:.02em;user-select:text} /* A selecao por arrasto fica restrita a campos de edicao tambem nas telas de acesso. */ .finance-auth-card,.finance-onboarding-card{-webkit-user-select:none;user-select:none} .finance-onboarding-card input,.finance-onboarding-card textarea{-webkit-user-select:text;user-select:text} /* FIN-013: these windows take the launch window's shape: from the bottom, full width, as tall as their content up to its height */ .finance-biometric-backdrop,.finance-settings-auth-backdrop{place-items:end stretch!important;padding:0!important} .finance-biometric-dialog,.finance-settings-auth-dialog{box-sizing:border-box!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:min(88svh,820px)!important;overflow-y:auto!important;overscroll-behavior:contain;border:0!important;border-radius:24px 24px 0 0!important;padding:22px 18px max(12px,env(safe-area-inset-bottom))!important} @media(max-width:620px){.finance-biometric-dialog,.finance-settings-auth-dialog{max-height:88dvh!important}} /* The veil behind these windows keeps the dark theme's light haze in the light theme too. */ html[data-finance-theme="light"] .finance-biometric-backdrop{background:rgba(217,238,227,.45)!important} html[data-finance-theme="light"] .finance-settings-auth-backdrop{background:rgba(216,237,226,.45)!important} /* Every button of the system reacts the same way (Núcleo FIN-013), in its own appearance, never with a new layer: - a button with a fill or a frame darkens its fill and frame a little (lightens them in the dark theme), more when pressed; - a frameless one (an icon or a word on the page) fades its own content a little, more when pressed; - on a tap the same reaction plays as a brief flash (pages/_app.js); a disabled button stays still; - elements that already react on their own (list rows, the create button, the close X, the card's invoice icon and the invoice's and the rows' edit pencils) keep their own reaction and get nothing extra; the carousel cards never react, only their Orçamento label does. The :not(#__press) lifts these rules above the many local hover and active rules that switched reactions off. */ :root{--press-hover:.93;--press-active:.84;--press-flash-from:.8} html[data-finance-theme="dark"]{--press-hover:1.14;--press-active:1.3;--press-flash-from:1.4} @property --press-level{syntax:"";inherits:false;initial-value:1} @property --press-fade{syntax:"";inherits:false;initial-value:1} @media (hover:hover){ :is(button,[role="button"],summary,.period-selector):not(:disabled):not([aria-disabled="true"]):not(.entity-row-button,.launch-fab,.finance-close-button,.card-invoice-button,.sheet-title-action,.inline-row-action[aria-label="Editar"],.inline-row-action.tone-edit,.carousel-period-card,.launch-amount-edit,.dre-row,.choice-option,.calendar-day,.calendar-title):not(.topbar-toggle,.period-selector,.bottom-nav button,.dre-toolbar button,.dre-search>button,.icon-action,.launch-timeline-nav button,.launch-more>summary,.invoice-cycle-head button,.finance-register-profile-trigger,.finance-settings-partner-button,.finance-access-method button,.today-period-button,.recurrence-off,.calendar-step,.calendar-today):not(#__press):hover{filter:brightness(var(--press-hover))!important} :is(button,[role="button"],summary,.period-selector):not(:disabled):not([aria-disabled="true"]):not(.entity-row-button,.launch-fab,.finance-close-button,.card-invoice-button,.sheet-title-action,.inline-row-action[aria-label="Editar"],.inline-row-action.tone-edit,.carousel-period-card,.launch-amount-edit,.dre-row,.choice-option,.calendar-day,.calendar-title):not(.topbar-toggle,.period-selector,.bottom-nav button,.dre-toolbar button,.dre-search>button,.icon-action,.launch-timeline-nav button,.launch-more>summary,.invoice-cycle-head button,.finance-register-profile-trigger,.finance-settings-partner-button,.finance-access-method button,.today-period-button,.recurrence-off,.calendar-step,.calendar-today):not(#__press):active{filter:brightness(var(--press-active))!important} :is(button,[role="button"],summary,.period-selector):not(:disabled):not([aria-disabled="true"]):not(.entity-row-button,.launch-fab,.finance-close-button,.card-invoice-button,.sheet-title-action,.inline-row-action[aria-label="Editar"],.inline-row-action.tone-edit,.carousel-period-card,.launch-amount-edit,.dre-row,.choice-option,.calendar-day,.calendar-title):is(.topbar-toggle,.period-selector,.bottom-nav button,.dre-toolbar button,.dre-search>button,.icon-action,.launch-timeline-nav button,.launch-more>summary,.invoice-cycle-head button,.finance-register-profile-trigger,.finance-settings-partner-button,.finance-access-method button,.today-period-button,.recurrence-off,.calendar-step,.calendar-today):not(#__press):hover{opacity:.66!important} :is(button,[role="button"],summary,.period-selector):not(:disabled):not([aria-disabled="true"]):not(.entity-row-button,.launch-fab,.finance-close-button,.card-invoice-button,.sheet-title-action,.inline-row-action[aria-label="Editar"],.inline-row-action.tone-edit,.carousel-period-card,.launch-amount-edit,.dre-row,.choice-option,.calendar-day,.calendar-title):is(.topbar-toggle,.period-selector,.bottom-nav button,.dre-toolbar button,.dre-search>button,.icon-action,.launch-timeline-nav button,.launch-more>summary,.invoice-cycle-head button,.finance-register-profile-trigger,.finance-settings-partner-button,.finance-access-method button,.today-period-button,.recurrence-off,.calendar-step,.calendar-today):not(#__press):active{opacity:.45!important} } :is(button,[role="button"],summary,.period-selector):not(:disabled):not([aria-disabled="true"]):not(.entity-row-button,.launch-fab,.finance-close-button,.card-invoice-button,.sheet-title-action,.inline-row-action[aria-label="Editar"],.inline-row-action.tone-edit,.carousel-period-card,.launch-amount-edit,.dre-row,.choice-option,.calendar-day,.calendar-title).press-flash:not(.topbar-toggle,.period-selector,.bottom-nav button,.dre-toolbar button,.dre-search>button,.icon-action,.launch-timeline-nav button,.launch-more>summary,.invoice-cycle-head button,.finance-register-profile-trigger,.finance-settings-partner-button,.finance-access-method button,.today-period-button,.recurrence-off,.calendar-step,.calendar-today):not(#__press){filter:brightness(var(--press-level))!important;animation:press-flash .3s ease-out} :is(button,[role="button"],summary,.period-selector):not(:disabled):not([aria-disabled="true"]):not(.entity-row-button,.launch-fab,.finance-close-button,.card-invoice-button,.sheet-title-action,.inline-row-action[aria-label="Editar"],.inline-row-action.tone-edit,.carousel-period-card,.launch-amount-edit,.dre-row,.choice-option,.calendar-day,.calendar-title).press-flash:is(.topbar-toggle,.period-selector,.bottom-nav button,.dre-toolbar button,.dre-search>button,.icon-action,.launch-timeline-nav button,.launch-more>summary,.invoice-cycle-head button,.finance-register-profile-trigger,.finance-settings-partner-button,.finance-access-method button,.today-period-button,.recurrence-off,.calendar-step,.calendar-today):not(#__press){opacity:var(--press-fade)!important;animation:press-fade .3s ease-out} @keyframes press-flash{from{--press-level:var(--press-flash-from)}to{--press-level:1}} @keyframes press-fade{from{--press-fade:.4}to{--press-fade:1}} /* The Orçamento label of a carousel card reacts as frameless text, through filter:opacity so the carousel's own opacity (it shows only on the centre card) is multiplied, never replaced; the cards themselves stay still. */ @media (hover:hover){ .carousel-period-card .dre-card-toggle:not(#__press):hover{filter:opacity(.66)!important} .carousel-period-card .dre-card-toggle:not(#__press):active{filter:opacity(.45)!important} } .carousel-period-card .dre-card-toggle.press-flash:not(#__press){filter:opacity(var(--press-fade))!important;animation:press-fade .3s ease-out} /* Light theme: the loading spinner (and the one drawn on a loading carousel card) wears the dark green of the theme (its green would otherwise become ink); inside a button it keeps the colour of the button text. */ html[data-finance-theme="light"] .carousel-period-card.pending .forecast-result-panel::before,html[data-finance-theme="light"] .finance-loading-spinner:not(.button)>span{border-top-color:hsl(152 76% 28%)!important;border-right-color:hsl(152 76% 28%)!important} /* Every field, tapped to open a choice or typed in, reacts like a button: the framed ones darken their box, the periodicity of an open recurrence (a word with its icon) fades. */ @media (hover:hover){ :is(.launch-amount-line,.launch-field,.date-field,.installment-date,.card-name-control,.form-field>:is(input,select,textarea),.auth-card input,.invite-card input,.password-box input,.custom-range input,input[type=search],.recurrence-body>select):not(:disabled):not(:has(:disabled)):not(#__press):hover{filter:brightness(var(--press-hover))!important} :is(.launch-amount-line,.launch-field,.date-field,.installment-date,.card-name-control,.form-field>:is(input,select,textarea),.auth-card input,.invite-card input,.password-box input,.custom-range input,input[type=search],.recurrence-body>select):not(:disabled):not(:has(:disabled)):not(#__press):active{filter:brightness(var(--press-active))!important} .sheet-layer .recurrence-head:not(:has(.recurrence-off:hover)):hover>:not(.recurrence-off){opacity:.66!important} .sheet-layer .recurrence-head:not(:has(.recurrence-off:hover)):active>:not(.recurrence-off){opacity:.45!important} } :is(.launch-amount-line,.launch-field,.date-field,.installment-date,.card-name-control,.form-field>:is(input,select,textarea),.auth-card input,.invite-card input,.password-box input,.custom-range input,input[type=search],.recurrence-body>select):not(:disabled):not(:has(:disabled)).press-flash:not(#__press){filter:brightness(var(--press-level))!important;animation:press-flash .3s ease-out} .sheet-layer .recurrence-head.press-flash>:not(.recurrence-off){opacity:var(--press-fade)!important;animation:press-fade .3s ease-out} /* Touch targets: every target offers at least 44×44. A small button on its own keeps its drawing and gains an invisible hit area around it (its ::after, which none of them draws with); buttons side by side (row actions, the selection bar) grow for real to 36px with an 8px gap, so each one's 44px area ends where its neighbour's begins. */ :is(.topbar-toggle,.household-trigger,.period-selector,.sheet-title-action,.main-paid-toggle,.installment-paid-toggle,.action-btn,.card-invoice-button,.launch-more>summary,.recurrence-off):not(:is(.main-paid-toggle,.period-selector)):not(#__touch){position:relative} .finance-card .card-conflict-button:not(#__touch){position:relative} :is(.topbar-toggle,.household-trigger,.period-selector,.sheet-title-action,.main-paid-toggle,.installment-paid-toggle,.action-btn,.card-invoice-button,.launch-more>summary,.recurrence-off)::after,:is(.inline-row-action,.selection-dock .bulk-icon,.icon-action,.finance-close-button,.dre-toolbar button,.dre-search>button)::after,.finance-merge-row>button.finance-merge-lens::after,.finance-card .card-conflict-button::after{content:"";position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))} :is(.inline-row-action,.selection-dock .bulk-icon,.icon-action,.finance-close-button,.dre-toolbar button,.dre-search>button):not(#__touch){position:relative;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;flex:0 0 36px!important} :is(.inline-row-actions,.selection-dock div:has(>.bulk-icon)):not(#__touch){gap:8px!important} .calculator-quick button:not(#__touch),.launch-timeline-nav button:not(#__touch){min-height:44px!important;height:44px!important} /* The action column of a list row opens at 44px per action, its actions centred, so the outer ones keep 4px of their area inside it. */ :is(.canonical-upcoming-row,.launch-timeline-row).actions-open:not([data-actions-click-closed='true']):not(#__touch){--canonical-action-slot:88px!important} :is(.canonical-upcoming-row,.launch-timeline-row).actions-open:not([data-actions-click-closed='true'])[data-actions='1']:not(#__touch){--canonical-action-slot:44px!important} :is(.canonical-upcoming-row,.launch-timeline-row).actions-open:not([data-actions-click-closed='true'])[data-actions='3']:not(#__touch){--canonical-action-slot:132px!important} .canonical-row-action-slot>.inline-row-actions:not(#__touch){justify-content:center!important;align-items:center!important} /* Header icons and toolbar icons sit side by side: 8px between them completes each one's 44px. */ :is(.topbar-actions,.launch-toolbar-left,.dre-toolbar):not(#__touch){gap:8px!important} .period-selector:not(#__touch){z-index:2} /* A title action (Clonar, Editar cartão) sits beside the close button and grows like it, 8px apart. */ .sheet-header-actions:not(#__touch){gap:8px!important} .sheet-title-action:not(#__touch){width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;margin:0!important} /* Light theme: the start and end dates of a custom view are dark green, like the period selector. */ html[data-finance-theme="light"] .custom-side-pick,html[data-finance-theme="light"] .custom-side-pick .custom-side-value,html[data-finance-theme="light"] .custom-side-pick svg{color:hsl(152 76% 28%)!important} /* Budget panel. The header keeps one height and centres buttons and title, the same with or without the monthly breakdown; snapped to the top (7px from the screen edge) the panel grows with the screen until its foot sits 7px above the navigation bar. */ .dre-card{--dre-head:66px} .dre-card .dre-header:not(#__touch){height:var(--dre-head)!important;min-height:var(--dre-head)!important;padding:0 12px!important;align-items:center!important} .dre-card .dre-header>.dre-title:not(#__touch){top:0!important;bottom:0!important;align-content:center!important} /* The title chooses its own form by the room beside the buttons, so it no longer needs a fixed cap. */ .dre-card .dre-header>.dre-title:not(#__touch){max-width:none!important} .finance-vision-snap .dre-card.connected .dre-table-scroll:not(#__touch),.dre-table-scroll.breakdown.custom-breakdown:not(#__touch){max-height:calc(100dvh - var(--dre-head) - 54px - env(safe-area-inset-bottom) - 16px)!important} /* The start and end pickers of a custom view are frameless choices: they fade a little under the mouse, more when pressed. */ @media (hover:hover){ .custom-side-pick:not(#__press):hover{opacity:.66!important} .custom-side-pick:not(#__press):active{opacity:.45!important} } .custom-side-pick.press-flash:not(#__press){opacity:var(--press-fade)!important;animation:press-fade .3s ease-out} /* At rest the Visão title sits at the height of the other page titles. Its inner top padding (which centres it when the page snaps onto it) stays; the line rises by a margin and the carousel below gives the same amount back. */ .vision-content .period-line:not(#__touch){margin-top:-6.5px!important} .vision-content>.period-carousel:not(#__touch){margin-top:-0.5px!important} /* The mist floor is set on each scrolling area itself and read only there: not inherited, so moving it during a gesture restyles that one element, not every row inside it. */ @property --fog-floor{syntax:"";inherits:false;initial-value:0px} /* A choice field keeps the native