:root {

  color-scheme: light;

  --navy: #0b2545; --teal: #0a9489; --accent: #0fb6a8;

  --bg: #f4f8f9; --surface: #fff; --surface-soft: #edf5f6;

  --text: #183248; --muted: #617487; --line: #dae5e9;

  --danger: #b93644; --warning: #a7600c; --success: #16765b;

  --shadow: 0 10px 32px rgba(11,37,69,.06);

}

body.theme-dark {

  color-scheme: dark;

  --bg: #0c1824; --surface: #142534; --surface-soft: #1b3340;

  --text: #edf6f5; --muted: #a8bec7; --line: #29434e;

  --danger: #ff8590; --warning: #f2bd78; --success: #72d8b0;

  --shadow: 0 12px 36px rgba(0,0,0,.18);

}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 Inter, system-ui, -apple-system, sans-serif; }

button, input, select, textarea { font: inherit; }

button { cursor: pointer; }

button:disabled { cursor: wait; opacity: .65; }

input, select, textarea { color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-height: 42px; padding: 9px 12px; outline: none; }

textarea { resize: vertical; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 { line-height: 1.25; }

h1 { font-size: 1.75rem; } h2 { font-size: 1.1rem; }

.hidden, .icon-sprite { display: none !important; }

.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.muted, .eyebrow { color: var(--muted); }

.eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .1em; }

.btn, .icon-button, .nav-item { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; transition: background .18s, color .18s, transform .18s, box-shadow .18s; }

.btn { padding: 10px 16px; min-height: 42px; border-radius: 8px; font-weight: 700; white-space: nowrap; }

.btn:hover:not(:disabled) { transform: translateY(-1px); }

.btn.primary { background: var(--teal); color: #fff; }

.btn.primary:hover:not(:disabled) { background: #08766e; box-shadow: 0 7px 16px rgba(10,148,137,.2); }

.btn.secondary { background: var(--surface-soft); color: var(--text); }

.btn.danger { color: var(--danger); background: var(--surface-soft); }

.btn.small { min-height: 34px; padding: 6px 10px; font-size: .81rem; }

.btn.full { width: 100%; }

.icon-button { width: 42px; height: 42px; border-radius: 8px; background: transparent; color: var(--muted); font-size: 24px; }

.icon-button:hover { background: var(--surface-soft); color: var(--text); }



.login-screen { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--bg); }

.login-theme { position: fixed; right: 20px; top: 20px; }

.login-box { width: min(100%, 390px); background: var(--surface); padding: 36px; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }

.login-logo { width: 68px; height: 68px; margin-bottom: 18px; }

.login-box h1 { margin-bottom: 5px; }

.login-box p { color: var(--muted); margin-bottom: 25px; }

.login-box label, .form-row label { display: block; margin: 0 0 6px; font-size: .82rem; font-weight: 700; }

.login-box input { display: block; width: 100%; margin-bottom: 17px; }

.form-error { min-height: 22px; color: var(--danger); font-size: .86rem; }



.app { min-height: 100vh; display: flex; }

.sidebar { width: 238px; flex: none; position: sticky; top: 0; height: 100vh; padding: 22px 14px; display: flex; flex-direction: column; background: var(--navy); color: #e3f3f2; }

.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 29px; font-weight: 800; font-size: 1.05rem; white-space: nowrap; }

.brand img, .mobile-brand img { width: 38px; height: 38px; border-radius: 8px; }

.side-nav { display: grid; gap: 4px; }

.side-footer { margin-top: auto; display: grid; gap: 4px; }

.sidebar .nav-item { width: 100%; justify-content: flex-start; padding: 11px 13px; border-radius: 8px; color: #bed1d9; background: transparent; font-weight: 600; text-align: left; }

.sidebar .nav-item:hover, .sidebar .nav-item.active { color: #fff; background: rgba(15,182,168,.24); }

.sidebar .nav-item.active { box-shadow: inset 3px 0 var(--accent); }

.workspace { min-width: 0; flex: 1; }

.topbar { height: 70px; padding: 0 clamp(18px,3vw,42px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--surface); }

.page-title { font-weight: 800; }

.top-actions { display: flex; gap: 4px; }

.mobile-brand, .mobile-theme { display: none; }

.main { max-width: 1480px; margin: auto; padding: 30px clamp(18px,3vw,42px) 60px; }

.view { animation: enter .22s ease both; }

@keyframes enter { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.section-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }

.section-heading h1, .section-heading h2 { margin: 3px 0 0; }

.section-heading.compact { margin: 32px 0 14px; }

.cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }

.card { min-width: 0; background: var(--surface); padding: 20px; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }

.card .label { color: var(--muted); font-size: .82rem; font-weight: 600; }

.card .value { font-size: clamp(1.25rem,2vw,1.65rem); font-weight: 800; margin-top: 8px; overflow-wrap: anywhere; }

.card .value.green { color: var(--success); } .card .value.amber { color: var(--warning); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,1fr); gap: 18px; margin-top: 18px; }

.panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }

.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; }

.panel-heading h2 { margin: 0; } .panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }

.chart { min-height: 225px; }

.chart-legend { display: flex; gap: 17px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-bottom: 15px; }

.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }

.chart-legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--teal); }

.chart-legend .pending i { background: #dfaa66; }

.chart-bars { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); align-items: end; gap: 8px; height: 175px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }

.chart-month { height: 100%; position: relative; display: flex; align-items: end; justify-content: center; gap: 3px; }

.chart-bar { width: min(35%,26px); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--teal); }

.chart-bar.pending { background: #dfaa66; }

.chart-month label { position: absolute; bottom: -23px; font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }

.search-field { position: relative; flex: 1; min-width: 200px; }

.search-field .icon { position: absolute; left: 12px; top: 12px; color: var(--muted); }

.search-field input { width: 100%; padding-left: 38px; }

.toolbar select { min-width: 160px; }

#dashboard-search-results { max-height: 310px; overflow: auto; }

.client-cards { display: grid; gap: 8px; margin-top: 12px; }

.client-card { display: flex; align-items: center; gap: 11px; padding: 10px; background: var(--surface-soft); border-radius: 8px; min-width: 0; }

.client-card-info { min-width: 0; } .client-card-name { font-weight: 750; }

.client-card-sub { color: var(--muted); font-size: .79rem; overflow-wrap: anywhere; }

.client-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; background: var(--surface-soft); }

.client-thumb.small { width: 38px; height: 38px; }

.client-thumb-placeholder { display: grid; place-items: center; border: 1px solid var(--line); color: var(--teal); font-weight: 800; }

.client-row-name { display: flex; align-items: center; gap: 10px; min-width: 160px; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

table { width: 100%; border-collapse: collapse; min-width: 700px; }

th, td { padding: 13px 15px; border-bottom: 1px solid var(--line); text-align: left; font-size: .86rem; vertical-align: middle; }

th { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; background: var(--surface-soft); }

tr:last-child td { border-bottom: 0; }

tbody tr:hover { background: var(--surface-soft); }

.row-actions { display: flex; gap: 6px; }

.badge, .payment-chip { display: inline-flex; max-width: 100%; padding: 4px 9px; border-radius: 8px; font-size: .76rem; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }

.badge.ativo, .badge.pago, .payment-chip.pago { color: var(--success); background: rgba(22,118,91,.12); }

.badge.pendente, .payment-chip.pendente { color: var(--warning); background: rgba(223,170,102,.18); }

.badge.atrasado, .badge.suspenso, .payment-chip.atrasado { color: var(--danger); background: rgba(185,54,68,.12); }

.badge.cancelado, .badge.inativo { color: var(--muted); background: var(--surface-soft); }

.empty-state { display: grid; justify-items: center; gap: 7px; text-align: center; padding: 34px 18px; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: 8px; }

.empty-state img { width: 44px; opacity: .8; }

.empty-state strong { color: var(--text); }

.skeleton { height: 18px; border-radius: 6px; background: linear-gradient(90deg,var(--surface-soft) 25%,var(--line) 50%,var(--surface-soft) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }

.skeleton-row { height: 60px; margin-bottom: 7px; }

@keyframes shimmer { to { background-position: -200% 0; } }



.modal-overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 15px; background: rgba(5,20,34,.65); }

.modal { width: min(100%,560px); max-height: min(90vh,850px); overflow-y: auto; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 22px 65px rgba(0,0,0,.2); animation: enter .2s ease both; }

.modal h2 { font-size: 1.25rem; margin-bottom: 20px; }

.modal p { color: var(--muted); }

.form-row { margin-bottom: 14px; }

.form-row input, .form-row select, .form-row textarea { width: 100%; }

.two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }

.photo-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.photo-picker input[type=file] { flex: 1; min-width: 160px; max-width: 100%; }

.photo-preview, .photo-placeholder { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--surface-soft); }

.photo-placeholder { display: grid; place-items: center; color: var(--muted); font-size: .75rem; text-align: center; }

.remove-photo-check { display: flex; align-items: center; gap: 6px; width: 100%; font-size: .82rem; }

.remove-photo-check input { min-height: 0; }

.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }

.toast-stack { position: fixed; z-index: 60; right: 18px; bottom: 18px; display: grid; gap: 8px; width: min(350px,calc(100vw - 36px)); }

.toast { padding: 13px 16px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--teal); box-shadow: var(--shadow); animation: enter .2s ease both; }

.toast.error { border-left-color: var(--danger); }

.offline-banner { position: fixed; z-index: 40; top: 0; left: 50%; transform: translateX(-50%); padding: 9px 18px; border-radius: 0 0 8px 8px; background: var(--navy); color: #fff; text-align: center; font-size: .83rem; }

.install-banner { position: fixed; z-index: 40; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 13px; width: max-content; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); font-weight: 700; }

.bottom-nav { display: none; }



@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2,minmax(0,1fr)); } .dashboard-grid { grid-template-columns: 1fr; } }

@media (max-width: 720px) {

  .sidebar { display: none; } .topbar { height: 60px; padding: 0 16px; }

  .topbar .page-title { display: none; }

  .mobile-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; }

  .mobile-brand img { width: 32px; height: 32px; } .mobile-theme { display: inline-flex; }

  .main { padding: 21px 16px calc(92px + env(safe-area-inset-bottom)); }

  .bottom-nav { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(3,1fr); padding: 7px 7px calc(7px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }

  .bottom-nav .nav-item { flex-direction: column; gap: 2px; padding: 6px 1px; min-width: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: .7rem; font-weight: 700; }

  .bottom-nav .nav-item.active { color: var(--teal); background: var(--surface-soft); }

  .bottom-nav .nav-item .icon { width: 21px; height: 21px; }

  .toast-stack { bottom: calc(78px + env(safe-area-inset-bottom)); }

  .install-banner { bottom: calc(78px + env(safe-area-inset-bottom)); font-size: .78rem; }

}

@media (max-width: 480px) {

  .cards { gap: 8px; } .card { padding: 14px; }

  .card .value { font-size: 1.2rem; }

  .section-heading { align-items: flex-start; }

  .two-col { grid-template-columns: 1fr; }

  .modal { padding: 18px; }

}

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

}



.heading-icon { width: 24px; height: 24px; margin-right: 8px; color: var(--teal); vertical-align: -3px; }

.house-code { font-size: .75rem; font-weight: 800; color: var(--teal); white-space: nowrap; }

.house-meta { display: grid; gap: 2px; min-width: 0; }

.house-meta strong { overflow-wrap: anywhere; }

.house-header { display: flex; gap: 14px; align-items: center; margin: 0 0 20px; }

.house-header .client-thumb { width: 58px; height: 58px; }

.house-header h2 { margin: 2px 0; overflow-wrap: anywhere; }

.house-header p { margin: 0; color: var(--muted); font-size: .82rem; }

.house-rate { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 16px; color: var(--muted); font-size: .84rem; }

.house-rate strong { font-size: 1rem; color: var(--text); }

.history-list { display: grid; gap: 7px; max-height: 340px; overflow: auto; }

.history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }

.history-row:last-child { border-bottom: 0; }

.history-row small { display: block; color: var(--muted); }

.history-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; text-align: right; }

.modal-wide { width: min(100%, 660px); }

.code-search { max-width: 280px; }

