html { -webkit-text-size-adjust: 100%; }
body { min-width: 320px; }
body.online-booting { overflow: hidden; }
body.online-booting .app-shell { display: none; }
body.online-ready .online-gate { display: none; }

.online-gate {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  min-height: 100dvh; padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 16% 12%, rgba(231,189,114,.2), transparent 30%),
    linear-gradient(145deg, #12221a, #213b2d);
}
.online-gate[hidden] { display: none; }
.online-gate-card {
  width: min(430px, 100%); padding: 34px; border: 1px solid rgba(255,255,255,.55);
  border-radius: 24px; background: #fffdf8; box-shadow: 0 30px 90px rgba(0,0,0,.28);
}
.online-gate-brand {
  display: grid; width: 54px; height: 54px; margin-bottom: 25px; place-items: center;
  border-radius: 16px; color: #16231d; background: #e7bd72; font-size: 27px; font-weight: 900;
}
.online-gate-card h1 { margin-bottom: 9px; font-size: 32px; }
.online-gate-card > p { color: var(--muted); }
.online-login-form { display: grid; gap: 15px; margin-top: 24px; }
.online-login-form input { min-height: 48px; font-size: 16px; }
.online-login-form .button { min-height: 48px; margin-top: 3px; }
.online-gate-progress { display: flex; align-items: center; gap: 12px; margin-top: 24px; color: var(--forest); }
.online-spinner { width: 22px; height: 22px; border: 3px solid #dbe4de; border-top-color: var(--green); border-radius: 50%; animation: online-spin .7s linear infinite; }
.online-gate-error { margin: 17px 0 0 !important; padding: 11px 12px; border-radius: 10px; color: #8a312c !important; background: #fff0ef; font-size: 12px; }
@keyframes online-spin { to { transform: rotate(360deg); } }

.online-badge[data-status="syncing"] .status-dot { background: #e7bd72; box-shadow: 0 0 0 4px rgba(231,189,114,.12); }
.online-badge[data-status="offline"] .status-dot,
.online-badge[data-status="error"] .status-dot { background: #e8753b; box-shadow: 0 0 0 4px rgba(232,117,59,.13); }
.online-signout { margin-top: 5px; }

@media (pointer: coarse) {
  .button, .icon-button, .nav-item, input, select { min-height: 44px; }
  .text-button { min-height: 40px; padding-inline: 8px; }
}

@media (max-width: 620px) {
  .content { padding: 14px 11px calc(30px + env(safe-area-inset-bottom)); }
  .topbar { padding-top: max(9px, env(safe-area-inset-top)); }
  .topbar-actions .primary { min-width: 70px; font-size: 0; }
  .topbar-actions .primary::after { content: "+ Novo"; font-size: 11px; }
  .section-toolbar { gap: 13px; margin-bottom: 15px; }
  .section-toolbar h2 { font-size: 25px; }
  .toolbar-actions { display: grid; grid-template-columns: 1fr; }
  .toolbar-actions .button { width: 100%; }
  .panel { padding: 15px; border-radius: 14px; }
  .hero-strip { padding: 19px 17px; }
  .hero-filter { flex-direction: column; align-items: stretch; }
  .hero-filter label { width: 100%; }
  .table-wrap { margin-inline: -15px; padding-inline: 15px; overscroll-behavior-inline: contain; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal, .modal.wide {
    width: 100%; max-height: 100dvh; border-width: 1px 0 0; border-radius: 20px 20px 0 0;
  }
  .modal-header { position: sticky; top: 0; z-index: 2; padding: 15px; background: var(--surface); }
  .modal-header h2 { font-size: 20px; }
  .modal-body { max-height: calc(100dvh - 75px); padding: 15px 15px calc(18px + env(safe-area-inset-bottom)); }
  .modal-actions { position: sticky; bottom: 0; z-index: 2; flex-direction: column-reverse; padding: 12px 0 0; background: linear-gradient(transparent, var(--surface) 18%); }
  .modal-actions .button { width: 100%; }
  .modal-actions .modal-delete-button { margin-right: 0; }
  .toast-region { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: calc(100vw - 20px); }
  .online-gate-card { padding: 26px 20px; border-radius: 20px; }
  .online-gate-card h1 { font-size: 28px; }
}

@media (max-width: 380px) {
  .metric-grid, .metric-grid.small { grid-template-columns: 1fr; }
  .filter-grid, .finance-filters { grid-template-columns: 1fr; }
  .page-heading h1 { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}