/* Presentation only. Existing controls, financial logic and responsive safeguards stay intact. */
:root {
  --bg: #f3f6f8;
  --card: #ffffff;
  --ink: #172a2e;
  --muted: #596d73;
  --green: #087b58;
  --green2: #056446;
  --red: #bb304b;
  --line: #dee7e9;
  --shadow: 0 3px 12px #16343b05, 0 1px 2px #16343b04;
  --radius: 16px;
  --dark: #0c302b;
}
body { background: var(--bg); -webkit-font-smoothing: antialiased; }
.ui-icon { stroke-width: 1.8; }
.side {
  background: #0c302b;
  border-bottom: 1px solid #255149;
  box-shadow: 0 5px 20px #0c302b0c;
}
.side .brand { color: #fff; letter-spacing: -.045em; }
.side .brand b, .side .brand .ui-icon { color: #8cdec0; }
.side-foot { color: #b3c9c2; }
.side-foot > [data-business-name] { color: #f4faf7; }
.nav { gap: 5px; }
.nav button { color: #c5d8d2; border: 1px solid transparent; border-radius: 10px; }
.nav button:hover { background: #21493f; color: #fff; }
.nav button.active { color: #fff; background: #215849; border-color: #448d75; box-shadow: inset 0 1px #75bc9a22; }
.top { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.top h1 { letter-spacing: -.045em; font-weight: 720; }
.eyebrow { letter-spacing: .1em; color: #537069; }
.pill { border-radius: 9px; box-shadow: 0 1px 2px #16343b03; }
.notice { color: #62716d; }
.card, .ledger-surface, .period-summary > div { border-color: var(--line); box-shadow: var(--shadow); }
.card h2 { letter-spacing: -.025em; }
.metric { gap: 16px; }
.metric .label { color: #52676d; }
.metric-icon, .dot, .profile-icon { border-radius: 11px; }
.metric-icon { background: #e5f3ee; }
.metric-icon.out { background: #fbe9ee; }
.value, .amount, .quick-total strong, .report-total { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.035em; }
.home-overview .metric:first-child {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0c3b30;
  border-color: #164c3e;
  box-shadow: 0 8px 24px #103e3317;
}
.home-overview .metric:first-child::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, #0c3b30 40%, #0c3b3000), repeating-linear-gradient(0deg, transparent 0 39px, #a4dcc50b 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, #a4dcc50b 39px 40px);
}
.home-overview .metric:first-child::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #7bd8af;
  pointer-events: none;
}
.home-overview .metric:first-child .metric-icon { background: #265749; color: #b0efd3; border: 1px solid #447362; border-radius: 12px; }
.home-overview .metric:first-child .label { color: #d0e9de; }
.home-overview .metric:first-child .value { font-weight: 650; letter-spacing: -.05em; }
.home-overview .metric:first-child:has(.red) { background: #652738; border-color: #713545; }
.home-overview .metric:first-child:has(.red)::before { background: none; }
.home-overview .metric:first-child:has(.red)::after { background: #eea1af; }
.home-overview .metric:first-child:has(.red) .metric-icon { background: #854357; color: #fff; border-color: #a46a78; }
.home-overview .metric:first-child:has(.red) .label { color: #fae2e8; }
.home-overview .metric:last-child { background: #edf5f2; border-color: #d4e5df; }
.assistant-banner { border-top: 3px solid #2c7861; }
.primary, .secondary, .danger, .danger-outline { border-radius: 10px; }
.primary { border-color: #086b4d; box-shadow: inset 0 1px #ffffff16, 0 2px 4px #075a4210; }
.primary:hover { box-shadow: 0 3px 10px #075a4220; }
.secondary { background: #f0f6f3; border-color: #d4e4dd; }
.secondary:hover { background: #e4f0ea; border-color: #b6d6c7; }
.icon-btn { background: #eff3f5; border-radius: 10px; }
.control { border-radius: 9px; background: #f8fafb; border-color: #d4e0e3; }
.control:focus { background: #fff; box-shadow: 0 0 0 3px #087b5817; }
.field label { color: #30474d; }
.section-heading, .report-section-head { align-items: center; }
.row { border-color: #e9eef0; }
.dot.income { background: #e9f5ef; }
.dot.expense { background: #fceef1; }
.tx-copy b { font-weight: 650; }
.filter { border-radius: 9px; background: #f8fafb; }
.filter.active { background: #0c4f3e; border-color: #0c4f3e; }
.period-card { border-radius: 13px; }
.period-summary > div { border-radius: 13px; border-top: 2px solid #c6ded4; }
.period-summary > div:nth-child(2) { border-top-color: #e9bdc7; }
.period-summary > div:last-child { background: #edf5f2; }
.msg { border-radius: 12px; }
.msg.bot { border-top-left-radius: 12px; border-left: 3px solid #87ad9e; box-shadow: none; }
.msg.me { border-top-right-radius: 12px; background: #e8f3ed; border: 1px solid #d0e5da; }
.suggestions button { background: transparent; border-color: #cfdddd; border-radius: 9px; }
.suggestions button:hover { background: #fff; border-color: #8eb7a8; }
.composer { border-radius: 15px; border-color: #cbded7; box-shadow: 0 4px 20px #16343b06; }
.composer textarea { background: #f3f7f8; border: 1px solid #e0e9ec; border-radius: 9px; }
.composer #voiceButton { background: #087b58; border-radius: 12px; }
.input-modes { background: #e5edef; border-radius: 10px; padding: 5px; }
.input-modes button { border-radius: 7px; }
.input-modes button[aria-pressed=true] { background: #0c4f3e; }
.compose-panel.voice-view .composer #voiceButton { border-radius: 50%; box-shadow: 0 0 0 10px #e1efea, 0 0 0 11px #cedfd6; }
.status { color: #365f50; }
.draft { border-radius: 12px; background: #f3f9f5; border-color: #a9cebb; }
.draft-grid { border-color: #d1e4da; }
.settings-card { border-radius: 15px; }
.settings-section-label { color: #526b70; }
.profile-icon { background: #e9f3ef; border: 1px solid #dcebe4; }
.settings-list > li, .profile-row, .preference-row, .setting-info { border-color: #e4ebed; }
.account-card { border-color: #e9dce0; }
dialog { border-radius: 16px; border-color: #cfdddd; box-shadow: 0 24px 80px #0b282d33; }
dialog::backdrop { background: #0b242e80; backdrop-filter: blur(5px); }
.modal-head { background: #f7faf9; border-bottom-color: #dae7e1; }
.modal-head h2 { font-size: 21px; }
.segmented { background: #eaf0f2; border-radius: 10px; }
.segmented button { border-radius: 7px; }
.segmented button.active { box-shadow: 0 1px 4px #102c3010; }
.login-card { border-radius: 18px; border-top: 3px solid #087b58; box-shadow: 0 16px 50px #12352e08; }
.login .brand { letter-spacing: -.05em; }
.login .logo-icon { background: #0c3b30; color: #b0efd3; border-radius: 12px; }
.login h1 { font-weight: 700; }
.trial { border-radius: 8px; background: #e3f0ea; color: #075c41; }
.expired-card { border-radius: 18px; }
.empty { background: #fafcfc; border-radius: 12px; }

/* Catalog and reports retain their existing structure and all interactions. */
.quick-card { background: #edf4f1; border-color: #d0e2d9; }
.quick-item { border-radius: 11px; border-color: #d7e3e0; box-shadow: 0 2px 4px #173a3003; }
.quick-item.selected { background: #f8fffa; border-color: #3a9371; box-shadow: inset 0 3px #087b58; }
.quick-item strong { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.quantity-control button { border-radius: 8px; background: #ecf3f0; }
.quantity-control button[data-plus] { background: #087b58; }
#quickSummary { border: 1px solid #ccdcd4; border-radius: 11px; }
.quick-line b { font-variant-numeric: tabular-nums; }
.payment-options label { border-radius: 8px; }
.payment-options label:has(input:checked) { background: #e7f4ec; border-color: #298a64; }
.machine-fee-panel { background: #f0f7f3; border-color: #bdd6c7; border-radius: 10px; }
.machine-fee-panel.is-disabled { background: #f4f6f7; border-color: #dde5e7; }
#quickFeeLine b { color: var(--red); }
.catalog-row { border-color: #e3ebed; }
#reports .report-metric { border-radius: 13px; }
#reports .report-metric:hover { border-color: #6ca28d; box-shadow: 0 4px 14px #143a2b0c; }
#reports .report-change { border-radius: 5px; }
#reports .positive { background: #e7f2ec; color: #08613f; }
#reports .negative { background: #faeaf0; color: #a92846; }
#reports .report-chart rect { fill: #279774; rx: 2; }
#reports .report-track { background: #e7eef0; height: 6px; border-radius: 3px; }
#reports .report-track > span { border-radius: 3px; }
#reports .report-rank-number { background: #eaf2ee; color: #196647; border-radius: 6px; }
#reports .report-insights { background: #eef5f2; border-color: #d2e4d9; border-left: 3px solid #4b9473; }
#reports .report-filters { border-radius: 13px; }
#reports #serviceRank, #reports #productRank { background: #f6f9f9; }
#reports .report-bar-row[data-name="Despesas"] strong { color: var(--red); }
#reports .report-expenses .report-bar-row strong { color: var(--red); }

@media (hover: hover) {
  button, .control, .quick-item { transition: background-color .16s, border-color .16s, box-shadow .16s; }
  .quick-item:hover { border-color: #86b49f; }
}
@media (max-width: 760px) {
  .top { padding-bottom: 17px; margin-bottom: 20px; }
  .top h1 { font-size: 26px; }
  .main { padding-top: calc(23px + env(safe-area-inset-top)); }
  .card, .ledger-surface { border-radius: 14px; }
  .home-overview .metric:first-child { min-height: 144px; }
  .home-overview .metric:first-child .value { font-size: 32px; }
  .mobile-nav { width: 100vw; max-width: 100vw; right: auto; grid-template-columns: repeat(5,minmax(0,1fr)); background: #fffffff5; border-top-color: #cdded7; box-shadow: 0 -5px 24px #123f3107; padding-top: 10px; }
  .mobile-nav button,
  .mobile-nav button.active { width: 100%; min-width: 0; padding: 3px 0; gap: 7px; color: #556c71; font-size: clamp(8.5px,2.35vw,10px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; transform: none; }
  .mobile-nav button span { max-width: 100%; white-space: nowrap; overflow-wrap: normal; word-break: normal; font: inherit; text-align: center; }
  .mobile-nav button.active { color: #065d43; }
  .mobile-nav button.active .ui-icon { background: #0c5943; color: #fff; box-shadow: 0 0 0 7px #0c5943; border-radius: 5px; }
  .composer { padding: 16px; }
  .quick-item { border-radius: 10px; }
  #reports .report-metric { border-radius: 12px; }
}
@media (max-width: 360px) {
  .mobile-nav { padding-left: 2px; padding-right: 2px; }
  .top h1 { font-size: 24px; }
  .home-overview .metric:first-child .value { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  button, .control, .quick-item { transition: none; }
}