.selected-house { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

.selected-house strong { margin-right: auto; }

.selected-house .muted { font-size: .82rem; }

.field-note { display: block; margin-top: 5px; color: var(--muted); font-size: .77rem; }

.rate-preview { padding: 10px 12px; margin: 0 0 12px; border-radius: 8px; background: var(--surface-soft); }

.house-open { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; max-width: 100%; min-height: 44px; border: 0; background: transparent; color: var(--text); text-align: left; white-space: normal; font: inherit; }

.house-open:hover strong, .house-open:focus-visible strong { color: var(--teal); text-decoration: underline; }

.house-open .house-meta { text-align: left; }

.house-result .client-card-info { width: 100%; }

.cell-value { min-width: 0; overflow-wrap: anywhere; }

.row-actions { flex-wrap: wrap; }

body.modal-open { overflow: hidden; }

.modal { max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overscroll-behavior: contain; overflow-x: hidden; }

.modal h2, .modal h3, .modal p { overflow-wrap: anywhere; }

.modal-top { display: flex; justify-content: flex-end; position: sticky; top: -24px; z-index: 2; margin: -12px -8px 4px; background: var(--surface); }

.modal-top .icon-button { flex: none; }

.house-info { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 20px 0; }

.house-info > div { min-width: 0; }

.house-info dt { font-size: .77rem; color: var(--muted); margin-bottom: 4px; }

.house-info dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

.house-info > div:last-child { grid-column: 1 / -1; }

.residence-photo { display: grid; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; color: var(--text); background: var(--surface-soft); cursor: zoom-in; }

.residence-photo img { width: 100%; height: 220px; object-fit: contain; }

.residence-photo span { padding: 9px; font-size: .86rem; font-weight: 700; }

.photo-empty { padding: 28px 12px; text-align: center; background: var(--surface-soft); color: var(--muted); border-radius: 8px; }

.history-list { max-height: none; overflow: visible; }

.history-row > div { min-width: 0; overflow-wrap: anywhere; }

.form-actions { flex-wrap: wrap; }

#photo-viewer { margin: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); border: 0; background: #07131b; color: #fff; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; }

#photo-viewer[open] { display: flex; flex-direction: column; }

#photo-viewer::backdrop { background: #07131b; }

.photo-tools { flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 12px; }

.photo-tools strong { margin-right: auto; }

.photo-tools .btn { min-height: 44px; white-space: normal; text-decoration: none; background: #19333f; color: #fff; }

.photo-tools output { min-width: 46px; text-align: center; }

.photo-stage { flex: 1; min-height: 0; width: 100%; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.photo-canvas { display: grid; place-items: center; }

.photo-canvas img { max-width: none; max-height: none; display: block; object-fit: contain; }

.photo-error { padding: 12px; text-align: center; }

@media (max-width: 720px) {

  .main, .view, .toolbar, .section-heading { min-width: 0; }

  .section-heading > div { width: 100%; }

  .section-heading h1 { font-size: 1.5rem; }

  .section-heading > .btn { white-space: normal; }

  .toolbar input, .toolbar select, .modal input, .modal select, .modal textarea { font-size: 16px; min-width: 0; max-width: 100%; }

  .toolbar > input, .toolbar > select { flex: 1 1 140px; width: 100%; }

  .toolbar > .search-field { min-width: 0; flex: 1 1 100%; }

  .code-search { max-width: none; width: 100%; }

  .history-row { align-items: flex-start; }

  .history-actions { min-width: 108px; }

  .selected-house strong { width: 100%; }

  .table-scroll { overflow: visible; border: 0; background: transparent; }

  .responsive-table { width: 100%; min-width: 0; display: block; background: transparent; }

  .responsive-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }

  .responsive-table tbody { display: block; width: 100%; }

  .responsive-table tr { display: block; padding: 6px 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

  .responsive-table td { display: grid; grid-template-columns: minmax(90px,.8fr) minmax(0,1.4fr); gap: 12px; align-items: start; padding: 10px 0; font-size: .9rem; }

  .responsive-table td::before { content: attr(data-label); color: var(--muted); font-size: .79rem; font-weight: 600; }

  .responsive-table td:first-child, .responsive-table td:last-child { display: block; }

  .responsive-table td:first-child::before, .responsive-table td:last-child::before { display: none; }

  .responsive-table .house-open { width: 100%; }

  .responsive-table .btn { min-height: 44px; flex: 1 1 auto; white-space: normal; }

  .responsive-table td:last-child > .cell-value > .btn { width: 100%; }

  .responsive-table .client-row-name { min-width: 0; }

  .responsive-table .payment-chip { border-radius: 8px; }

  .modal-overlay { padding: max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); }

  .modal { padding: 16px; max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }

  .modal-top { top: -16px; }

  .modal .form-actions .btn { min-height: 44px; flex: 1; white-space: normal; }

  .photo-tools strong { width: 100%; margin: 0; text-align: center; }

  .photo-tools .btn { padding: 8px 12px; font-size: .8rem; }

}

@media (max-width: 380px) { .house-info { grid-template-columns: 1fr; } .history-row { flex-wrap: wrap; } }



.quick-installments { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }



/* ---------- Lista compacta de casas ---------- */

.house-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }

.house-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }

.house-row:last-child { border-bottom: 0; }

.house-row:hover { background: var(--surface-soft); }

.house-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 0; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }

.house-row-main .client-thumb { width: 34px; height: 34px; flex: none; }

.house-row-text { min-width: 0; display: grid; gap: 1px; }

.house-row-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }

.house-row-name { font-size: .9rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }

.house-row-code { font-size: .7rem; font-weight: 700; color: var(--teal); white-space: nowrap; }

