/* Login, conta e seguranca: usa as mesmas variaveis e fontes do app. */
#app-shell[hidden], #auth-panel[hidden], .auth-panel [hidden], .account-dialog [hidden], #seguranca-view [hidden], [data-admin-only][hidden], [data-non-admin-only][hidden], .sync-status[hidden] { display: none !important; }

.auth-panel { display: grid; min-height: 100vh; padding: 24px 16px; place-items: center; background: var(--paper); }
.auth-card { display: grid; gap: 14px; width: min(100%, 400px); padding: 26px 22px; color: var(--ink); background: var(--surface); border-top: 4px solid var(--teal); box-shadow: var(--shadow); }
.auth-logo { width: 96px; height: auto; justify-self: center; object-fit: contain; }
.auth-card h1 { margin: 0; font-size: 27px; }
.auth-status { margin: 0; color: var(--muted); font-family: "Trebuchet MS", sans-serif; font-size: 13px; }
.auth-form { display: grid; gap: 13px; }
.auth-form label { display: grid; gap: 6px; color: var(--muted); font-family: "Trebuchet MS", sans-serif; font-size: 12px; font-weight: bold; }
.auth-form input { width: 100%; min-width: 0; height: var(--control-h, 44px); padding: 0 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 3px; font-size: 15px; }
.auth-form input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.auth-form .primary { width: 100%; }
.auth-form .hint { margin: 0; }
.auth-form button[disabled] { opacity: .6; }

.topbar-actions { display: flex; align-items: center; gap: 8px; }
.account-button { font-size: 17px; }

.account-dialog .drawer-actions { display: grid; gap: 8px; margin-top: 4px; }
.account-dialog input { font-size: 15px; }
#account-ok { color: var(--teal) !important; font-weight: bold; }

.user-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.user-item small { color: var(--muted); font-family: "Trebuchet MS", sans-serif; font-size: 12px; }
.user-item.user-off b { text-decoration: line-through; opacity: .7; }
.user-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.user-actions .secondary { min-height: 34px; padding: 0 10px; font-size: 12px; }
.audit-list li { font-size: 12px; }
.audit-list li b { font-weight: normal; color: var(--muted); white-space: nowrap; }
#audit-refresh { margin: 10px 0; }

.sync-status { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 50; max-width: calc(100% - 32px); margin: 0; padding: 8px 14px; color: #fff; font-family: "Trebuchet MS", sans-serif; font-size: 12px; font-weight: bold; background: var(--teal); border-radius: 999px; box-shadow: var(--shadow); transform: translateX(-50%); }
.sync-status[data-kind="offline"], .sync-status[data-kind="auth"] { background: #9a5a1f; }
.sync-status[data-kind="error"] { background: #9b3b31; }

@media print { .auth-panel, .sync-status, .topbar-actions { display: none !important; } }