.ui-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(var(--rgb-page) / .72); backdrop-filter: blur(4px); animation: uiFade .15s ease-out; }
.ui-dialog { width: 100%; max-width: 26rem; background: rgb(var(--rgb-surface)); border: 1px solid rgb(var(--rgb-line) / .7); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-lg); animation: uiPop .18s ease-out; font-family: 'Inter', sans-serif; }
.ui-dialog h4 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; color: rgb(var(--rgb-text-strong)); }
.ui-dialog p { margin: 0; font-size: .8125rem; line-height: 1.5; color: rgb(var(--rgb-muted)); white-space: pre-line; }
.ui-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }
.ui-btn { height: 2.25rem; padding: 0 1rem; border-radius: .6rem; font-size: .8125rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background-color .15s; font-family: inherit; }
.ui-btn-cancel { background: rgb(var(--rgb-line-2) / .8); border-color: rgb(var(--rgb-line) / .7); color: rgb(var(--rgb-text)); }
.ui-btn-cancel:hover { background: rgb(var(--rgb-line)); color: rgb(var(--rgb-text-strong)); }
.ui-btn-ok { background: #007f78; color: #fff; }
.ui-btn-ok:hover { background: #006e67; }
.ui-btn-danger { background: #dc2626; color: #fff; }
.ui-btn-danger:hover { background: #ef4444; }
.ui-toast-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 10000; display: flex; flex-direction: column; gap: .5rem; max-width: min(24rem, calc(100vw - 2rem)); }
.ui-toast { display: flex; gap: .75rem; align-items: flex-start; background: rgb(var(--rgb-surface)); border: 1px solid rgb(var(--rgb-line) / .8); border-left-width: 3px; border-radius: .75rem; padding: .75rem 1rem; box-shadow: 0 10px 30px rgb(0 0 0 / .3); color: rgb(var(--rgb-text)); font-size: .8125rem; line-height: 1.4; font-family: 'Inter', sans-serif; animation: uiSlide .2s ease-out; white-space: pre-line; }
.ui-toast.ok { border-left-color: #34c68f; }
.ui-toast.err { border-left-color: #ef4444; }
.ui-toast.info { border-left-color: #14a89c; }
@keyframes uiFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes uiPop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes uiSlide { from { opacity: 0; transform: translateX(16px) } to { opacity: 1; transform: none } }
    

/* Dica flutuante (nome do botão) para botões só com ícone */
.ui-tip { position: fixed; z-index: 10001; pointer-events: none; max-width: 18rem; padding: .35rem .6rem; border-radius: .5rem; background: rgb(var(--rgb-page)); color: rgb(var(--rgb-text)); border: 1px solid rgb(var(--rgb-muted-2) / .8); box-shadow: 0 8px 24px rgb(0 0 0 / .3); font: 500 .75rem/1.2 'Inter', sans-serif; opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; white-space: normal; }
.ui-tip.show { opacity: 1; transform: none; }

/* Tema escuro nativo (barras de rolagem, campos), foco visível por teclado e menos movimento */
:focus-visible { outline: 2px solid #4cc9bd; outline-offset: 2px; }
button, [role="button"], a, select, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }
[role="dialog"] { overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.ui-input { width: 100%; margin-top: .75rem; height: 2.75rem; padding: 0 .875rem; border-radius: .75rem; border: 1px solid rgb(var(--rgb-line)); background: rgb(var(--rgb-page)); color: rgb(var(--rgb-text-strong)); font-size: 1rem; letter-spacing: .08em; outline: none; }
.ui-input:focus { border-color: #14a89c; box-shadow: 0 0 0 3px rgba(20,168,156,.18); }