.house-row-sub { font-size: .77rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.house-row-status { flex: none; font-size: .78rem; font-weight: 700; white-space: nowrap; padding-left: 6px; }

.house-row-status.pago { color: var(--green, #16a34a); }

.house-row-status.atrasado { color: var(--red, #dc2626); }

.house-row-status.pendente { color: var(--muted); }

.cut-badge { flex: none; display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .02em; color: #fff; background: var(--red, #dc2626); padding: 2px 6px; border-radius: 999px; white-space: nowrap; }

.house-menu { position: relative; flex: none; }

.house-menu-btn { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }

.house-menu-btn:hover, .house-menu-btn[aria-expanded="true"] { background: var(--surface-soft); color: var(--text); }

.house-menu-popover { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 140px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 24px rgba(0,0,0,.16); display: grid; gap: 2px; }

.house-menu-popover button { display: block; width: 100%; padding: 8px 10px; border: 0; background: transparent; text-align: left; border-radius: 6px; font-size: .84rem; color: var(--text); cursor: pointer; }

.house-menu-popover button:hover { background: var(--surface-soft); }

.house-menu-popover button.danger { color: var(--red, #dc2626); }



@media (max-width: 720px) {

  .house-row { padding: 7px 10px; gap: 6px; }

  .house-row-main { gap: 8px; }

  .house-row-main .client-thumb { width: 30px; height: 30px; }

  .house-row-name { max-width: 38vw; font-size: .86rem; }

  .house-row-status { font-size: .72rem; padding-left: 4px; }

  .cut-badge { font-size: .58rem; padding: 1px 5px; }

}



/* ===== Maria da Água — camada visual moderna ===== */

:root {

  --mda-navy: #0b2545;

  --mda-teal: #0fb6a8;

  --mda-teal-dark: #0a8f84;

  --mda-aqua: #e8f8f6;

  --mda-radius: 16px;

  --mda-shadow: 0 1px 2px rgba(11,37,69,.05), 0 10px 30px rgba(11,37,69,.07);

  --mda-shadow-hover: 0 2px 4px rgba(11,37,69,.06), 0 18px 40px rgba(11,37,69,.13);

  --mda-ease: cubic-bezier(.2,.8,.2,1);

}

body { -webkit-tap-highlight-color: transparent; }

body:not(.theme-dark) { background: radial-gradient(900px 500px at 100% -10%, #dcf5f1 0%, transparent 60%), linear-gradient(180deg, #f6fbfc 0%, #edf6f8 100%); }



/* ---------- LOGIN ---------- */

#login-screen { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 20px calc(200px + env(safe-area-inset-bottom)); overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #f2fbfa 55%, #e2f5f2 100%); }

#login-screen.hidden { display: none !important; }

body.theme-dark #login-screen { background: linear-gradient(180deg, #07131f 0%, #0b1b2b 60%, #0c2433 100%); }

#login-screen .login-box { position: relative; z-index: 2; width: 100%; max-width: 400px; padding: 32px 28px; border-radius: 24px; background: rgba(255,255,255,.78); border: 1px solid rgba(15,182,168,.14); box-shadow: 0 20px 60px rgba(11,37,69,.10); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: mda-rise .6s var(--mda-ease) both; }

body.theme-dark #login-screen .login-box { background: rgba(12,24,36,.72); border-color: rgba(15,182,168,.18); box-shadow: 0 20px 60px rgba(0,0,0,.4); }

#login-screen .login-logo { display: block; width: 88px; height: 88px; padding: 16px; margin: 0 auto 20px; border-radius: 24px; background: linear-gradient(145deg, #eefbf9, #d4f2ee); box-shadow: 0 10px 24px rgba(15,182,168,.22); animation: mda-float 4s ease-in-out infinite; }

body.theme-dark #login-screen .login-logo { background: linear-gradient(145deg, #12303f, #0d2331); }

#login-screen h1 { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--mda-navy); }

body.theme-dark #login-screen h1 { color: #e9f4f7; }

#login-screen .login-box > p { margin: 4px 0 24px; color: var(--muted, #64748b); }

#login-screen label { display: block; margin: 14px 0 6px; font-weight: 700; font-size: .9rem; }

#login-screen input { width: 100%; height: 50px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line, #dbe4ea); background: var(--surface, #fff); font-size: 16px; transition: border-color .15s, box-shadow .15s; }

#login-screen input:focus { outline: none; border-color: var(--mda-teal); box-shadow: 0 0 0 4px rgba(15,182,168,.16); }

#login-screen .btn.full { width: 100%; height: 52px; margin-top: 22px; font-size: 1rem; }

.login-theme { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; z-index: 3; }

.login-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 210px; pointer-events: none; z-index: 0; }

.login-waves svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }

.login-waves .wave-1 { fill: rgba(15,182,168,.14); animation: mda-wave 7s ease-in-out infinite; }

.login-waves .wave-2 { fill: rgba(15,182,168,.22); animation: mda-wave 9s ease-in-out infinite reverse; }

.login-waves .wave-3 { fill: rgba(15,182,168,.30); animation: mda-wave 11s ease-in-out infinite; }

body.theme-dark .login-waves .wave-1 { fill: rgba(15,182,168,.10); }

body.theme-dark .login-waves .wave-2 { fill: rgba(15,182,168,.16); }

body.theme-dark .login-waves .wave-3 { fill: rgba(15,182,168,.24); }

.login-welcome { position: absolute; left: 28px; bottom: calc(26px + env(safe-area-inset-bottom)); z-index: 1; display: grid; gap: 2px; font-size: .92rem; color: var(--mda-navy); animation: mda-rise .8s .2s var(--mda-ease) both; }

.login-welcome strong { font-size: 1rem; }

body.theme-dark .login-welcome { color: #cfe6ec; }



/* ---------- ESTRUTURA ---------- */

.sidebar { background: linear-gradient(180deg, #0b2545 0%, #0e3157 100%); }

.side-nav .nav-item, .side-footer .nav-item { border-radius: 12px; transition: background .2s, color .2s, transform .15s var(--mda-ease); }

.side-nav .nav-item:hover { transform: translateX(3px); }

.side-nav .nav-item.active { background: linear-gradient(135deg, var(--mda-teal), var(--mda-teal-dark)); color: #fff; box-shadow: 0 8px 20px rgba(15,182,168,.35); }

.topbar { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.75); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--line, #e2e8f0); }

body.theme-dark .topbar { background: rgba(10,22,34,.75); }

.view:not(.hidden) { animation: mda-view-in .35s var(--mda-ease) both; }

.section-heading h1 { font-weight: 800; letter-spacing: -.02em; }

.eyebrow { color: var(--mda-teal-dark); letter-spacing: .12em; font-weight: 800; }

body.theme-dark .eyebrow { color: var(--mda-teal); }



/* ---------- CARDS / PAINÉIS ---------- */

.cards .card { position: relative; overflow: hidden; border: 1px solid var(--line, #e2e8f0); border-radius: var(--mda-radius); background: var(--surface, #fff); box-shadow: var(--mda-shadow); transition: transform .2s var(--mda-ease), box-shadow .2s; animation: mda-rise .45s var(--mda-ease) both; }

.cards .card:nth-child(2) { animation-delay: .05s; } .cards .card:nth-child(3) { animation-delay: .1s; } .cards .card:nth-child(4) { animation-delay: .15s; }

.cards .card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--mda-teal), var(--mda-navy)); }

.cards .card:hover { transform: translateY(-3px); box-shadow: var(--mda-shadow-hover); }

.cards .card .value { font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.panel, .house-list, .empty-state { border-radius: var(--mda-radius); box-shadow: var(--mda-shadow); }

.house-row { transition: background .15s; }

.house-row:active { background: rgba(15,182,168,.08); }

.house-row-main .client-thumb, .client-thumb { border-radius: 10px; }

.chart-bar { border-radius: 6px 6px 2px 2px; transform-origin: bottom; animation: mda-bar .7s var(--mda-ease) both; }

@media (min-width: 721px) {

  .table-scroll { border-radius: var(--mda-radius); box-shadow: var(--mda-shadow); overflow: hidden; background: var(--surface, #fff); }

  .responsive-table tbody tr { transition: background .15s; }

  .responsive-table tbody tr:hover { background: rgba(15,182,168,.05); }

}

@media (max-width: 720px) {

  .responsive-table tr { border-radius: 14px; box-shadow: var(--mda-shadow); }

}



/* ---------- BOTÕES / CAMPOS ---------- */

.btn { position: relative; overflow: hidden; border-radius: 12px; transition: transform .12s var(--mda-ease), box-shadow .2s, filter .2s, background .2s; }

.btn:active { transform: scale(.97); }

.btn.primary { background: linear-gradient(135deg, var(--mda-teal) 0%, var(--mda-teal-dark) 100%); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(15,182,168,.30); }

.btn.primary:hover { filter: brightness(1.05); box-shadow: 0 10px 24px rgba(15,182,168,.40); }

.btn.danger { box-shadow: 0 6px 16px rgba(220,38,38,.20); }

.icon-button { transition: background .2s, transform .12s; border-radius: 12px; }

.icon-button:active { transform: scale(.92); }

.mda-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.45); pointer-events: none; animation: mda-ripple .55s ease-out forwards; }

.btn.secondary .mda-ripple, .nav-item .mda-ripple, .house-row-main .mda-ripple { background: rgba(15,182,168,.20); }

.toolbar input, .toolbar select, .modal input, .modal select, .modal textarea { border-radius: 12px; transition: border-color .15s, box-shadow .15s; }

.toolbar input:focus, .toolbar select:focus, .modal input:focus, .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--mda-teal); box-shadow: 0 0 0 4px rgba(15,182,168,.15); }

.search-field { border-radius: 12px; transition: box-shadow .15s; }

.search-field:focus-within { box-shadow: 0 0 0 4px rgba(15,182,168,.15); }

.payment-chip, .badge, .house-row-status { border-radius: 999px; }



/* ---------- NAVEGAÇÃO MOBILE ---------- */

.bottom-nav { background: rgba(255,255,255,.85); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-top: 1px solid var(--line, #e2e8f0); box-shadow: 0 -6px 24px rgba(11,37,69,.08); }

body.theme-dark .bottom-nav { background: rgba(10,22,34,.85); }

.bottom-nav .nav-item { position: relative; overflow: hidden; border-radius: 14px; transition: color .2s, background .2s; }

.bottom-nav .nav-item .icon { transition: transform .25s var(--mda-ease); }

.bottom-nav .nav-item.active { background: rgba(15,182,168,.12); color: var(--mda-teal-dark); }

body.theme-dark .bottom-nav .nav-item.active { color: var(--mda-teal); }

.bottom-nav .nav-item.active .icon { transform: translateY(-2px) scale(1.08); }



/* ---------- MODAIS / TOASTS ---------- */

.modal-overlay { background: rgba(7,19,31,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: mda-fade .2s ease both; }

.modal { border-radius: 20px; box-shadow: 0 24px 60px rgba(7,19,31,.30); animation: mda-pop .25s var(--mda-ease) both; }

@media (max-width: 720px) {

  .modal-overlay { align-items: flex-end; padding: max(12px, env(safe-area-inset-top)) 0 0; }

  .modal { width: 100%; max-width: 100%; border-radius: 22px 22px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 24px); animation: mda-sheet .32s var(--mda-ease) both; }

  .modal::before { content: ''; display: block; width: 42px; height: 5px; margin: -6px auto 6px; border-radius: 5px; background: var(--line, #d7e0e6); }

}

.toast { border-radius: 14px; box-shadow: 0 12px 30px rgba(7,19,31,.18); animation: mda-toast .3s var(--mda-ease) both; }

.install-banner { border-radius: 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 30px rgba(7,19,31,.18); animation: mda-rise .4s var(--mda-ease) both; }

.skeleton { border-radius: 10px; background: linear-gradient(90deg, rgba(15,182,168,.06) 25%, rgba(15,182,168,.14) 37%, rgba(15,182,168,.06) 63%); background-size: 400% 100%; animation: mda-shimmer 1.4s ease infinite; }



/* ---------- ANIMAÇÕES ---------- */

@keyframes mda-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@keyframes mda-view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@keyframes mda-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@keyframes mda-wave { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(8px) scaleY(.94); } }

@keyframes mda-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@keyframes mda-ripple { to { transform: scale(2.6); opacity: 0; } }

@keyframes mda-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes mda-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

@keyframes mda-sheet { from { transform: translateY(100%); } to { transform: none; } }

@keyframes mda-toast { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

@keyframes mda-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }

}



/* ---------- MENU DE CONFIGURAÇÕES (topo) ---------- */

.settings-menu { position: relative; }

.settings-popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 210px; padding: 8px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f0); box-shadow: 0 16px 40px rgba(7,19,31,.18); display: grid; gap: 2px; transform-origin: top right; animation: mda-pop .18s var(--mda-ease) both; }

.settings-popover.hidden { display: none !important; }

.settings-title { padding: 6px 10px 8px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #64748b); }

.settings-popover button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text, #0f172a); font: inherit; font-weight: 600; text-align: left; cursor: pointer; transition: background .15s, color .15s; }

.settings-popover button:hover, .settings-popover button.active { background: rgba(15,182,168,.10); color: var(--mda-teal-dark); }

body.theme-dark .settings-popover button:hover, body.theme-dark .settings-popover button.active { color: var(--mda-teal); }

.settings-popover .icon { width: 18px; height: 18px; flex: none; }

#settings-btn .icon { transition: transform .4s var(--mda-ease); }

#settings-btn[aria-expanded="true"] { background: rgba(15,182,168,.12); }

#settings-btn[aria-expanded="true"] .icon { transform: rotate(60deg); }



/* ---------- BAIXA RÁPIDA ---------- */

.qp-search { display: grid; gap: 8px; padding: 18px; margin-bottom: 16px; background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f0); }

.qp-search label { font-weight: 800; }

.qp-input-row { display: flex; align-items: stretch; gap: 8px; }

.qp-prefix { display: flex; align-items: center; padding: 0 12px; border-radius: 12px; background: rgba(15,182,168,.10); color: var(--mda-teal-dark); font-weight: 800; letter-spacing: .03em; }

body.theme-dark .qp-prefix { color: var(--mda-teal); }

#qp-code { flex: 1; min-width: 0; height: 56px; padding: 0 14px; font-size: 1.5rem; font-weight: 800; letter-spacing: .08em; border-radius: 12px; border: 1.5px solid var(--line, #dbe4ea); background: var(--surface, #fff); color: var(--text, #0f172a); }

#qp-code:focus { outline: none; border-color: var(--mda-teal); box-shadow: 0 0 0 4px rgba(15,182,168,.16); }

.qp-input-row .btn { min-height: 56px; padding: 0 18px; }

.qp-house { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 12px; background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f0); animation: mda-rise .3s var(--mda-ease) both; }

.qp-house .client-thumb { width: 56px; height: 56px; flex: none; }

.qp-house-info { flex: 1; min-width: 0; display: grid; gap: 2px; }

.qp-house-info strong { font-size: 1.1rem; overflow-wrap: anywhere; }

.qp-house-info .muted { font-size: .85rem; color: var(--muted, #64748b); }

.qp-house-info .cut-badge { justify-self: start; margin-top: 4px; }

.qp-block { padding: 16px; margin-bottom: 12px; border-radius: var(--mda-radius); background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f0); box-shadow: var(--mda-shadow); animation: mda-rise .35s var(--mda-ease) both; }

.qp-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }

.qp-block-head h3 { margin: 0; font-size: 1rem; }

.qp-link { border: 0; background: none; color: var(--mda-teal-dark); font: inherit; font-weight: 700; cursor: pointer; padding: 4px; }

.qp-items { display: grid; gap: 8px; }

.qp-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line, #e2e8f0); cursor: pointer; transition: border-color .15s, background .15s; }

.qp-item:has(input:checked) { border-color: var(--mda-teal); background: rgba(15,182,168,.07); }

.qp-item input { width: 22px; height: 22px; accent-color: var(--mda-teal); flex: none; }

.qp-item span { flex: 1; min-width: 0; display: grid; }

.qp-item small { color: var(--muted, #64748b); }

.qp-item.atrasado small { color: var(--red, #dc2626); font-weight: 600; }

.qp-item b { font-variant-numeric: tabular-nums; }

.qp-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.qp-methods button { min-height: 48px; border-radius: 12px; border: 1.5px solid var(--line, #e2e8f0); background: var(--surface, #fff); color: var(--text, #0f172a); font: inherit; font-weight: 700; cursor: pointer; transition: all .15s; }

.qp-methods button.active { border-color: var(--mda-teal); background: linear-gradient(135deg, var(--mda-teal), var(--mda-teal-dark)); color: #fff; box-shadow: 0 6px 16px rgba(15,182,168,.3); }

.qp-date { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

.qp-date input { height: 44px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--line, #e2e8f0); background: var(--surface, #fff); color: var(--text, #0f172a); }

#qp-confirm { width: 100%; min-height: 58px; font-size: 1.05rem; margin-bottom: 12px; }

.qp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

.qp-actions .btn { flex: 1; min-height: 46px; }

.qp-recent-title { font-size: .95rem; margin: 18px 0 8px; }

.qp-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.qp-recent li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.2); font-size: .88rem; animation: mda-rise .3s var(--mda-ease) both; }

.qp-recent li small { color: var(--muted, #64748b); white-space: nowrap; }

@media (max-width: 480px) {

  .qp-methods { grid-template-columns: repeat(2, 1fr); }

  .qp-prefix { padding: 0 8px; font-size: .85rem; }

  #qp-code { font-size: 1.25rem; }

  .qp-input-row .btn { padding: 0 12px; }

}




/* qp-methods-row: 4 formas de pagamento sempre lado a lado */

.qp-methods { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; }

@media (max-width: 480px) {

  .qp-methods button { min-height: 46px; padding: 0 4px; font-size: .82rem; letter-spacing: -.01em; }

}


/* bottom-nav-4b: 4 itens sempre lado a lado */
.app .bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; flex-wrap: nowrap !important; }
.app .bottom-nav > .nav-item { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; padding-left: 2px !important; padding-right: 2px !important; }
.app .bottom-nav > .nav-item span { display: block; max-width: 100%; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* qp-fit: campo do código + botão sempre cabendo na tela */
.qp-search { overflow: hidden; }
.qp-input-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.qp-prefix { padding: 0 12px; font-size: 1.1rem; }
#qp-code { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; height: 50px; font-size: 1.25rem; letter-spacing: .04em; }
.qp-input-row .btn { min-height: 50px; padding: 0 16px; white-space: nowrap; }
@media (max-width: 480px) {
  .qp-search { padding: 14px; }
  .qp-prefix { padding: 0 10px; }
  #qp-code { font-size: 1.15rem; padding: 0 10px; }
  .qp-input-row .btn { padding: 0 12px; }
}

/* Maria da Agua — Professional UI 2026 */
:root {
  --pro-bg:#f3f6fa; --pro-surface:#ffffff; --pro-surface-2:#f8fafc;
  --pro-ink:#102437; --pro-muted:#6b7e90; --pro-line:#dfe7ee;
  --pro-navy:#0a223d; --pro-navy-2:#123b62; --pro-teal:#0a9f92;
  --pro-teal-2:#16b8aa; --pro-success:#13835f; --pro-warning:#b66a14; --pro-danger:#c2414f;
  --pro-r-sm:10px; --pro-r:16px; --pro-r-lg:22px;
  --pro-shadow-sm:0 1px 2px rgba(10,34,61,.05),0 4px 14px rgba(10,34,61,.04);
  --pro-shadow:0 10px 34px rgba(10,34,61,.08);
  --pro-focus:0 0 0 4px rgba(10,159,146,.14);
}
body.theme-dark {
  --pro-bg:#07131f; --pro-surface:#0e2030; --pro-surface-2:#132a3c;
  --pro-ink:#eef6fb; --pro-muted:#9fb3c3; --pro-line:#234055;
  --pro-shadow-sm:0 1px 2px rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.12);
  --pro-shadow:0 14px 38px rgba(0,0,0,.24);
}
html { background:var(--pro-bg); }
body {
  background:var(--pro-bg)!important; color:var(--pro-ink);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:14px; letter-spacing:-.005em;
}
.app { background:var(--pro-bg); }
.sidebar {
  width:252px; padding:18px 14px; background:linear-gradient(180deg,#081f38 0%,#0b2b4a 58%,#09233d 100%)!important;
  border-right:1px solid rgba(255,255,255,.06); box-shadow:12px 0 40px rgba(5,23,39,.08);
}
.brand { min-height:70px; padding:8px 10px 22px; gap:12px; font-size:1.02rem; letter-spacing:-.01em; }
.brand img { width:44px; height:44px; padding:7px; border-radius:13px; background:rgba(255,255,255,.09); }
.brand span { display:grid; line-height:1.15; }
.brand span::after { content:"GESTÃO RESIDENCIAL"; margin-top:5px; color:#7fb5c4; font-size:.57rem; letter-spacing:.15em; font-weight:800; }
.side-nav { gap:5px; }
.sidebar .nav-item {
  min-height:46px; padding:0 14px; border-radius:11px; color:#afc5d3; font-weight:650;
}
.sidebar .nav-item:hover { transform:none; color:#fff; background:rgba(255,255,255,.07); }
.sidebar .nav-item.active {
  color:#fff; background:linear-gradient(135deg,rgba(20,184,166,.98),rgba(10,145,137,.98));
  box-shadow:0 8px 22px rgba(5,183,166,.2); inset:0;
}
.sidebar .nav-item.active::before { content:""; width:4px; height:22px; margin-left:-7px; border-radius:99px; background:rgba(255,255,255,.72); }
.side-footer { padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
.workspace { background:var(--pro-bg); }
.topbar {
  height:72px; padding:0 clamp(22px,3vw,44px); background:color-mix(in srgb,var(--pro-surface) 92%,transparent)!important;
  border-bottom:1px solid var(--pro-line); box-shadow:0 1px 0 rgba(10,34,61,.02);
}
.page-title { color:var(--pro-muted); font-size:.82rem; font-weight:750; text-transform:uppercase; letter-spacing:.11em; }
.top-actions { gap:6px; }
.icon-button { width:40px; height:40px; border-radius:11px; color:var(--pro-muted); }
.icon-button:hover { color:var(--pro-ink); background:var(--pro-surface-2); }
.main { max-width:1480px; padding:34px clamp(24px,3.2vw,48px) 64px; }
.section-heading { margin-bottom:22px; }
.section-heading h1 { margin-top:5px; color:var(--pro-ink); font-size:clamp(1.6rem,2vw,2rem); font-weight:780; letter-spacing:-.035em; }
.section-heading h2 { color:var(--pro-ink); }
.eyebrow { color:var(--pro-teal)!important; font-size:.66rem; letter-spacing:.13em; }
.muted { color:var(--pro-muted); }
.btn { min-height:42px; padding:9px 15px; border-radius:10px; font-weight:720; box-shadow:none; }
.btn.primary { background:var(--pro-teal)!important; box-shadow:0 5px 14px rgba(10,159,146,.18)!important; }
.btn.primary:hover { filter:none; background:#078b80!important; box-shadow:0 7px 18px rgba(10,159,146,.24)!important; }
.btn.secondary { background:var(--pro-surface-2); color:var(--pro-ink); border:1px solid var(--pro-line); }
.btn.danger { background:rgba(194,65,79,.08); color:var(--pro-danger); border:1px solid rgba(194,65,79,.16); }
.cards { gap:16px; }
.cards .card {
  min-height:128px; padding:20px 21px; border:1px solid var(--pro-line)!important;
  border-radius:var(--pro-r)!important; background:var(--pro-surface)!important;
  box-shadow:var(--pro-shadow-sm)!important; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.cards .card::before { left:20px!important; right:20px!important; top:0!important; bottom:auto!important; width:auto!important; height:3px; border-radius:0 0 99px 99px; background:var(--pro-teal)!important; }
.cards .card:nth-child(2)::before { background:#4d7fa7!important; }
.cards .card:nth-child(3)::before { background:var(--pro-success)!important; }
.cards .card:nth-child(4)::before { background:var(--pro-warning)!important; }
.cards .card:hover { transform:translateY(-2px); border-color:#cbd9e3!important; box-shadow:var(--pro-shadow)!important; }
.card .label { color:var(--pro-muted); font-size:.76rem; font-weight:720; text-transform:uppercase; letter-spacing:.055em; }
.card .value { margin-top:13px; color:var(--pro-ink); font-size:clamp(1.45rem,2.1vw,1.85rem); font-weight:790; letter-spacing:-.04em; }
.card .value.green { color:var(--pro-success); }
.card .value.amber { color:var(--pro-warning); }
.dashboard-grid { gap:18px; margin-top:18px; }
.panel {
  padding:22px; border:1px solid var(--pro-line); border-radius:var(--pro-r)!important;
  background:var(--pro-surface); box-shadow:var(--pro-shadow-sm);
}
.panel-heading { margin-bottom:18px; }
.panel-heading h2 { color:var(--pro-ink); font-size:1rem; font-weight:760; letter-spacing:-.015em; }
.panel-heading p { color:var(--pro-muted); }
.toolbar {
  margin-bottom:16px; padding:12px; gap:10px; border:1px solid var(--pro-line); border-radius:14px;
  background:var(--pro-surface); box-shadow:var(--pro-shadow-sm);
}
input,select,textarea {
  border-color:var(--pro-line); border-radius:10px; background:var(--pro-surface); color:var(--pro-ink);
}
.toolbar input,.toolbar select { min-height:42px; background:var(--pro-surface-2); }
input:focus,select:focus,textarea:focus,.search-field:focus-within {
  border-color:var(--pro-teal)!important; box-shadow:var(--pro-focus)!important; outline:none;
}
.search-field { min-height:42px; border-radius:10px; }
.search-field .icon { top:12px; color:#8294a4; }
.search-field input { border:1px solid var(--pro-line); background:var(--pro-surface-2); }
.table-scroll {
  border:1px solid var(--pro-line)!important; border-radius:var(--pro-r)!important;
  background:var(--pro-surface)!important; box-shadow:var(--pro-shadow-sm)!important;
}
table { color:var(--pro-ink); }
th {
  height:46px; padding:11px 15px; color:var(--pro-muted); background:var(--pro-surface-2);
  font-size:.67rem; letter-spacing:.08em; border-bottom:1px solid var(--pro-line);
}
td { padding:14px 15px; border-bottom:1px solid var(--pro-line); font-size:.84rem; }
tbody tr:hover { background:rgba(10,159,146,.035)!important; }
.badge,.payment-chip { padding:5px 9px; border-radius:999px!important; font-size:.72rem; font-weight:750; }
.house-list {
  overflow:visible; border:1px solid var(--pro-line)!important; border-radius:var(--pro-r)!important;
  background:var(--pro-surface)!important; box-shadow:var(--pro-shadow-sm)!important;
}
.house-row {
  min-height:62px; padding:9px 14px!important; border-bottom:1px solid var(--pro-line)!important;
  transition:background .15s ease,transform .15s ease;
}
.house-row:hover { background:rgba(10,159,146,.035)!important; }
.house-row-main { gap:11px!important; }
.house-row-main .client-thumb { width:38px!important; height:38px!important; border-radius:11px!important; }
.house-row-name { color:var(--pro-ink); font-size:.88rem; font-weight:730; }
.house-row-code { color:var(--pro-teal); font-size:.68rem; letter-spacing:.025em; }
.house-row-sub { color:var(--pro-muted); font-size:.75rem; }
.house-row-status { padding:5px 9px!important; border-radius:999px; font-size:.7rem!important; }
.house-row-status.pago { color:var(--pro-success); background:rgba(19,131,95,.09); }
.house-row-status.atrasado { color:var(--pro-danger); background:rgba(194,65,79,.09); }
.house-row-status.pendente { color:var(--pro-warning); background:rgba(182,106,20,.10); }
.house-menu-btn { border-radius:9px; }
.client-card { border:1px solid var(--pro-line); background:var(--pro-surface-2); border-radius:12px; }
.client-thumb { border-radius:11px!important; }
.selected-house { border-color:var(--pro-line); border-radius:12px; background:var(--pro-surface); box-shadow:var(--pro-shadow-sm); }
.empty-state { border:1px dashed #cbd8e2; border-radius:var(--pro-r)!important; background:var(--pro-surface); box-shadow:none; }
.empty-state img { width:38px; opacity:.65; }
.chart { min-height:230px; }
.chart-legend { margin-bottom:18px; color:var(--pro-muted); font-size:.75rem; }
.chart-legend i { width:8px; height:8px; border-radius:99px; background:var(--pro-teal); }
.chart-legend .pending i { background:#d79a4b; }
.chart-bars { height:178px; gap:10px; border-bottom:1px solid var(--pro-line); }
.chart-bar {
  width:min(34%,24px); border-radius:7px 7px 2px 2px;
  background:linear-gradient(180deg,#14b8a6,#0a8f84)!important;
}
.chart-bar.pending { background:linear-gradient(180deg,#e4b56f,#c78028)!important; }
.chart-month label { color:var(--pro-muted); font-size:.66rem; letter-spacing:.04em; }
.modal-overlay { background:rgba(3,15,27,.52)!important; backdrop-filter:blur(8px); }
.modal {
  border:1px solid var(--pro-line)!important; border-radius:20px!important; background:var(--pro-surface)!important;
  color:var(--pro-ink); box-shadow:0 28px 80px rgba(3,15,27,.28)!important;
}
.modal-top { background:var(--pro-surface)!important; }
.modal h2 { color:var(--pro-ink); font-size:1.25rem; letter-spacing:-.025em; }
.house-header { padding-bottom:16px; border-bottom:1px solid var(--pro-line); }
.house-info { gap:12px 18px; }
.house-info dt { color:var(--pro-muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.house-info dd { color:var(--pro-ink); font-weight:550; }
.residence-photo { border-color:var(--pro-line); border-radius:14px; background:var(--pro-surface-2); }
#login-screen {
  background:
    radial-gradient(700px 420px at 15% 0%,rgba(22,184,170,.12),transparent 62%),
    linear-gradient(145deg,#f8fbfd 0%,#eef5f8 100%)!important;
}
body.theme-dark #login-screen { background:linear-gradient(145deg,#06121e,#0a1c2b)!important; }
#login-screen .login-box {
  max-width:420px; padding:34px; border:1px solid rgba(10,34,61,.09)!important; border-radius:22px!important;
  background:rgba(255,255,255,.94)!important; box-shadow:0 24px 70px rgba(10,34,61,.12)!important; backdrop-filter:blur(18px);
}
body.theme-dark #login-screen .login-box { background:rgba(14,32,48,.94)!important; border-color:var(--pro-line)!important; }
#login-screen .login-logo {
  width:72px; height:72px; padding:12px; margin:0 auto 18px; border-radius:18px;
  background:#e9f7f5!important; box-shadow:none!important; animation:none!important;
}
#login-screen h1 { color:var(--pro-ink)!important; font-size:1.8rem; text-align:center; }
#login-screen .login-box>p { text-align:center; color:var(--pro-muted); margin-bottom:26px; }
#login-screen label { color:var(--pro-ink); font-size:.8rem; }
#login-screen input { height:48px; border-color:var(--pro-line); border-radius:10px; background:var(--pro-surface-2); }
#login-screen .btn.full { height:48px; margin-top:18px; }
.login-waves { opacity:.42; }
.login-welcome { color:var(--pro-muted)!important; font-size:.8rem; }
.settings-popover {
  border:1px solid var(--pro-line)!important; border-radius:14px!important; background:var(--pro-surface)!important;
  box-shadow:0 18px 50px rgba(5,22,38,.18)!important;
}
.settings-popover button { color:var(--pro-ink)!important; }
.qp-search,.qp-house,.qp-block {
  border:1px solid var(--pro-line)!important; border-radius:var(--pro-r)!important;
  background:var(--pro-surface)!important; box-shadow:var(--pro-shadow-sm)!important;
}
#qp-code { border-color:var(--pro-line)!important; background:var(--pro-surface-2)!important; color:var(--pro-ink)!important; }
.qp-prefix { background:rgba(10,159,146,.09)!important; color:var(--pro-teal)!important; }
.qp-item { border-color:var(--pro-line)!important; border-radius:11px; }
.qp-item:has(input:checked) { border-color:var(--pro-teal)!important; background:rgba(10,159,146,.06)!important; }
.qp-methods button { border-color:var(--pro-line)!important; border-radius:10px; background:var(--pro-surface-2)!important; color:var(--pro-ink)!important; }
.qp-methods button.active { border-color:var(--pro-teal)!important; background:var(--pro-teal)!important; color:#fff!important; box-shadow:none!important; }
.toast { border:1px solid var(--pro-line); border-left:4px solid var(--pro-teal); border-radius:12px; background:var(--pro-surface); box-shadow:var(--pro-shadow); }
.install-banner { border-color:var(--pro-line); border-radius:14px; background:var(--pro-surface); box-shadow:var(--pro-shadow); }
.offline-banner { background:var(--pro-navy); }
body.theme-dark .cards .card,
body.theme-dark .panel,
body.theme-dark .house-list,
body.theme-dark .table-scroll { border-color:var(--pro-line)!important; }
body.theme-dark .toolbar input,
body.theme-dark .toolbar select,
body.theme-dark .search-field input { background:var(--pro-surface-2); }
@media (max-width:1100px) {
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .topbar { height:62px; padding:0 14px; }
  .mobile-brand { gap:9px; color:var(--pro-ink); font-size:.9rem; }
  .mobile-brand img { width:34px; height:34px; padding:5px; border-radius:10px; background:rgba(10,159,146,.08); }
  .main { padding:20px 14px calc(92px + env(safe-area-inset-bottom)); }
  .section-heading { margin-bottom:16px; gap:10px; }
  .section-heading h1 { font-size:1.45rem; }
  .cards { gap:10px; }
  .cards .card { min-height:108px; padding:16px; border-radius:14px!important; }
  .card .label { font-size:.65rem; letter-spacing:.04em; }
  .card .value { margin-top:9px; font-size:1.22rem; }
  .dashboard-grid { gap:12px; margin-top:12px; }
  .panel { padding:16px; border-radius:14px!important; }
  .toolbar { padding:10px; border-radius:12px; }
  .house-list { border-radius:14px!important; }
  .house-row { min-height:58px; padding:8px 10px!important; }
  .house-row-name { max-width:40vw; font-size:.84rem; }
  .bottom-nav {
    padding:7px 7px calc(7px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--pro-surface) 96%,transparent)!important;
    border-top:1px solid var(--pro-line); box-shadow:0 -8px 28px rgba(5,22,38,.09);
  }
  .bottom-nav .nav-item { min-height:54px; border-radius:11px!important; color:var(--pro-muted); }
  .bottom-nav .nav-item.active { color:var(--pro-teal)!important; background:rgba(10,159,146,.09)!important; }
  .modal { border-radius:20px 20px 0 0!important; }
}
@media (max-width:430px) {
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cards .card { min-height:102px; padding:14px; }
  .card .value { font-size:1.12rem; }
  .house-row-status { max-width:92px; overflow:hidden; text-overflow:ellipsis; }
  .qp-search { padding:13px!important; }
  .qp-input-row { gap:6px!important; }
  .qp-prefix { padding:0 9px!important; }
}
@media (hover:none) {
  .cards .card:hover { transform:none; box-shadow:var(--pro-shadow-sm)!important; }
}
@media (prefers-reduced-motion:reduce) {
  .cards .card,.view:not(.hidden),.modal,.toast { animation:none!important; transition:none!important; }
}

/* Performance + responsive hardening */
.view.hidden { content-visibility:hidden; }
.cards .card,.panel,.house-list,.table-scroll,.qp-block { contain:layout paint style; }
.house-row,.responsive-table tbody tr { content-visibility:auto; contain-intrinsic-size:60px; }
.client-thumb { content-visibility:auto; }
img { max-width:100%; }
button,input,select,textarea { touch-action:manipulation; }
.workspace,.main,.view,.panel,.toolbar,.table-scroll { min-width:0; }
.cell-value,.house-row-text,.qp-house-info { min-width:0; overflow-wrap:anywhere; }
@media (min-width:721px) {
  .responsive-table thead { position:sticky; top:72px; z-index:4; }
}

@media (max-width:720px) {
  .topbar,.bottom-nav,#login-screen .login-box,.modal-overlay { backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
  .login-waves { display:none; }
  .toolbar { display:grid; grid-template-columns:1fr; }
  .toolbar>*,.toolbar>.search-field,.toolbar input,.toolbar select { width:100%; max-width:none; min-width:0; }
  .section-heading>.btn { width:100%; justify-content:center; }
  .chart-bars { gap:5px; }
  .chart-bar { width:min(38%,18px); }
  .responsive-table tr { content-visibility:auto; contain-intrinsic-size:240px; }
  .toast-stack { left:12px; right:12px; width:auto; }
  .install-banner { width:calc(100vw - 24px); justify-content:center; flex-wrap:wrap; }
}
@media (max-width:380px) {
  .cards { grid-template-columns:1fr 1fr; gap:8px; }
  .cards .card { padding:12px; min-height:94px; }
  .card .label { font-size:.61rem; }
  .card .value { font-size:1.02rem; }
  .bottom-nav .nav-item span { font-size:.64rem!important; }
}

/* Offline-first status */
.sync-status {
  display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 11px;
  border:1px solid var(--pro-line); border-radius:999px; background:var(--pro-surface-2);
  color:var(--pro-muted); font:inherit; font-size:.72rem; font-weight:720; white-space:nowrap;
}
.sync-status:hover { color:var(--pro-ink); background:var(--pro-surface); }
.sync-dot { width:8px; height:8px; border-radius:50%; background:var(--pro-success); box-shadow:0 0 0 3px rgba(19,131,95,.10); }
.sync-status.has-pending .sync-dot { background:var(--pro-warning); box-shadow:0 0 0 3px rgba(182,106,20,.11); }
.sync-status.is-offline .sync-dot { background:var(--pro-danger); box-shadow:0 0 0 3px rgba(194,65,79,.10); }
.sync-status.is-syncing .sync-dot { background:var(--pro-teal); animation:sync-pulse 1s ease-in-out infinite; }
@keyframes sync-pulse { 50% { opacity:.35; transform:scale(.75); } }

@media (max-width:720px) {
  .sync-status { min-height:34px; padding:0 9px; font-size:.66rem; }
  .sync-status span:last-child { max-width:90px; overflow:hidden; text-overflow:ellipsis; }
  .offline-banner {
    top:auto; bottom:calc(72px + env(safe-area-inset-bottom)); left:12px; right:12px;
    transform:none; border-radius:12px; padding:10px 12px; font-size:.75rem;
    box-shadow:0 10px 30px rgba(5,22,38,.18);
  }
}
@media (max-width:390px) {
  .sync-status span:last-child { display:none; }
  .sync-status { width:34px; padding:0; justify-content:center; }
}

.sync-status.is-error .sync-dot { background:var(--pro-danger); box-shadow:0 0 0 3px rgba(194,65,79,.10); }
.sync-status.is-error { color:var(--pro-danger); border-color:rgba(194,65,79,.24); background:rgba(194,65,79,.06); }

/* Maria da Água — UI Pro 2.0 */
:root {
  --ui-bg:#f4f7fa; --ui-surface:#ffffff; --ui-surface-2:#f8fafc; --ui-surface-3:#eef4f7;
  --ui-ink:#102437; --ui-muted:#6d7f90; --ui-soft:#94a3b1; --ui-line:#dfe8ee;
  --ui-navy:#0b2741; --ui-navy-2:#071d32; --ui-teal:#089b8e; --ui-teal-2:#0db6a7;
  --ui-blue:#3777a7; --ui-green:#168760; --ui-amber:#bd7a25; --ui-red:#c44957;
  --ui-shadow:0 14px 40px rgba(14,42,64,.075); --ui-shadow-lg:0 30px 90px rgba(5,29,48,.16);
  --ui-radius:20px; --ui-radius-sm:13px;
}
body.theme-dark {
  --ui-bg:#07131f; --ui-surface:#0e2030; --ui-surface-2:#102536; --ui-surface-3:#142b3e;
  --ui-ink:#ecf5f8; --ui-muted:#9eb0bd; --ui-soft:#7e94a5; --ui-line:#233c4e;
  --ui-navy:#061827; --ui-navy-2:#04111c; --ui-shadow:0 18px 55px rgba(0,0,0,.24);
}
html,body { background:var(--ui-bg); }
body { color:var(--ui-ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
.icon { stroke-width:1.8; }
.btn { min-height:44px; border-radius:12px; font-weight:720; letter-spacing:-.01em; }
.btn.primary { background:linear-gradient(135deg,var(--ui-teal),#078579)!important; box-shadow:0 8px 20px rgba(8,155,142,.20)!important; }
.btn.primary:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(8,155,142,.26)!important; }
.btn.secondary { background:var(--ui-surface-2); border-color:var(--ui-line); color:var(--ui-ink); }
.icon-button { border-radius:12px; border:1px solid transparent; }
.icon-button:hover { background:var(--ui-surface-3); border-color:var(--ui-line); }

/* Login */
#login-screen {
  min-height:100dvh; padding:0!important; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(circle at 8% 8%,rgba(18,184,169,.10),transparent 28%),
    radial-gradient(circle at 92% 92%,rgba(55,119,167,.08),transparent 28%),
    var(--ui-bg)!important;
}
#login-screen.hidden { display:none!important; }
.login-theme { position:fixed!important; top:22px; right:22px; z-index:8; background:rgba(255,255,255,.72); border:1px solid rgba(16,36,55,.08); box-shadow:0 8px 24px rgba(12,39,63,.08); }
body.theme-dark .login-theme { background:rgba(14,32,48,.78); border-color:var(--ui-line); }
.login-shell {
  width:min(1180px,calc(100vw - 48px)); min-height:min(720px,calc(100dvh - 48px));
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(400px,.9fr);
  border:1px solid rgba(16,52,77,.08); border-radius:30px; overflow:hidden;
  background:var(--ui-surface); box-shadow:0 34px 100px rgba(11,39,65,.12);
}
.login-showcase {
  position:relative; display:flex; flex-direction:column; padding:44px 48px;
  color:#fff; overflow:hidden;
  background:
    radial-gradient(circle at 78% 18%,rgba(22,184,169,.30),transparent 26%),
    linear-gradient(150deg,#08243d 0%,#0a3653 55%,#0b4a5b 100%);
}
.login-showcase::before,.login-showcase::after {
  content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.08); pointer-events:none;
}
.login-showcase::before { width:460px; height:460px; right:-210px; top:70px; }
.login-showcase::after { width:280px; height:280px; right:-90px; top:160px; }
.login-brandline { position:relative; z-index:1; display:flex; align-items:center; gap:13px; }
.login-brandmark { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.12); }
.login-brandmark img { width:31px; height:31px; filter:brightness(0) invert(1); }
.login-brandline>span:last-child { display:grid; gap:1px; }
.login-brandline strong { font-size:1rem; letter-spacing:.12em; }
.login-brandline small { color:rgba(255,255,255,.63); font-size:.72rem; }

.login-showcase-copy { position:relative; z-index:1; margin:auto 0 36px; max-width:560px; }
.login-kicker { display:inline-flex; margin-bottom:16px; color:#7ee7da; font-size:.7rem; font-weight:800; letter-spacing:.16em; }
.login-showcase-copy h2 { margin:0; color:#fff; font-size:clamp(2.35rem,4vw,4.4rem); line-height:1.01; letter-spacing:-.055em; font-weight:760; }
.login-showcase-copy h2 span { color:#83e7dc; }
.login-showcase-copy p { max-width:500px; margin:24px 0 0; color:rgba(235,250,252,.68); font-size:1rem; line-height:1.7; }
.login-feature-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.login-feature { min-height:132px; padding:18px; display:grid; grid-template-columns:42px 1fr; grid-template-rows:auto auto; column-gap:12px; border:1px solid rgba(255,255,255,.10); border-radius:18px; background:rgba(255,255,255,.07); }
.login-feature>span { grid-row:1/3; width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:rgba(122,231,219,.13); color:#8de9df; }
.login-feature>span .icon { width:20px; height:20px; }
.login-feature strong { align-self:end; font-size:.88rem; }
.login-feature small { align-self:start; margin-top:4px; color:rgba(255,255,255,.58); line-height:1.45; font-size:.71rem; }
.login-showcase-foot { position:relative; z-index:1; margin-top:22px; display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.55); font-size:.7rem; }
.status-led { width:7px; height:7px; border-radius:50%; background:#54e0ad; box-shadow:0 0 0 5px rgba(84,224,173,.09); }
.login-access { display:grid; align-content:center; justify-items:center; padding:44px; background:var(--ui-surface); }
#login-screen .login-box { width:min(100%,400px); max-width:none; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; }
.login-mobile-brand { display:none; align-items:center; gap:12px; margin-bottom:34px; }
.login-mobile-brand .login-logo { width:48px!important; height:48px!important; margin:0!important; padding:8px!important; border-radius:14px!important; }
.login-mobile-brand>span { display:grid; gap:1px; }
.login-mobile-brand strong { font-size:.92rem; color:var(--ui-ink); }
.login-mobile-brand small { color:var(--ui-muted); font-size:.7rem; }
.login-heading>span { display:inline-block; margin-bottom:10px; color:var(--ui-teal); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
#login-screen .login-heading h1 { margin:0!important; text-align:left!important; color:var(--ui-ink)!important; font-size:2rem!important; line-height:1.15; letter-spacing:-.045em; }
#login-screen .login-heading p { margin:10px 0 30px!important; text-align:left!important; color:var(--ui-muted); line-height:1.55; }
.login-field { display:grid; gap:8px; margin-bottom:17px; }
#login-screen .login-field label { color:var(--ui-ink); font-size:.76rem; font-weight:720; }
#login-screen .login-field input { width:100%; height:52px; padding:0 15px; border:1px solid var(--ui-line); border-radius:13px; background:var(--ui-surface-2); color:var(--ui-ink); transition:border-color .18s,box-shadow .18s,background .18s; }
#login-screen .login-field input::placeholder { color:var(--ui-soft); }
#login-screen .login-field input:focus { background:var(--ui-surface); border-color:var(--ui-teal)!important; }
.login-submit { height:52px!important; margin-top:8px!important; display:flex!important; justify-content:space-between!important; padding:0 17px!important; }
.login-submit .icon { width:18px; height:18px; }
.login-security { margin-top:18px; display:flex; justify-content:center; align-items:center; gap:7px; color:var(--ui-muted); font-size:.68rem; }
.login-security .icon { width:14px; height:14px; color:var(--ui-teal); }
.login-copyright { align-self:end; margin:34px 0 -10px; color:var(--ui-soft); font-size:.66rem; letter-spacing:.03em; }

/* App shell */
.app { background:var(--ui-bg); }
.sidebar {
  width:264px!important; padding:20px 14px 16px!important;
  background:linear-gradient(180deg,#071d31 0%,#092943 56%,#082237 100%)!important;
  border-right:1px solid rgba(255,255,255,.04);
}
.brand { min-height:66px; padding:0 10px 18px!important; display:flex!important; align-items:center; gap:12px!important; border-bottom:1px solid rgba(255,255,255,.07); }
.brand-mark { width:43px; height:43px; flex:0 0 auto; display:grid; place-items:center; border-radius:13px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); }
.brand-mark img { width:28px!important; height:28px!important; margin:0!important; filter:brightness(0) invert(1); }
.brand-copy { display:grid; gap:1px; }
.brand-copy strong { color:#fff; font-size:.93rem; letter-spacing:.11em; }
.brand-copy small { color:rgba(255,255,255,.47); font-size:.68rem; }
.side-nav { padding-top:18px; gap:5px!important; }
.sidebar .nav-item { min-height:46px; padding:0 13px!important; gap:12px!important; border-radius:12px!important; color:rgba(232,244,249,.61)!important; font-size:.82rem; font-weight:650; }
.sidebar .nav-item .icon { width:18px!important; height:18px!important; }
.sidebar .nav-item:hover { background:rgba(255,255,255,.06)!important; color:#fff!important; }
.sidebar .nav-item.active { background:linear-gradient(135deg,rgba(13,182,167,.22),rgba(13,182,167,.10))!important; color:#8af0e4!important; box-shadow:inset 0 0 0 1px rgba(98,230,215,.11)!important; }
.sidebar .nav-item.active::before { content:""; width:3px; height:20px; border-radius:99px; background:#42dac9; position:absolute; left:0; }
.side-footer { padding-top:14px!important; border-top:1px solid rgba(255,255,255,.07)!important; }
.workspace { background:var(--ui-bg); }
.topbar {
  height:76px!important; padding:0 clamp(24px,3vw,46px)!important; z-index:25;
  background:color-mix(in srgb,var(--ui-bg) 91%,transparent)!important; border-bottom:1px solid color-mix(in srgb,var(--ui-line) 80%,transparent)!important;
  backdrop-filter:blur(18px) saturate(150%)!important; -webkit-backdrop-filter:blur(18px) saturate(150%)!important;
}
.page-title { color:var(--ui-ink)!important; font-size:.82rem!important; font-weight:760!important; letter-spacing:-.01em; }
.top-actions { gap:8px!important; }
.top-actions .icon-button { width:40px; height:40px; color:var(--ui-muted); }
.main { max-width:1600px!important; padding:32px clamp(24px,3vw,46px) 56px!important; }
.view:not(.hidden) { animation:ui-enter .25s ease both!important; }
@keyframes ui-enter { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }

/* Dashboard */
.dashboard-hero {
  position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,520px);
  gap:28px; align-items:center; padding:32px; margin-bottom:22px; border:1px solid rgba(12,82,98,.08);
  border-radius:26px; color:#fff; box-shadow:0 18px 44px rgba(7,40,58,.12);
  background:
    radial-gradient(circle at 84% 18%,rgba(59,224,204,.18),transparent 24%),
    linear-gradient(135deg,#0a2a45 0%,#0b4155 62%,#0b5660 100%);
}
.dashboard-hero::after { content:""; position:absolute; width:300px; height:300px; border-radius:50%; right:-150px; bottom:-190px; border:1px solid rgba(255,255,255,.10); box-shadow:0 0 0 60px rgba(255,255,255,.025); }
.dashboard-hero-copy { position:relative; z-index:1; }
.dashboard-hero .eyebrow { color:#7fe8dd!important; letter-spacing:.14em; font-size:.66rem; }
.dashboard-hero h1 { max-width:680px; margin:8px 0 10px; color:#fff!important; font-size:clamp(1.7rem,2.8vw,2.7rem)!important; line-height:1.08; letter-spacing:-.045em; }
.dashboard-hero-copy>p { max-width:630px; margin:0; color:rgba(237,250,252,.66); line-height:1.6; font-size:.9rem; }
.dashboard-meta { display:flex; align-items:center; gap:14px; margin-top:20px; color:rgba(255,255,255,.55); font-size:.69rem; text-transform:capitalize; }
.dashboard-live { display:flex; align-items:center; gap:7px; }
.dashboard-live i { width:7px; height:7px; border-radius:50%; background:#55dfb3; box-shadow:0 0 0 4px rgba(85,223,179,.10); }
.dashboard-hero-actions { position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:9px; }
.dash-action {
  min-height:67px; display:grid; grid-template-columns:42px minmax(0,1fr) 20px; grid-template-rows:auto auto;
  align-items:center; column-gap:12px; padding:10px 13px; text-align:left; border:1px solid rgba(255,255,255,.10);
  border-radius:15px; background:rgba(255,255,255,.075); color:#fff; transition:background .17s,transform .17s,border-color .17s;
}
.dash-action:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); transform:translateX(2px); }
.dash-action.primary { background:linear-gradient(135deg,#0db4a5,#078b81); border-color:transparent; box-shadow:0 10px 24px rgba(0,0,0,.13); }
.dash-action>span { grid-row:1/3; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.10); }
.dash-action>span .icon { width:18px; height:18px; }
.dash-action strong { align-self:end; font-size:.79rem; }
.dash-action small { align-self:start; color:rgba(255,255,255,.56); font-size:.66rem; margin-top:2px; }
.dash-action .arrow { grid-column:3; grid-row:1/3; width:16px; height:16px; color:rgba(255,255,255,.55); }

.dashboard-kpis { grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:14px!important; margin-bottom:20px; }
.dashboard-kpis .kpi-card {
  min-height:156px!important; padding:18px!important; border:1px solid var(--ui-line)!important; border-radius:19px!important;
  background:linear-gradient(180deg,var(--ui-surface),color-mix(in srgb,var(--ui-surface-2) 66%,var(--ui-surface)))!important;
  box-shadow:var(--ui-shadow)!important;
}
.dashboard-kpis .kpi-card::before { display:none!important; }
.kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
.kpi-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; }
.kpi-icon .icon { width:19px; height:19px; }
.kpi-trend-dot { width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.45; }
.kpi-card.teal .kpi-icon { color:var(--ui-teal); background:rgba(8,155,142,.10); }
.kpi-card.blue .kpi-icon { color:var(--ui-blue); background:rgba(55,119,167,.10); }
.kpi-card.green .kpi-icon { color:var(--ui-green); background:rgba(22,135,96,.10); }
.kpi-card.amber .kpi-icon { color:var(--ui-amber); background:rgba(189,122,37,.11); }
.kpi-card.teal { color:var(--ui-teal); } .kpi-card.blue { color:var(--ui-blue); } .kpi-card.green { color:var(--ui-green); } .kpi-card.amber { color:var(--ui-amber); }
.kpi-card .label { color:var(--ui-muted)!important; font-size:.68rem!important; font-weight:720!important; letter-spacing:.055em!important; text-transform:uppercase; }
.kpi-card .value { margin-top:7px!important; color:var(--ui-ink)!important; font-size:clamp(1.35rem,2vw,1.8rem)!important; line-height:1; letter-spacing:-.045em!important; }
.kpi-note { margin-top:8px; color:var(--ui-muted); font-size:.68rem; }
.dashboard-main-grid { grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr)!important; gap:16px!important; margin-top:0!important; }
.panel {
  border:1px solid var(--ui-line)!important; border-radius:var(--ui-radius)!important; background:var(--ui-surface)!important;
  box-shadow:var(--ui-shadow)!important;
}
.dashboard-chart-panel { min-height:380px; padding:22px!important; }
.panel-heading { margin-bottom:18px!important; }
.panel-heading h2 { margin:3px 0 4px!important; color:var(--ui-ink)!important; font-size:1.05rem!important; letter-spacing:-.025em; }
.panel-heading p { color:var(--ui-muted)!important; font-size:.75rem!important; }
.panel-kicker { color:var(--ui-teal); font-size:.62rem; font-weight:800; letter-spacing:.12em; }
.dashboard-side-stack { display:grid; gap:16px; align-content:start; }
.dashboard-search-panel { min-height:245px; padding:20px!important; }
.dashboard-search-field { margin-top:6px; }
.dashboard-search-panel .client-cards { margin-top:12px; max-height:180px; overflow:auto; }
.dashboard-sync-card { display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start; padding:20px!important; background:linear-gradient(145deg,color-mix(in srgb,var(--ui-teal) 7%,var(--ui-surface)),var(--ui-surface))!important; }
.sync-card-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; color:var(--ui-teal); background:rgba(8,155,142,.10); }
.sync-card-icon .icon { width:22px; height:22px; }
.dashboard-sync-card h3 { margin:4px 0 6px; color:var(--ui-ink); font-size:.93rem; letter-spacing:-.02em; }
.dashboard-sync-card p { margin:0; color:var(--ui-muted); font-size:.72rem; line-height:1.5; }

/* Sections, tables and forms */
.section-heading { margin-bottom:20px!important; align-items:flex-end!important; }
.section-heading h1 { margin:4px 0 0!important; color:var(--ui-ink)!important; font-size:1.65rem!important; letter-spacing:-.04em!important; }
.section-heading.compact { align-items:center!important; margin-bottom:14px!important; }
.section-heading.compact h2 { margin:3px 0 0; color:var(--ui-ink); font-size:1.08rem; letter-spacing:-.025em; }
.eyebrow { color:var(--ui-teal)!important; font-size:.63rem!important; font-weight:800!important; letter-spacing:.13em!important; }
.text-action { display:inline-flex; align-items:center; gap:7px; padding:8px 0; border:0; background:transparent; color:var(--ui-teal); font-size:.72rem; font-weight:750; }
.text-action .icon { width:14px; height:14px; }
.dashboard-late { margin-top:22px; }
.toolbar {
  gap:10px!important; margin-bottom:16px!important; padding:11px!important; border:1px solid var(--ui-line)!important;
  border-radius:16px!important; background:var(--ui-surface)!important; box-shadow:0 7px 20px rgba(14,42,64,.045)!important;
}
input,select,textarea { color:var(--ui-ink); border-color:var(--ui-line)!important; background:var(--ui-surface-2)!important; }
input::placeholder,textarea::placeholder { color:var(--ui-soft); }
.search-field { border-radius:12px!important; }
.search-field input { min-height:44px!important; border-radius:12px!important; }
.table-scroll,.house-list { border:1px solid var(--ui-line)!important; border-radius:17px!important; background:var(--ui-surface)!important; box-shadow:var(--ui-shadow)!important; }
th { height:48px!important; padding:12px 16px!important; background:var(--ui-surface-2)!important; color:var(--ui-muted)!important; font-size:.63rem!important; font-weight:800!important; letter-spacing:.075em!important; }
td { padding:14px 16px!important; color:var(--ui-ink); border-color:var(--ui-line)!important; }
tbody tr { transition:background .15s ease; }
tbody tr:hover { background:color-mix(in srgb,var(--ui-teal) 3.5%,var(--ui-surface))!important; }
.house-row { min-height:66px!important; padding:9px 14px!important; }
.house-row:hover { background:color-mix(in srgb,var(--ui-teal) 4%,var(--ui-surface))!important; }
.house-row-main .client-thumb { width:40px!important; height:40px!important; border-radius:12px!important; }
.house-row-name { color:var(--ui-ink)!important; font-weight:730!important; }
.house-row-code { color:var(--ui-teal)!important; }
.house-row-sub { color:var(--ui-muted)!important; }
.badge,.payment-chip,.house-row-status { border-radius:999px!important; font-weight:750!important; }
.modal-overlay { background:rgba(3,17,29,.60)!important; backdrop-filter:blur(7px)!important; }
.modal { padding:24px!important; border:1px solid var(--ui-line)!important; border-radius:22px!important; background:var(--ui-surface)!important; box-shadow:var(--ui-shadow-lg)!important; }
.modal h2 { color:var(--ui-ink)!important; font-size:1.25rem!important; letter-spacing:-.035em!important; }
.form-row label { color:var(--ui-ink)!important; font-size:.72rem!important; font-weight:720!important; }
.form-row input,.form-row select,.form-row textarea { border-radius:12px!important; }
.client-card,.selected-house,.qp-search,.qp-house,.qp-block { border:1px solid var(--ui-line)!important; border-radius:16px!important; background:var(--ui-surface)!important; box-shadow:0 8px 24px rgba(14,42,64,.055)!important; }
.empty-state { border-radius:17px!important; border-color:var(--ui-line)!important; background:var(--ui-surface)!important; color:var(--ui-muted); }

/* Chart refinement */
.chart { min-height:268px!important; }
.chart-legend { display:flex; gap:16px; align-items:center; margin-bottom:20px!important; color:var(--ui-muted)!important; font-size:.7rem!important; }
.chart-legend span { display:inline-flex; align-items:center; gap:7px; }
.chart-legend i { width:9px!important; height:9px!important; border-radius:3px!important; background:var(--ui-teal)!important; }
.chart-legend .pending i { background:#d49a50!important; }
.chart-bars { height:205px!important; gap:12px!important; padding:0 4px; border-bottom:1px solid var(--ui-line)!important; }
.chart-month { gap:5px!important; }
.chart-bar { width:min(35%,28px)!important; border-radius:8px 8px 3px 3px!important; background:linear-gradient(180deg,#1ac6b5,var(--ui-teal))!important; box-shadow:0 5px 12px rgba(8,155,142,.10); }
.chart-bar.pending { background:linear-gradient(180deg,#e7b56f,#c9852f)!important; box-shadow:0 5px 12px rgba(189,122,37,.08); }
.chart-month label { color:var(--ui-muted)!important; font-size:.62rem!important; font-weight:650; text-transform:uppercase; }

/* Sync status */
.sync-status { min-height:38px!important; border-color:var(--ui-line)!important; background:var(--ui-surface)!important; color:var(--ui-muted)!important; box-shadow:0 5px 16px rgba(14,42,64,.04); }
.sync-status:hover { color:var(--ui-ink)!important; }

/* Dark surfaces */
body.theme-dark .dashboard-hero { border-color:rgba(118,227,215,.09); box-shadow:0 22px 58px rgba(0,0,0,.28); }
body.theme-dark .dashboard-kpis .kpi-card,
body.theme-dark .panel,body.theme-dark .table-scroll,body.theme-dark .house-list,
body.theme-dark .toolbar,body.theme-dark .modal { border-color:var(--ui-line)!important; }
body.theme-dark .login-shell { border-color:#20394a; box-shadow:0 34px 100px rgba(0,0,0,.32); }
body.theme-dark .login-access { background:var(--ui-surface); }
body.theme-dark .login-theme { color:var(--ui-muted); }

@media (max-width:1180px) {
  .dashboard-hero { grid-template-columns:1fr; }
  .dashboard-hero-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dash-action { grid-template-columns:38px minmax(0,1fr); grid-template-rows:auto auto; min-height:86px; }
  .dash-action .arrow { display:none; }
  .dash-action>span { width:38px; height:38px; }
  .dashboard-main-grid { grid-template-columns:1fr!important; }
  .dashboard-side-stack { grid-template-columns:minmax(0,1fr) minmax(280px,.7fr); }
}
@media (max-width:900px) {
  .dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .login-shell { grid-template-columns:1fr; max-width:560px; min-height:auto; }
  .login-showcase { min-height:300px; padding:32px; }
  .login-showcase-copy { margin:42px 0 24px; }
  .login-showcase-copy h2 { font-size:2.5rem; }
  .login-showcase-copy p { margin-top:14px; }
  .login-feature-grid,.login-showcase-foot { display:none; }
  .login-access { padding:38px 34px; }
  .login-mobile-brand { display:flex; }
}
@media (max-width:720px) {
  .topbar { height:64px!important; padding:0 13px!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; background:var(--ui-surface)!important; }
  .page-title { display:none; }
  .mobile-brand { color:var(--ui-ink)!important; }
  .main { padding:16px 13px calc(94px + env(safe-area-inset-bottom))!important; }
  .dashboard-hero { padding:22px 18px; margin-bottom:14px; border-radius:20px; }
  .dashboard-hero h1 { margin-top:6px; font-size:1.65rem!important; }
  .dashboard-hero-copy>p { font-size:.78rem; }
  .dashboard-meta { margin-top:14px; flex-wrap:wrap; gap:8px 12px; }
  .dashboard-hero-actions { grid-template-columns:1fr 1fr 1fr; gap:7px; margin-top:4px; }
  .dash-action { min-height:84px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:10px; }
  .dash-action>span { width:34px; height:34px; }
  .dash-action strong { margin-top:2px; font-size:.7rem; }
  .dash-action small { display:none; }
  .dashboard-kpis { gap:9px!important; margin-bottom:14px; }
  .dashboard-kpis .kpi-card { min-height:132px!important; padding:14px!important; border-radius:16px!important; }
  .kpi-top { margin-bottom:10px; }
  .kpi-icon { width:34px; height:34px; border-radius:10px; }
  .kpi-card .value { font-size:1.18rem!important; }
  .kpi-note { font-size:.62rem; }
  .dashboard-main-grid { gap:12px!important; }
  .dashboard-chart-panel { min-height:340px; padding:17px!important; }
  .dashboard-side-stack { grid-template-columns:1fr; gap:12px; }
  .dashboard-search-panel,.dashboard-sync-card { padding:16px!important; }
  .dashboard-sync-card { grid-template-columns:42px 1fr; }
  .sync-card-icon { width:42px; height:42px; }
  .dashboard-late { margin-top:16px; }
  .section-heading.compact { align-items:center!important; }
  .section-heading.compact .text-action { font-size:.66rem; }
  .chart-bars { height:180px!important; gap:6px!important; }
  .chart-bar { width:min(35%,19px)!important; }
  .bottom-nav { border-radius:18px 18px 0 0; }
}

@media (max-width:560px) {
  #login-screen { display:block; overflow:auto; padding:0!important; background:var(--ui-surface)!important; }
  .login-theme { top:14px; right:14px; width:38px; height:38px; background:var(--ui-surface-2); box-shadow:none; }
  .login-shell { width:100%; min-height:100dvh; display:block; border:0; border-radius:0; box-shadow:none; }
  .login-showcase { display:none; }
  .login-access { min-height:100dvh; padding:28px 22px max(28px,env(safe-area-inset-bottom)); align-content:center; }
  #login-screen .login-box { width:100%; max-width:420px; }
  .login-mobile-brand { margin-bottom:42px; }
  #login-screen .login-heading h1 { font-size:1.8rem!important; }
  .login-copyright { margin:40px 0 0; align-self:auto; }
  .dashboard-hero-actions { overflow-x:auto; grid-template-columns:repeat(3,minmax(118px,1fr)); padding-bottom:2px; scrollbar-width:none; }
  .dashboard-hero-actions::-webkit-scrollbar { display:none; }
  .dashboard-kpis .kpi-card { min-height:126px!important; }
  .dashboard-kpis .kpi-card .label { font-size:.59rem!important; }
  .dashboard-sync-card { display:none; }
}
@media (max-width:390px) {
  .main { padding-left:10px!important; padding-right:10px!important; }
  .dashboard-hero { padding:19px 15px; border-radius:18px; }
  .dashboard-hero h1 { font-size:1.45rem!important; }
  .dashboard-kpis { grid-template-columns:1fr 1fr!important; gap:7px!important; }
  .dashboard-kpis .kpi-card { min-height:119px!important; padding:12px!important; }
  .kpi-icon { width:31px; height:31px; }
  .kpi-note { display:none; }
  .dashboard-chart-panel { padding:14px!important; }
  .section-heading h1 { font-size:1.4rem!important; }
  .text-action span { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .view:not(.hidden),.dash-action,.btn,.dashboard-kpis .kpi-card { animation:none!important; transition:none!important; }
}

/* Final polish after visual review */
.brand span::after { content:none!important; display:none!important; }
.brand-mark img,.login-brandmark img { filter:none!important; }
.brand-mark img { border-radius:10px; }
.login-brandmark img { border-radius:10px; }
.install-banner {
  left:auto!important; right:22px!important; bottom:22px!important; transform:none!important;
  width:auto!important; max-width:min(430px,calc(100vw - 44px))!important; padding:10px 12px!important;
  border:1px solid var(--ui-line)!important; border-radius:15px!important; background:var(--ui-surface)!important;
  color:var(--ui-ink)!important; box-shadow:0 18px 45px rgba(8,34,55,.16)!important;
}
.install-banner>span { font-size:.76rem; }
.install-banner .btn { min-height:39px; padding:0 13px; }
.install-banner.hidden { display:none!important; }

@media (max-width:720px) {
  .install-banner:not(.hidden) {
    left:10px!important; right:10px!important; bottom:calc(76px + env(safe-area-inset-bottom))!important;
    max-width:none!important; width:auto!important; display:grid!important;
    grid-template-columns:minmax(0,1fr) auto 34px; gap:8px!important; padding:9px 10px!important;
    border-radius:14px!important;
  }
  .install-banner>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.7rem; }
  .install-banner .btn { min-height:38px; font-size:.7rem; }
  .install-banner .icon-button { width:34px; height:34px; }
  #view-dashboard .responsive-table tr { content-visibility:visible!important; }
}

#login-screen .login-box { animation:none!important; opacity:1!important; transform:none!important; }
@media (max-width:560px) {
  .login-access { padding-bottom:max(110px,calc(28px + env(safe-area-inset-bottom)))!important; }
}

/* Login 3.0 — inspirado na referência MDA */
#login-screen {
  position:relative!important;
  min-height:100dvh!important;
  display:grid!important;
  place-items:center!important;
  padding:28px 18px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 18% 10%,rgba(41,170,255,.11),transparent 22%),
    radial-gradient(circle at 88% 18%,rgba(0,208,255,.08),transparent 26%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 58%,#edf8ff 100%)!important;
}
#login-screen.hidden { display:none!important; }
#login-screen .login-theme {
  position:fixed!important; top:18px!important; right:18px!important; z-index:9!important;
  width:40px!important; height:40px!important; border-radius:12px!important;
  background:rgba(255,255,255,.92)!important; color:#335a82!important;
  border:1px solid #dceaf5!important; box-shadow:0 8px 22px rgba(19,76,122,.08)!important;
}
.login-reference-shell {
  position:relative; z-index:3; width:min(100%,430px);
  min-height:min(790px,calc(100dvh - 56px));
  display:grid; place-items:center;
}
.login-reference-card {
  width:100%; display:flex; flex-direction:column; align-items:stretch;
  padding:26px 28px 128px;
  border:1px solid rgba(20,93,150,.08); border-radius:30px;
  background:rgba(255,255,255,.93);
  box-shadow:0 30px 90px rgba(17,72,116,.14);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.login-reference-brand { text-align:center; margin-bottom:28px; }
.login-reference-logo {
  width:164px; height:164px; display:block; margin:0 auto 14px;
  object-fit:cover; border-radius:50%;
  filter:drop-shadow(0 14px 26px rgba(0,112,202,.13));
}
.login-reference-brand h1 {
  margin:0!important; color:#082f67!important; font-size:2rem!important;
  line-height:1.05!important; letter-spacing:-.045em!important; font-weight:800!important;
}
.login-reference-brand p {
  margin:7px 0 0!important; color:#6683a0!important; font-size:1rem!important;
}
.login-reference-fields { display:grid; gap:13px; }
.login-reference-field {
  min-height:72px; display:grid!important; grid-template-columns:46px minmax(0,1fr) 34px;
  align-items:center; gap:10px; padding:8px 13px;
  border:1px solid #d8e8f3; border-radius:15px;
  background:#fff; box-shadow:0 8px 22px rgba(33,92,139,.08);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.login-reference-field:focus-within {
  border-color:#2d9be8; box-shadow:0 0 0 4px rgba(45,155,232,.10),0 10px 26px rgba(33,92,139,.10);
}
.login-reference-icon {
  width:40px; height:40px; display:grid; place-items:center; color:#0d5ea7;
}
.login-reference-icon .icon { width:28px; height:28px; stroke-width:1.7; }
.login-reference-copy { min-width:0; display:grid; gap:2px; }
.login-reference-copy small { color:#6d89a5; font-size:.72rem; font-weight:600; }
#login-screen .login-reference-copy input {
  width:100%; min-height:29px; padding:0!important; margin:0!important;
  border:0!important; outline:0!important; box-shadow:none!important;
  background:transparent!important; color:#0b316a!important;
  font-size:1rem!important; font-weight:750!important;
}
#login-screen .login-reference-copy input::placeholder { color:#9ab0c4; font-weight:600; }
.login-password-toggle {
  width:34px; height:34px; display:grid; place-items:center; border:0;
  background:transparent; color:#6f8eab; border-radius:10px;
}
.login-password-toggle:hover { background:#eff7fd; color:#0d6abb; }
.login-password-toggle .icon { width:22px; height:22px; }
.login-reference-error { min-height:22px; margin:9px 2px 2px; text-align:center; font-size:.75rem; color:#c44957; }
.login-reference-submit {
  width:100%; height:56px; margin-top:8px; border:0; border-radius:999px;
  background:linear-gradient(180deg,#0fb5f3 0%,#087fe0 55%,#0463c3 100%);
  color:#fff; font-size:1.05rem; font-weight:800; letter-spacing:.01em;
  box-shadow:0 11px 25px rgba(2,110,204,.26), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .14s,filter .14s,box-shadow .14s;
}
.login-reference-submit:hover { filter:brightness(1.04); box-shadow:0 14px 30px rgba(2,110,204,.30), inset 0 1px 0 rgba(255,255,255,.45); }
.login-reference-submit:active { transform:translateY(1px) scale(.995); }
.login-reference-submit:disabled { opacity:.64; cursor:wait; }
.login-reference-options {
  display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:14px;
  color:#173d72; font-size:.78rem; font-weight:650;
}
.remember-option { display:flex!important; align-items:center; gap:8px; cursor:pointer; }
.remember-option input { position:absolute; opacity:0; pointer-events:none; }
.remember-box {
  width:19px; height:19px; display:grid; place-items:center; border-radius:5px;
  border:1.5px solid #7fb8e3; background:#fff;
}
.remember-option input:checked + .remember-box {
  background:linear-gradient(180deg,#1faef1,#0878d9); border-color:#0878d9;
}
.remember-option input:checked + .remember-box::after {
  content:""; width:8px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px);
}
.forgot-password { padding:6px 0; border:0; background:transparent; color:#0877dc; font-size:.78rem; font-weight:750; }
.forgot-password:hover { text-decoration:underline; }
.login-reference-slogan {
  margin-top:29px; display:grid; gap:6px; text-align:center; color:#174681;
  font-size:.72rem; font-weight:700; letter-spacing:.32em;
}

.login-water-scene {
  position:absolute; z-index:2; left:-5%; right:-5%; bottom:-54px; height:190px;
  pointer-events:none; overflow:hidden;
}
.water-wave { position:absolute; left:-8%; width:116%; border-radius:50% 50% 0 0 / 100% 100% 0 0; transform-origin:center bottom; }
.wave-a {
  height:108px; bottom:0; transform:rotate(-2deg);
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.95) 0 3%,transparent 4%),
    linear-gradient(180deg,rgba(34,204,255,.84) 0%,rgba(0,126,230,.92) 52%,rgba(0,72,180,.98) 100%);
  box-shadow:0 -9px 26px rgba(14,157,235,.22), inset 0 12px 20px rgba(255,255,255,.30);
}
.wave-b {
  height:84px; bottom:25px; transform:rotate(3deg);
  background:linear-gradient(180deg,rgba(95,224,255,.58),rgba(0,151,239,.72));
  opacity:.78; filter:blur(.2px);
}
.wave-c {
  height:56px; bottom:66px; transform:rotate(-4deg);
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(70,211,255,.42));
  opacity:.84;
}
.water-bubble {
  position:absolute; border-radius:50%; border:2px solid rgba(0,130,230,.72);
  background:radial-gradient(circle at 32% 25%,rgba(255,255,255,.98),rgba(104,217,255,.48) 45%,rgba(0,118,223,.55) 70%,transparent 72%);
  box-shadow:inset 0 0 8px rgba(255,255,255,.7),0 3px 9px rgba(0,111,202,.12);
}
.b1{width:19px;height:19px;left:9%;bottom:102px}.b2{width:10px;height:10px;left:18%;bottom:128px}
.b3{width:14px;height:14px;left:27%;bottom:91px}.b4{width:17px;height:17px;right:13%;bottom:116px}
.b5{width:9px;height:9px;right:25%;bottom:88px}.b6{width:12px;height:12px;right:5%;bottom:78px}
.login-water-orb { position:absolute; z-index:1; border-radius:50%; filter:blur(.2px); pointer-events:none; }
.login-water-orb-one { width:430px; height:430px; top:-230px; left:-190px; background:radial-gradient(circle,rgba(31,188,255,.10),transparent 68%); }
.login-water-orb-two { width:500px; height:500px; top:-250px; right:-260px; background:radial-gradient(circle,rgba(0,138,237,.08),transparent 68%); }

body.theme-dark #login-screen {
  background:linear-gradient(180deg,#071521 0%,#0a1d2c 62%,#0b273b 100%)!important;
}
body.theme-dark .login-reference-card {
  background:rgba(11,28,43,.94); border-color:#1f425c; box-shadow:0 30px 90px rgba(0,0,0,.28);
}
body.theme-dark .login-reference-brand h1 { color:#f3f8fb!important; }
body.theme-dark .login-reference-brand p,
body.theme-dark .login-reference-copy small { color:#91aabe!important; }
body.theme-dark .login-reference-field { background:#10283b; border-color:#29485f; box-shadow:0 8px 22px rgba(0,0,0,.14); }
body.theme-dark #login-screen .login-reference-copy input { color:#f2f8fb!important; }
body.theme-dark .login-reference-icon,.body.theme-dark .login-reference-options { color:#70c8ff; }
body.theme-dark .remember-option { color:#d3e4ee; }
body.theme-dark .login-reference-slogan { color:#8ec8f4; }

@media (max-width:560px) {
  #login-screen { display:block!important; overflow:auto!important; padding:0!important; background:#fff!important; }
  #login-screen.hidden { display:none!important; }
  #login-screen .login-theme { top:13px!important; right:13px!important; }
  .login-reference-shell { width:100%; min-height:100dvh; display:flex; align-items:flex-start; justify-content:center; }
  .login-reference-card {
    min-height:100dvh; padding:54px 22px 150px; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .login-reference-brand { margin-bottom:26px; }
  .login-reference-logo { width:154px; height:154px; margin-bottom:12px; }
  .login-reference-brand h1 { font-size:1.85rem!important; }
  .login-reference-brand p { font-size:.96rem!important; }
  .login-reference-field { min-height:68px; }
  .login-reference-submit { height:54px; }
  .login-reference-options { margin-top:13px; font-size:.74rem; }
  .forgot-password { font-size:.74rem; }
  .login-reference-slogan { margin-top:26px; font-size:.67rem; letter-spacing:.28em; }
  .login-water-scene { position:fixed; height:142px; bottom:-38px; }
  .wave-a { height:86px; }
  .wave-b { height:64px; bottom:19px; }
  .wave-c { height:42px; bottom:49px; }
  body.theme-dark #login-screen { background:#071521!important; }
}
@media (max-width:370px) {
  .login-reference-card { padding-left:17px; padding-right:17px; }
  .login-reference-logo { width:136px; height:136px; }
  .login-reference-brand h1 { font-size:1.65rem!important; }
  .login-reference-field { grid-template-columns:40px minmax(0,1fr) 30px; }
  .login-reference-icon .icon { width:24px; height:24px; }
  .login-reference-options { gap:8px; font-size:.69rem; }
  .forgot-password { font-size:.69rem; }
}

@media (max-width:560px) {
  #login-screen .login-theme { display:none!important; }
}

@media (max-width:560px) {
  .login-water-scene { z-index:4; height:170px; bottom:-34px; }
  .wave-a {
    height:112px; bottom:0;
    background:
      radial-gradient(circle at 18% 18%,rgba(255,255,255,.98) 0 3%,transparent 4%),
      linear-gradient(180deg,rgba(41,215,255,.94) 0%,rgba(0,145,239,.97) 48%,rgba(0,77,190,1) 100%);
    box-shadow:0 -12px 28px rgba(0,145,239,.24), inset 0 12px 22px rgba(255,255,255,.34);
  }
  .wave-b { height:86px; bottom:30px; opacity:.82; }
  .wave-c { height:58px; bottom:70px; opacity:.9; }
  .water-bubble { border-color:rgba(0,126,232,.85); }
}