@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap");

/* Compact emerald-and-slate workspace based on the supplied reference. */
@media screen {
  :root {
    --ref-bg: #f8fafc;
    --ref-surface: #fff;
    --ref-line: #e2e8f0;
    --ref-soft: #f1f5f9;
    --ref-text: #0f172a;
    --ref-muted: #64748b;
    --ref-faint: #94a3b8;
    --ref-green: #059669;
    --ref-green-dark: #047857;
    --ref-green-soft: #ecfdf5;
  }

  html, body { max-width: 100%; overflow-x: hidden; }
  body {
    margin: 0; color: var(--ref-text); background: var(--ref-bg);
    font-family: "Manrope", sans-serif; font-size: 14px; -webkit-tap-highlight-color: transparent;
  }
  body::before { display: none; }
  .page-shell { display: block; min-height: 100vh; }

  .brand-panel {
    position: sticky; top: 0; z-index: 50; min-height: 0; padding: 0;
    color: var(--ref-text); background: rgba(255,255,255,.98);
    border: 0; border-bottom: 1px solid var(--ref-line);
    box-shadow: 0 1px 3px rgba(15,23,42,.06); backdrop-filter: blur(14px);
  }
  .brand-card {
    width: min(100%,1280px); min-height: 0; margin: 0 auto; padding: 10px 16px 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
  .brand-block {
    width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr);
    align-items: center; column-gap: 10px; row-gap: 1px;
  }
  .brand-mark { grid-row: 1 / span 2; width: 38px; height: 38px; }
  .brand-mark img { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; filter: none; }
  .brand-panel .eyebrow {
    grid-column: 2; margin: 0; color: var(--ref-muted); font-size: 10px;
    font-weight: 500; letter-spacing: 0; text-transform: none;
  }
  .brand-block h1 {
    grid-column: 2; grid-row: 1; margin: 0; color: var(--ref-text);
    font: 800 16px/1.2 "Manrope",sans-serif; letter-spacing: -.025em;
  }
  .brand-copy, .brand-highlight-panel, .sidebar-credit { display: none; }

  .sidebar-nav {
    order: 2; width: 100%; min-width: 0; display: flex; justify-content: flex-start;
    gap: 6px; padding: 7px 0; overflow-x: auto; scrollbar-width: thin;
    border-top: 1px solid #f1f5f9;
  }
  body:not(.app-authenticated) .sidebar-nav { display: none; }
  body:not(.app-authenticated) .brand-card { justify-content: center; padding-bottom: 10px; }
  .nav-btn {
    flex: 0 0 auto; min-height: 32px; padding: 6px 12px; gap: 6px;
    border: 0; border-radius: 12px; color: #475569; background: transparent;
    font: 700 12px/1 "Manrope",sans-serif; white-space: nowrap;
  }
  .nav-icon {
    width: 15px; height: 15px; display: grid; place-items: center; flex: 0 0 15px;
    color: currentColor;
  }
  .nav-icon svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nav-btn:hover { color: var(--ref-text); background: #e2e8f0; transform: none; }
  .nav-btn.active {
    color: #fff; border: 0; background: var(--ref-green);
    box-shadow: 0 2px 4px rgba(5,150,105,.22); transform: none;
  }
  .nav-btn[data-view="dashboardView"] { order: 1; }
  .nav-btn[data-view="cashView"] { order: 2; }
  .nav-btn[data-view="salaryView"] { order: 3; }
  .nav-btn[data-view="carsView"] { order: 4; }
  .nav-btn[data-view="expensesView"] { order: 5; }
  .nav-btn[data-view="reportsView"] { order: 6; }
  .nav-btn[data-view="aiView"] { order: 7; }
  .nav-btn[data-view="settingsView"] { order: 8; }

  .app-panel { width: min(100%,1280px); margin: 0 auto; padding: 16px 16px 34px; }
  #dashboardView {
    width: 100%; min-width: 0; grid-template-columns: minmax(0,1fr);
  }
  #dashboardView > * { min-width: 0; max-width: 100%; }
  .card {
    border: 1px solid var(--ref-line); border-radius: 16px; background: var(--ref-surface);
    box-shadow: 0 1px 2px rgba(15,23,42,.04); backdrop-filter: none;
  }

  .dashboard-top {
    padding: 10px 12px; display: flex; align-items: center; gap: 14px;
    border-radius: 14px; background: #fff;
  }
  .dashboard-top-copy { min-width: 0; flex: 1; }
  .dashboard-top-copy .eyebrow, .dashboard-top-meta { display: none; }
  .dashboard-top-copy h2 { margin: 0; font: 800 15px/1.2 "Manrope",sans-serif; letter-spacing: -.015em; }
  .dashboard-top-copy #welcomeText {
    margin: 2px 0 0; color: var(--ref-muted); font-size: 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .top-actions { display: flex; align-items: center; gap: 7px; }
  .period-switcher {
    display: grid; grid-template-columns: 27px minmax(112px,auto) 27px; align-items: center;
    min-height: 34px; padding: 3px; border: 1px solid var(--ref-line);
    border-radius: 12px; background: var(--ref-soft);
  }
  .period-switcher button {
    height: 26px; padding: 0; border: 0; border-radius: 8px;
    color: var(--ref-muted); background: transparent; cursor: pointer;
  }
  .period-switcher button:hover { color: var(--ref-green); background: #fff; }
  .period-switcher input {
    min-width: 0; padding: 3px; border: 0; color: var(--ref-text); background: transparent;
    font-size: 11px; font-weight: 600; text-align: center; outline: 0;
  }
  .primary-btn, .secondary-btn, .ghost-btn, .danger-btn {
    min-height: 34px; padding: 7px 11px; border-radius: 11px;
    font: 700 11px/1.2 "Manrope",sans-serif;
  }
  .primary-btn { border-color: var(--ref-green); background: var(--ref-green); box-shadow: none; }
  .primary-btn:hover { background: var(--ref-green-dark); transform: none; box-shadow: none; }
  .secondary-btn { color: var(--ref-green-dark); border-color: #a7f3d0; background: var(--ref-green-soft); }
  .ghost-btn { color: #475569; border-color: var(--ref-line); background: #fff; }

  .dashboard-overview-strip {
    display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; margin: 16px 0;
  }
  .overview-tile { min-height: 94px; padding: 13px; border-radius: 16px; }
  .overview-tile > span, .overview-tile-label > span {
    color: var(--ref-faint); font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
  }
  .overview-tile strong {
    display: block; margin-top: 7px; color: var(--ref-text); font-size: 15px; line-height: 1.25;
  }
  .overview-tile small {
    display: block; margin-top: 4px; color: var(--ref-faint); font-size: 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .overview-tile:first-child strong, .overview-tile-balance strong { color: var(--ref-green); }
  .overview-tile-label { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
  .overview-tile-label em {
    padding: 3px 7px; color: var(--ref-green-dark); background: var(--ref-green-soft);
    border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 700;
  }
  #dashboardView > .payroll-reminder-card {
    display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px 18px;
    margin: 0 0 16px; padding: 14px 16px; border-color: #f1d28d;
    background: linear-gradient(110deg,#fffaf0,#fffdf8); box-shadow: none;
  }
  #dashboardView > .payroll-reminder-card .section-head { margin: 0; }
  #dashboardView > .payroll-reminder-card .section-head h3 { font-size: 13px; }
  #dashboardView > .payroll-reminder-card .dashboard-panel-summary { grid-column: 1; color: var(--ref-muted); font-size: 10px; }
  #dashboardView > .payroll-reminder-card .form-actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; white-space: nowrap; }

  .dashboard-hero {
    position: relative; grid-template-columns: minmax(0,1.5fr) minmax(250px,.5fr);
    padding: 16px; overflow: hidden; color: var(--ref-text); border-color: var(--ref-line);
    background: linear-gradient(135deg,#fff,#f8fafc); border-radius: 16px;
  }
  #dashboardView > .dashboard-hero { display: none; }
  .dashboard-expense-workspace {
    display: grid; grid-template-columns: minmax(320px,.72fr) minmax(0,1.55fr);
    grid-template-areas: "entry category" "entry transactions";
    width: 100%; min-width: 0; align-items: start; gap: 16px; margin-bottom: 16px;
  }
  #dashboardExpenseEntrySlot { grid-area: entry; min-width: 0; height: 100%; }
  #dashboardCategorySlot { grid-area: category; min-width: 0; }
  .dashboard-transaction-preview { grid-area: transactions; min-width: 0; padding: 16px; }
  #expenseEntryCard, #expenseLedgerCard { padding: 16px; }
  #expenseEntryCard { height: 100%; padding: 20px; }
  #expenseEntryCard .section-head { margin-bottom: 10px; }
  #expenseEntryCard .smart-entry-tools { padding: 10px; border-color: var(--ref-line); background: var(--ref-bg); }
  #expenseEntryCard .smart-entry-copy small { font-size: 9px; }
  #expenseEntryCard .smart-entry-actions { gap: 5px; }
  #expenseLedgerCard { margin-bottom: 0; }
  #dashboardCategorySlot > .analytics-panel { height: 100%; min-height: 100%; }
  #dashboardCategorySlot .category-chart { max-height: 430px; overflow-y: auto; }
  #dashboardView > .dashboard-analytics-grid,
  #dashboardView > .dashboard-intelligence-grid,
  #dashboardView > .dashboard-action-grid,
  #dashboardView > .dashboard-summary-grid { display: none; }
  .dashboard-hero .eyebrow { color: var(--ref-green); font-size: 10px; }
  .dashboard-hero h3 {
    max-width: none; margin: 3px 0; color: var(--ref-text);
    font: 800 20px/1.25 "Manrope",sans-serif;
  }
  .dashboard-lead { max-width: 720px; color: var(--ref-muted); font-size: 11px; }
  .hero-storyline { margin-top: 10px; }
  .hero-storyline span {
    padding: 4px 8px; color: var(--ref-muted); border: 1px solid var(--ref-line);
    background: var(--ref-soft); font-size: 9px;
  }
  .hero-ai-launch {
    margin-top: 10px; color: var(--ref-text); border-color: #a7f3d0;
    background: var(--ref-green-soft); box-shadow: none;
  }
  .hero-ai-mark { color: #fff; background: var(--ref-green); }
  .hero-ai-copy small { color: var(--ref-muted); }
  .hero-ai-arrow { color: var(--ref-green); }
  .dashboard-quick-actions { margin-top: 10px; gap: 6px; }
  .hero-action-btn {
    min-height: 32px; padding: 6px 10px; color: var(--ref-green-dark);
    border-color: #a7f3d0; background: #fff; font-size: 10px;
  }
  .hero-action-btn:hover { color: #fff; border-color: var(--ref-green); background: var(--ref-green); }
  .dashboard-pill-grid { gap: 7px; }
  .dashboard-pill {
    min-height: 0; padding: 10px; color: var(--ref-text);
    border-color: var(--ref-line); background: #fff; border-radius: 12px;
  }
  .dashboard-pill span { color: var(--ref-faint); font-size: 9px; }
  .dashboard-pill strong { color: var(--ref-text); font-size: 12px; }
  .dashboard-pill-feature { border-color: #a7f3d0; background: var(--ref-green-soft); }
  .dashboard-pill-feature strong { color: var(--ref-green-dark); }
  .hero-orb { display: none; }

  .dashboard-analytics-grid { grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 16px; }
  .dashboard-intelligence-grid, .dashboard-action-grid, .dashboard-summary-grid { gap: 16px; }
  .analytics-panel, .dashboard-panel, .utility-card { padding: 16px; }
  .section-head { margin-bottom: 12px; }
  .section-head .eyebrow, .records-head .eyebrow, .card-head .eyebrow { color: var(--ref-green); font-size: 9px; }
  .section-head h3, .records-head h3, .card-head h2 {
    color: var(--ref-text); font-family: "Manrope",sans-serif; font-size: 14px;
  }
  .section-caption { color: var(--ref-muted); font-size: 10px; }

  input, select, textarea {
    min-height: 39px; padding: 9px 11px; color: var(--ref-text);
    border: 1px solid var(--ref-line); border-radius: 12px; background: var(--ref-bg);
    font: 600 12px/1.3 "Manrope",sans-serif;
  }
  input:focus, select:focus, textarea:focus {
    border-color: #34d399; box-shadow: 0 0 0 2px rgba(16,185,129,.12);
  }
  label > span { color: #334155; font-size: 11px; font-weight: 600; }
  .form-grid { gap: 11px; }
  .form-actions { gap: 7px; }
  .expense-quick-fill { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 9px; }
  .expense-quick-fill > span {
    flex-basis: 100%; color: var(--ref-faint); font-size: 9px;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  }
  .expense-quick-fill button {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 0; border-radius: 8px; color: #475569;
    background: var(--ref-soft); cursor: pointer; font-size: 10px; font-weight: 600;
  }
  .expense-quick-fill button::before {
    content: attr(data-quick-icon); width: 18px; height: 18px; display: inline-grid; place-items: center;
    border-radius: 6px; color: var(--ref-green-dark); background: #d1fae5; font-size: 8px; font-weight: 800;
  }
  .expense-quick-fill button:hover { color: var(--ref-green-dark); background: var(--ref-green-soft); }

  .table-wrap, .report-table-wrap { border-color: var(--ref-line); border-radius: 12px; }
  table { font-size: 12px; }
  th {
    padding: 9px 10px; color: var(--ref-faint); background: var(--ref-bg);
    font-size: 9px; letter-spacing: .06em;
  }
  td { padding: 10px; color: #334155; border-color: #f1f5f9; }
  tbody tr:hover { background: #f8fafc; }
  .status-chip { border-radius: 999px; }
  .chart-bars { border-color: var(--ref-line); background: #fff; }
  .chart-bar-fill { background: linear-gradient(180deg,#10b981,#059669); }
  .category-chart-row { border-color: #f1f5f9; }
  .category-chart-fill { background: var(--ref-green); }
  .category-chart-switch {
    display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--ref-line);
    border-radius: 11px; background: var(--ref-soft);
  }
  .category-chart-switch button {
    min-height: 28px; padding: 5px 10px; border: 0; border-radius: 8px;
    color: var(--ref-muted); background: transparent; font: 700 10px/1 "Manrope",sans-serif; cursor: pointer;
  }
  .category-chart-switch button.active {
    color: var(--ref-text); background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.12);
  }
  .category-chart-caption { margin: -7px 0 14px; }
  .category-doughnut-layout {
    min-height: 285px; display: grid; grid-template-columns: minmax(190px,.85fr) minmax(230px,1.15fr);
    align-items: center; gap: 22px;
  }
  .category-doughnut {
    width: min(220px,100%); aspect-ratio: 1; margin: auto; padding: 30px;
    display: grid; place-items: center; border-radius: 50%; box-shadow: 0 10px 25px rgba(15,23,42,.08);
  }
  .category-doughnut > div {
    width: 100%; height: 100%; display: grid; place-content: center; text-align: center;
    border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--ref-line);
  }
  .category-doughnut span { color: var(--ref-faint); font-size: 9px; font-weight: 700; text-transform: uppercase; }
  .category-doughnut strong { margin-top: 4px; color: var(--ref-text); font-size: 13px; }
  .category-doughnut-legend { display: grid; gap: 7px; }
  .category-doughnut-legend > div {
    display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center;
    gap: 8px; padding: 9px 10px; border: 1px solid #f1f5f9; border-radius: 10px; background: #fff;
  }
  .category-doughnut-legend i { width: 9px; height: 9px; border-radius: 3px; }
  .category-doughnut-legend span { color: #334155; font-size: 11px; font-weight: 600; }
  .category-doughnut-legend strong { color: var(--ref-text); font-size: 11px; }
  .category-doughnut-legend small { grid-column: 2 / -1; color: var(--ref-faint); font-size: 9px; }
  .category-chart.bar-mode { display: grid; gap: 9px; padding-top: 12px; }
  .category-reference-layout {
    min-height: 245px; display: grid; grid-template-columns: minmax(250px,.82fr) minmax(320px,1.18fr);
    align-items: center; gap: 24px;
  }
  .category-reference-visual { min-width: 0; display: grid; place-items: center; gap: 12px; }
  .category-reference-doughnut {
    width: 168px; height: 168px; padding: 38px; display: grid; place-items: center;
    border-radius: 50%; box-shadow: none;
  }
  .category-reference-doughnut > span {
    width: 100%; height: 100%; border-radius: 50%; background: #fff;
    box-shadow: inset 0 0 0 1px rgba(226,232,240,.7);
  }
  .category-compact-legend {
    max-width: 310px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 10px;
  }
  .category-compact-legend span { display: inline-flex; align-items: center; gap: 4px; color: var(--ref-muted); font-size: 8px; }
  .category-compact-legend i { width: 6px; height: 6px; border-radius: 1px; }
  .category-reference-cards { width: 100%; max-height: 250px; display: grid; gap: 8px; overflow-y: auto; padding-right: 3px; }
  .category-reference-card { padding: 10px 11px; border: 1px solid #f1f5f9; border-radius: 12px; background: var(--ref-bg); }
  .category-reference-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .category-reference-head > span { min-width: 0; display: flex; align-items: center; gap: 5px; color: #334155; font-size: 10px; font-weight: 700; }
  .category-reference-head > span > i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; }
  .category-reference-icon { font-size: 10px; font-weight: 400; }
  .category-reference-head strong { color: var(--ref-text); font-size: 10px; white-space: nowrap; }
  .category-reference-head strong em { color: var(--ref-faint); font-style: normal; font-weight: 500; }
  .category-reference-track { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #e9eef4; }
  .category-reference-track i { display: block; height: 100%; border-radius: inherit; }
  .category-reference-bars {
    position: relative; width: 100%; max-width: 330px; height: 210px; padding: 12px 5px 42px 28px;
  }
  .category-bar-grid {
    position: absolute; inset: 12px 5px 42px 28px;
    border-bottom: 1px solid #dfe5ec;
    background: repeating-linear-gradient(to bottom,transparent 0,transparent calc(33.333% - 1px),#edf1f5 calc(33.333% - 1px),#edf1f5 33.333%);
  }
  .category-bar-columns { position: relative; z-index: 1; height: 100%; display: flex; align-items: stretch; gap: 9px; }
  .category-bar-column { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; justify-content: center; }
  .category-bar-value { position: relative; width: min(48px,78%); min-height: 8px; border-radius: 5px 5px 0 0; }
  .category-bar-value span {
    position: absolute; left: 50%; top: -15px; transform: translateX(-50%); color: var(--ref-muted);
    font-size: 7px; font-weight: 600; white-space: nowrap; opacity: 0;
  }
  .category-bar-value:hover span { opacity: 1; }
  .category-bar-column small {
    position: absolute; left: 50%; top: calc(100% + 8px); width: 72px; overflow: hidden;
    transform: translateX(-50%) rotate(-38deg); transform-origin: center; color: var(--ref-muted);
    font-size: 7px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap;
  }
  .transaction-subtotal { text-align: right; }
  .transaction-subtotal span { display: block; color: var(--ref-faint); font-size: 9px; text-transform: uppercase; }
  .transaction-subtotal strong { display: block; margin-top: 4px; color: var(--ref-green-dark); font-size: 13px; }
  .dashboard-transaction-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .dashboard-transaction-row {
    min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr) auto;
    align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--ref-line);
    border-radius: 12px; background: var(--ref-bg);
  }
  .transaction-category-mark {
    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
    color: var(--ref-green-dark); background: var(--ref-green-soft); font-size: 11px; font-weight: 800;
  }
  .transaction-category-mark.category-groceries { color: #047857; background: #d1fae5; }
  .transaction-category-mark.category-utilities { color: #b45309; background: #fef3c7; }
  .transaction-category-mark.category-transport { color: #1d4ed8; background: #dbeafe; }
  .transaction-category-mark.category-dining { color: #be123c; background: #ffe4e6; }
  .transaction-category-mark.category-shopping { color: #7e22ce; background: #f3e8ff; }
  .transaction-category-mark.category-entertainment { color: #4338ca; background: #e0e7ff; }
  .transaction-category-mark.category-salary { color: #0f766e; background: #ccfbf1; }
  .transaction-category-mark.category-others { color: #475569; background: #e2e8f0; }
  .dashboard-transaction-row > div { min-width: 0; }
  .dashboard-transaction-row strong { display: block; overflow: hidden; color: var(--ref-text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-transaction-row small { display: block; margin-top: 3px; overflow: hidden; color: var(--ref-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .transaction-amount { text-align: right; }
  .transaction-amount strong { color: var(--ref-green-dark); }
  .transaction-records-link { width: 100%; margin-top: 10px; }

  /* V18 workflow polish: faster entry, calmer alerts, and shorter operational pages. */
  #expenseEntryCard .smart-entry-tools {
    display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: 9px;
  }
  #expenseEntryCard .smart-entry-copy { min-width: 0; }
  #expenseEntryCard .smart-entry-copy span { display: block; margin-bottom: 3px; }
  #expenseEntryCard .smart-entry-copy strong { display: block; font-size: 11px; line-height: 1.35; }
  #expenseEntryCard .smart-entry-copy small { display: block; margin-top: 2px; line-height: 1.4; }
  #expenseEntryCard .smart-entry-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  #expenseEntryCard .smart-entry-actions > * { min-width: 0; width: 100%; justify-content: center; text-align: center; }
  #expenseEntryCard .expense-quick-fill { grid-column: 1 / -1; margin-top: 0; padding-top: 7px; border-top: 1px solid var(--ref-line); }
  #expenseEntryCard .expense-quick-fill > span { flex-basis: auto; margin-right: 3px; }
  #expenseForm .smart-entry-tools { order: 0; }
  #expenseForm label:has(#expenseDescription) { order: 1; }
  #expenseForm label:has(#expenseAmount) { order: 2; }
  #expenseForm label:has(#expenseDate) { order: 3; }
  #expenseForm label:has(#expenseCategory) { order: 4; }
  #expenseForm label:has(#expensePaymentMethod) { order: 5; }
  #expenseForm label:has(#expenseNotes) { order: 6; }
  #expenseForm .form-actions { order: 7; }

  .payment-method-native {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .payment-method-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .payment-method-options button {
    min-height: 39px; padding: 7px; border: 1px solid var(--ref-line); border-radius: 12px;
    color: #475569; background: #fff; font: 700 10px/1 "Manrope",sans-serif; cursor: pointer;
  }
  .payment-method-options button span { margin-right: 3px; color: var(--ref-green); }
  .payment-method-options button.active {
    color: var(--ref-green-dark); border-color: #34d399; background: var(--ref-green-soft);
    box-shadow: inset 0 0 0 1px rgba(5,150,105,.08);
  }

  .category-doughnut-legend > div { grid-template-columns: 30px minmax(0,1fr) auto; }
  .category-doughnut-legend .category-icon, .category-row-head .category-icon {
    width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 9px;
    font-size: 13px; font-style: normal;
  }
  .category-doughnut-legend small { display: grid; grid-template-columns: auto minmax(70px,1fr); align-items: center; gap: 9px; }
  .category-doughnut-legend small b { height: 4px; overflow: hidden; border-radius: 99px; background: var(--ref-soft); }
  .category-doughnut-legend small em { display: block; height: 100%; border-radius: inherit; }
  .category-row-head strong { display: flex; align-items: center; gap: 8px; }

  .dashboard-alert-grid { margin-bottom: 16px; }
  .dashboard-alert-grid .alert-card {
    position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center;
    gap: 8px 14px; padding: 12px 14px; border-color: #fecaca; background: #fffafa;
  }
  .dashboard-alert-grid .section-head { margin: 0; }
  .dashboard-alert-grid .section-head h3 { display: none; }
  .dashboard-alert-grid .compact-filter { display: none; }
  .dashboard-alert-grid .alert-summary { color: #991b1b; font-size: 11px; font-weight: 600; }
  .dashboard-alert-grid .alert-review-button { color: #991b1b; border-color: #fecaca; background: #fff; }
  .dashboard-alert-grid .alert-list { display: none; grid-column: 1 / -1; margin-top: 4px; }
  .dashboard-alert-grid .alerts-expanded .alert-list { display: grid; }
  .dashboard-alert-grid .alerts-expanded .compact-filter { display: flex; }
  .dashboard-alert-grid .alert-guidance { display: none; grid-column: 1 / -1; margin: 0; color: var(--ref-muted); font-size: 10px; line-height: 1.45; }
  .dashboard-alert-grid .alerts-expanded .alert-guidance { display: block; }
  .dashboard-alert-grid .alert-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }

  #cashView .content-grid { display: grid; grid-template-columns: minmax(300px,.42fr) minmax(0,.58fr); gap: 16px; align-items: start; }
  #reportsView:not(.hidden) { display: grid; grid-template-columns: minmax(320px,.38fr) minmax(0,.62fr); gap: 16px; align-items: start; }
  #reportsView > .card { min-width: 0; margin: 0; }
  #reportsView > .card.no-print { position: sticky; top: 82px; }
  .report-command-disclosure {
    border: 1px solid var(--ref-line); border-radius: 12px; background: var(--ref-soft); overflow: hidden;
  }
  .report-command-disclosure > summary {
    min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; color: var(--ref-text); cursor: pointer; list-style: none;
  }
  .report-command-disclosure > summary::-webkit-details-marker { display: none; }
  .report-command-disclosure > summary::after {
    content: "+"; width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto;
    border-radius: 8px; color: var(--ref-green-dark); background: var(--ref-green-soft); font-size: 16px;
  }
  .report-command-disclosure[open] > summary::after { content: "−"; }
  .report-command-disclosure > summary strong { display: block; font-size: 11px; }
  .report-command-disclosure > summary small { display: block; margin-top: 2px; color: var(--ref-muted); font-size: 9px; }
  .report-command-disclosure[open] > summary { border-bottom: 1px solid var(--ref-line); }
  .report-command-disclosure .report-command-field { display: grid; gap: 7px; padding: 11px 12px 12px; }
  .report-form .form-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .report-form .form-actions .primary-btn { grid-column: 1 / -1; }
  #reportSummary .summary-bar { gap: 8px; }
  #reportSummary .summary-box { position: relative; overflow: hidden; border-color: transparent; box-shadow: none; }
  #reportSummary .summary-box::after {
    content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--report-accent,#94a3b8);
  }
  #reportSummary .summary-box:nth-child(1) { --report-accent:#64748b; background:#f8fafc; }
  #reportSummary .summary-box:nth-child(2) { --report-accent:#4f9d79; background:#f0faf5; }
  #reportSummary .summary-box:nth-child(3) { --report-accent:#537de5; background:#f2f6ff; }
  #reportSummary .summary-box:nth-child(4) { --report-accent:#8057dc; background:#f7f4ff; }
  #reportSummary .summary-box:nth-child(5) { --report-accent:#e7a63a; background:#fff9ed; }
  #reportSummary .summary-box:nth-child(6) { --report-accent:#d44f87; background:#fff5f9; }
  .report-category-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .report-category-row {
    min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 11px; border: 1px solid var(--ref-line); border-radius: 11px; background: #fff;
  }
  .report-category-row > span { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--ref-text); font-size: 10px; font-weight: 700; }
  .report-category-row i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--category-color); }
  .report-category-row > strong { color: var(--ref-text); font-size: 10px; text-align: right; white-space: nowrap; }
  .report-category-row > strong small { margin-left: 4px; color: var(--ref-muted); font-size: 8px; font-weight: 600; }
  .report-empty-state { grid-column: 1 / -1; margin: 0; padding: 14px; color: var(--ref-muted); text-align: center; }

  .module-tabs {
    display: flex; width: fit-content; max-width: 100%; gap: 3px; padding: 4px;
    overflow-x: auto; border: 1px solid var(--ref-line); border-radius: 13px; background: var(--ref-soft);
  }
  .module-tab {
    min-height: 32px; padding: 7px 13px; border: 0; border-radius: 9px; color: var(--ref-muted);
    background: transparent; font: 700 11px/1 "Manrope",sans-serif; white-space: nowrap; cursor: pointer;
  }
  .module-tab.active { color: var(--ref-green-dark); background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.10); }
  .module-tab-panel { display: none; grid-template-columns: minmax(300px,.38fr) minmax(0,.62fr); gap: 16px; align-items: start; }
  .module-tab-panel.active { display: grid; }
  .module-tab-panel > .card { min-width: 0; margin: 0; }
  #salaryView .salary-overview-card { margin: 0; }
  #salaryView .module-tab-panel[data-module-panel="payroll"].active { grid-template-columns: minmax(0,1fr); }
  #salaryView .module-tab-panel[data-module-panel="payroll"] > .card { padding: 18px; }
  #salaryReportForm { grid-template-columns: repeat(3,minmax(0,1fr)); padding: 14px; border: 1px solid var(--ref-line); border-radius: 14px; background: var(--ref-bg); }
  #salaryReportForm .form-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
  #salaryPrintReport { margin-top: 16px; border: 1px solid var(--ref-line); border-radius: 16px; background: #fff; }
  #salaryPrintReport .report-summary { gap: 14px; }
  .payroll-submit-button:disabled { opacity: .65; cursor: default; }
  .payroll-reopen-button { border-color: #c8a86b; color: #7a5721; background: #fffaf0; }

  .ai-workspace { grid-template-columns: 1fr; gap: 12px; }
  .ai-hero-card {
    min-height: 0; padding: 18px; color: #fff; border-color: #0f766e;
    background: linear-gradient(125deg,#064e3b 0%,#047857 60%,#0f766e 100%);
    box-shadow: 0 12px 28px rgba(6,78,59,.15);
  }
  .ai-hero-card .eyebrow { color: #a7f3d0; }
  .ai-hero-card h3 { color: #fff; }
  .ai-hero-card .section-caption { max-width: 760px; color: rgba(255,255,255,.78); }
  .ai-hero-card .status-chip { color: #064e3b; border-color: rgba(255,255,255,.5); background: #ecfdf5; }
  .ai-capability-grid { display: none; }
  .ai-chat-card { min-height: 420px; }

  #settingsForm { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .settings-section {
    min-width: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px;
    align-self: start; align-content: start; padding: 15px; border: 1px solid var(--ref-line); border-radius: 14px; background: var(--ref-bg);
  }
  .settings-section-head { grid-column: 1 / -1; padding-bottom: 9px; border-bottom: 1px solid var(--ref-line); }
  .settings-section-head strong, .settings-utility-heading strong, .settings-danger-heading strong { display: block; color: var(--ref-text); font-size: 12px; }
  .settings-section-head span, .settings-utility-heading span, .settings-danger-heading span { display: block; margin-top: 3px; color: var(--ref-muted); font-size: 10px; }
  .settings-section label:has(#settingsCurrency) { display: none; }
  .settings-section label:has(#settingsPassword) { grid-column: 1 / -1; }
  #settingsForm > .form-actions { grid-column: 1 / -1; }
  .email-delivery-status { padding: 13px; border: 1px solid var(--ref-line); border-radius: 12px; background: #fff; }
  .email-status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .email-status-head strong, .email-status-head span { display: block; }
  .email-status-head strong { color: var(--ref-text); font-size: 11px; }
  .email-status-head span { margin-top: 2px; color: var(--ref-muted); font-size: 9px; }
  .email-status-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 11px; }
  .email-status-grid > div { min-width: 0; padding: 10px; border: 1px solid var(--ref-line); border-radius: 10px; background: var(--ref-bg); }
  .email-status-grid span, .email-status-grid strong, .email-status-grid small { display: block; }
  .email-status-grid span { color: var(--ref-faint); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .email-status-grid strong { margin-top: 5px; color: var(--ref-text); font-size: 10px; }
  .email-status-grid small { margin-top: 3px; color: var(--ref-muted); font-size: 8px; line-height: 1.35; }
  .settings-utility-heading, .settings-danger-heading { margin: 18px 0 8px; }
  .settings-danger-heading { grid-column: 1 / -1; padding-top: 4px; color: #991b1b; }
  .settings-utility-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-utility-grid .danger-card, .settings-danger-heading { grid-column: 1 / -1; }
  .settings-utility-grid .danger-card { border-color: #fecaca; background: #fffafa; }
  .settings-tools-disclosure {
    margin-top: 18px; border: 1px solid var(--ref-line); border-radius: 14px; background: #fff;
  }
  .settings-tools-disclosure > summary {
    min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 15px; color: var(--ref-text); cursor: pointer; list-style: none;
  }
  .settings-tools-disclosure > summary::-webkit-details-marker { display: none; }
  .settings-tools-disclosure > summary::after {
    content: "+"; width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto;
    border-radius: 8px; color: var(--ref-green-dark); background: var(--ref-green-soft); font-size: 17px;
  }
  .settings-tools-disclosure[open] > summary::after { content: "−"; }
  .settings-tools-disclosure > summary strong { display: block; font-size: 11px; }
  .settings-tools-disclosure > summary small { display: block; margin-top: 3px; color: var(--ref-muted); font-size: 9px; }
  .settings-tools-disclosure[open] > summary { border-bottom: 1px solid var(--ref-line); }
  .settings-tools-disclosure .settings-utility-heading { margin: 14px 15px 8px; }
  .settings-tools-disclosure .settings-utility-grid { padding: 0 15px 15px; }

  .records-card > .table-wrap { max-height: 610px; overflow: auto; overscroll-behavior: contain; }
  .records-card > .table-wrap thead th { position: sticky; top: 0; z-index: 2; }
  #cashView .records-card > .table-wrap { max-height: 560px; }
  #salaryView .records-card > .table-wrap { max-height: 590px; }
  #carsView .records-card > .table-wrap { max-height: 540px; }
  td.no-print .table-btn {
    min-width: 0; padding: 6px 8px; border: 1px solid var(--ref-line); border-radius: 9px;
    color: #475569; background: #fff; font-size: 10px; box-shadow: none;
  }
  td.no-print .table-btn::before { content: "✎"; display: inline-block; margin-right: 4px; color: var(--ref-green); font-size: 11px; }
  td.no-print .table-btn.delete { color: #9f1239; border-color: #ffe4e6; background: #fff7f8; }
  td.no-print .table-btn.delete::before { content: "×"; color: #be123c; font-size: 13px; font-weight: 800; }
  td.no-print .table-btn:hover { border-color: #a7f3d0; background: var(--ref-green-soft); }
  td.no-print .table-btn.delete:hover { border-color: #fecdd3; background: #fff1f2; }

  .auth-card { max-width: 430px; margin: 8vh auto 0; padding: 24px; }
  .auth-brand img { max-height: 92px; }
  .mobile-menu-btn { display: none; }
}

/* Premium Deep Teal, Sand & Copper color system. */
@media screen {
  :root {
    --ref-bg: #f4f1ea;
    --ref-surface: #fffefb;
    --ref-line: #ded6c8;
    --ref-soft: #f0ece3;
    --ref-text: #17211f;
    --ref-muted: #66736e;
    --ref-faint: #8d9893;
    --ref-green: #2f7d68;
    --ref-green-dark: #123f39;
    --ref-green-soft: #e5f0eb;
    --ref-copper: #c58a45;
    --ref-copper-dark: #8b5c29;
    --ref-copper-soft: #f6ead9;
  }

  body {
    background:
      radial-gradient(circle at 92% 4%, rgba(197,138,69,.09), transparent 25rem),
      linear-gradient(180deg, #f8f5ef 0%, var(--ref-bg) 34%, #f1ede5 100%);
  }
  .brand-panel {
    background: rgba(255,254,251,.96);
    border-bottom-color: rgba(18,63,57,.13);
    box-shadow: 0 4px 18px rgba(18,63,57,.07);
  }
  .sidebar-nav { border-top-color: rgba(18,63,57,.08); }
  .nav-btn { color: #52635e; }
  .nav-btn:hover { color: var(--ref-green-dark); background: var(--ref-green-soft); }
  .nav-btn.active {
    background: linear-gradient(135deg, var(--ref-green-dark), #1f6658);
    box-shadow: 0 5px 14px rgba(18,63,57,.22);
  }
  .card {
    border-color: rgba(114,101,80,.18);
    background: rgba(255,254,251,.97);
    box-shadow: 0 5px 18px rgba(41,51,47,.055);
  }
  .dashboard-top, .email-delivery-status, .settings-tools-disclosure,
  .category-doughnut-legend article, .report-category-row { background: #fffefb; }
  .period-switcher, input, select, textarea { background: #f8f5ef; }
  input:focus, select:focus, textarea:focus {
    border-color: var(--ref-green);
    box-shadow: 0 0 0 3px rgba(47,125,104,.13);
  }
  .primary-btn {
    border-color: var(--ref-green-dark);
    background: linear-gradient(135deg, var(--ref-green-dark), var(--ref-green));
    box-shadow: 0 5px 12px rgba(18,63,57,.16);
  }
  .primary-btn:hover { background: linear-gradient(135deg, #0d332e, #276f5e); }
  .secondary-btn { color: var(--ref-green-dark); border-color: #acd0c3; background: var(--ref-green-soft); }
  .ghost-btn { color: #495b55; border-color: var(--ref-line); background: #fffefb; }
  .overview-tile { position: relative; overflow: hidden; }
  .overview-tile::after {
    content: ""; position: absolute; inset: auto 14px 0; height: 3px;
    border-radius: 99px 99px 0 0; background: var(--tile-accent, var(--ref-green)); opacity: .72;
  }
  .overview-tile:nth-child(1) { --tile-accent: #2f7d68; }
  .overview-tile:nth-child(2) { --tile-accent: #c58a45; }
  .overview-tile:nth-child(3) { --tile-accent: #53788f; }
  .overview-tile:nth-child(4) { --tile-accent: #8a7049; }
  .overview-tile:nth-child(5) { --tile-accent: #123f39; }
  .overview-tile:first-child strong { color: #2f7d68; }
  .overview-tile:nth-child(2) strong { color: #9b682f; }
  .overview-tile:nth-child(3) strong { color: #466b81; }
  .overview-tile:nth-child(4) strong { color: #755d3c; }
  .overview-tile-balance {
    background: linear-gradient(120deg, #eef5f1 0%, #fffaf2 100%);
    border-color: rgba(47,125,104,.24);
  }
  #dashboardView > .payroll-reminder-card {
    border-color: rgba(197,138,69,.38);
    background: linear-gradient(110deg,#fff9ee,#fffefb);
  }
  .chart-bar-fill { background: linear-gradient(180deg,#4f927f,#2f7d68); }
  .category-chart-fill { background: linear-gradient(90deg,var(--ref-green),#67a590); }
  .category-chart-toggle button.active, .module-tab.active {
    color: var(--ref-green-dark); background: #fffefb;
  }
  .transaction-subtotal strong, .transaction-amount strong { color: var(--ref-green-dark); }
  .transaction-category-mark.category-groceries { color: #245f50; background: #dcece5; }
  .transaction-category-mark.category-utilities { color: #8b5c29; background: #f6ead9; }
  .transaction-category-mark.category-transport { color: #466b81; background: #e2ebf0; }
  .transaction-category-mark.category-dining { color: #914c48; background: #f4e3e1; }
  .transaction-category-mark.category-shopping { color: #684f66; background: #eee6ed; }
  .transaction-category-mark.category-entertainment { color: #53647d; background: #e7ebf1; }
  .transaction-category-mark.category-salary { color: #22665d; background: #dcefea; }
  .transaction-category-mark.category-others { color: #59635f; background: #e9e7e1; }
  .dashboard-alert-grid {
    border-color: #e7c9c5;
    background: linear-gradient(110deg,#fff8f6,#fffefb);
  }
  #reportSummary .summary-box:nth-child(1) { --report-accent:#6f7974; background:#f6f5f1; }
  #reportSummary .summary-box:nth-child(2) { --report-accent:#2f7d68; background:#edf5f1; }
  #reportSummary .summary-box:nth-child(3) { --report-accent:#53788f; background:#eef3f6; }
  #reportSummary .summary-box:nth-child(4) { --report-accent:#80667c; background:#f4eff3; }
  #reportSummary .summary-box:nth-child(5) { --report-accent:#c58a45; background:#fbf4e9; }
  #reportSummary .summary-box:nth-child(6) { --report-accent:#b45f5a; background:#faf0ef; }
  .ai-hero-card {
    border-color: #285f55;
    background: linear-gradient(125deg,#123f39 0%,#1f6658 62%,#8b6a3f 140%);
  }
  .ai-hero-card .eyebrow { color: #efd6ae; }
  .settings-section { border-color: rgba(114,101,80,.18); background: #faf7f1; }
  .email-status-grid > div { background: #f7f4ed; }
  .payroll-reopen-button { border-color: #d7b47b; color: var(--ref-copper-dark); background: #fff9ef; }
}

@media screen and (max-width: 900px) {
  body.app-authenticated .brand-panel,
  body.app-authenticated.mobile-nav-open .brand-panel {
    display: block; position: sticky; inset: auto; min-height: 0; padding: 0; overflow: visible;
  }
  .brand-card, body.app-authenticated.mobile-nav-open .brand-card {
    min-height: 0; padding: 8px 12px 0; flex-wrap: wrap; gap: 6px;
  }
  .sidebar-nav {
    width: 100%; max-width: 100%; margin: 0; padding: 6px 0 8px;
    overscroll-behavior-inline: contain;
  }
  .app-panel { padding: 12px; }
  .dashboard-top, .section-head, .records-head, .print-head,
  .report-header, .utility-card, .filters { flex-direction: column; align-items: stretch; }
  .dashboard-top { gap: 9px; }
  .top-actions { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; }
  .period-switcher { grid-column: 1 / -1; }
  .dashboard-overview-strip { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
  .overview-tile-balance { grid-column: span 2; }
  .dashboard-hero { grid-template-columns: 1fr; }
  .dashboard-expense-workspace {
    width: 100%; grid-template-columns: minmax(0,1fr);
    grid-template-areas: "entry" "category" "transactions";
  }
  .dashboard-analytics-grid, .dashboard-intelligence-grid,
  .dashboard-action-grid, .dashboard-summary-grid { grid-template-columns: 1fr; }
  #cashView .content-grid, #reportsView:not(.hidden), .module-tab-panel.active { grid-template-columns: 1fr; }
  #dashboardView > .payroll-reminder-card { grid-template-columns: 1fr; }
  #dashboardView > .payroll-reminder-card .dashboard-panel-summary,
  #dashboardView > .payroll-reminder-card .form-actions { grid-column: 1; grid-row: auto; }
  #dashboardView > .payroll-reminder-card .form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  #salaryReportForm { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #salaryReportForm .form-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #reportsView > .card.no-print { position: static; }
  #settingsForm, .settings-utility-grid { grid-template-columns: 1fr; }
  .settings-utility-grid .danger-card, .settings-danger-heading { grid-column: auto; }
  .top-actions:has(#headerQuickAddButton.hidden) { grid-template-columns: minmax(0,1fr) auto; }
  .top-actions:has(#headerQuickAddButton.hidden) .period-switcher { grid-column: auto; }
  .top-actions:has(#headerQuickAddButton.hidden) #logoutButton { width: auto; }
  .category-reference-layout { grid-template-columns: minmax(210px,.82fr) minmax(260px,1.18fr); gap: 16px; }
}

.mobile-bottom-nav, .mobile-more-sheet, .mobile-more-backdrop { display: none; }

@media screen and (max-width: 700px) {
  body.app-authenticated { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.app-authenticated .sidebar-nav { display: none; }
  body.app-authenticated .mobile-menu-btn { display: none; }
  .mobile-bottom-nav {
    position: fixed; z-index: 90; left: 10px; right: 10px; bottom: max(8px,env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch;
    min-height: 62px; padding: 6px; border: 1px solid rgba(18,63,57,.14); border-radius: 20px;
    background: rgba(255,253,249,.94); box-shadow: 0 14px 40px rgba(18,48,43,.2); backdrop-filter: blur(18px);
  }
  .mobile-nav-item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; min-height: 50px; padding: 4px 2px; border: 0; border-radius: 15px; color: #71807b;
    background: transparent; font: 700 9px/1.1 var(--ref-sans); letter-spacing: .01em;
  }
  .mobile-nav-item.active { color: #123f39; background: #e6f1ed; }
  .mobile-nav-item.active::before { content: ""; position: absolute; top: 3px; width: 18px; height: 2px; border-radius: 2px; background: #b78a49; }
  .mobile-nav-icon { display: grid; place-items: center; width: 24px; height: 24px; }
  .mobile-nav-icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-more-dots { display: flex; gap: 3px; }
  .mobile-more-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
  .mobile-more-backdrop { display: block; position: fixed; z-index: 94; inset: 0; background: rgba(8,27,24,.34); backdrop-filter: blur(2px); }
  .mobile-more-backdrop[hidden] { display: none; }
  .mobile-more-sheet {
    position: fixed; z-index: 95; left: 10px; right: 10px; bottom: calc(80px + env(safe-area-inset-bottom));
    display: block; padding: 8px 14px 16px; border: 1px solid rgba(18,63,57,.14); border-radius: 24px;
    background: #fffdf9; box-shadow: 0 24px 60px rgba(9,39,34,.28);
    transform: translateY(24px); opacity: 0; visibility: hidden; transition: transform .22s ease,opacity .22s ease,visibility .22s;
  }
  body.mobile-more-open .mobile-more-sheet { transform: translateY(0); opacity: 1; visibility: visible; }
  .mobile-sheet-handle { width: 38px; height: 4px; margin: 1px auto 10px; border-radius: 4px; background: #d7ded9; }
  .mobile-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .mobile-sheet-head div { display: flex; flex-direction: column; gap: 2px; }
  .mobile-sheet-head span { color: #9a7542; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
  .mobile-sheet-head strong { color: #173d37; font: 700 17px/1.2 var(--ref-display); }
  .mobile-sheet-head button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: #53635e; background: #eef2ef; font-size: 22px; line-height: 1; }
  .mobile-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mobile-more-item { min-width: 0; padding: 12px; border: 1px solid #e3e8e4; border-radius: 14px; text-align: left; background: #fafbf9; }
  .mobile-more-item span { display: block; color: #173d37; font-size: 12px; font-weight: 800; }
  .mobile-more-item small { display: block; margin-top: 3px; overflow: hidden; color: #7c8985; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-more-item.active { border-color: #b9d8ce; background: #e9f3ef; box-shadow: inset 3px 0 #2f7d68; }
}

@media screen and (max-width: 520px) {
  .brand-block { grid-template-columns: 34px minmax(0,1fr); }
  .brand-mark, .brand-mark img { width: 34px; height: 34px; }
  .brand-block h1 { font-size: 14px; }
  .brand-panel .eyebrow { font-size: 9px; }
  .nav-btn { min-height: 30px; padding: 6px 10px; font-size: 11px; }
  .dashboard-top-copy #welcomeText { white-space: normal; }
  .dashboard-overview-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .overview-tile { min-height: 86px; padding: 11px; }
  .overview-tile-balance { grid-column: 1 / -1; }
  .overview-tile strong { font-size: 13px; }
  .dashboard-hero { padding: 13px; }
  .dashboard-hero h3 { font-size: 17px; }
  .dashboard-pill-grid { grid-template-columns: 1fr 1fr; }
  .category-doughnut-layout { min-height: 0; grid-template-columns: 1fr; gap: 16px; }
  .report-category-grid { grid-template-columns: 1fr; }
  .report-form .form-actions { grid-template-columns: 1fr; }
  .report-form .form-actions .primary-btn { grid-column: auto; }
  .category-doughnut { width: min(190px,72vw); }
  .dashboard-transaction-list { grid-template-columns: 1fr; }
  .transaction-subtotal { text-align: left; }
  .top-actions .primary-btn, .top-actions .ghost-btn {
    min-height: 34px; padding: 7px 9px; font-size: 10px;
  }
  #expenseEntryCard .smart-entry-tools { grid-template-columns: 1fr; }
  #expenseEntryCard .smart-entry-actions { grid-template-columns: 1fr 1fr; justify-content: stretch; }
  #expenseEntryCard .smart-entry-actions button { flex: 1; }
  .dashboard-alert-grid .alert-card { grid-template-columns: 1fr auto; }
  .dashboard-alert-grid .section-head { grid-column: 1 / -1; }
  .dashboard-alert-grid .alert-summary { min-width: 0; }
  .module-tabs { width: 100%; }
  .module-tab { flex: 1 0 auto; }
  .settings-section { grid-template-columns: 1fr; }
  .email-status-grid { grid-template-columns: 1fr; }
  #salaryView .salary-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  #salaryView .salary-kpi-card { min-height: 96px; padding: 12px; }
  #salaryView .salary-kpi-card strong { font-size: 13px; }
  #salaryReportForm { grid-template-columns: 1fr; }
  #salaryReportForm .form-actions { grid-template-columns: 1fr; }
  .records-card > .table-wrap { max-height: 520px; }
  .overview-tile small { white-space: normal; line-height: 1.35; }
  .category-reference-layout { min-height: 0; grid-template-columns: 1fr; gap: 18px; }
  .category-reference-doughnut { width: 170px; height: 170px; }
  .category-reference-bars { height: 215px; max-width: 100%; }
  .category-reference-cards { max-height: none; }
}

/* V3 command interface: clearer hierarchy, flatter surfaces and modern workflows. */
@media screen {
  :root {
    --v3-ink: #132d29;
    --v3-muted: #66756f;
    --v3-soft: #eef3f0;
    --v3-line: #dce5e1;
    --v3-paper: #fbfcfa;
    --v3-green: #176b5a;
    --v3-green-deep: #0d453b;
    --v3-mint: #dff3ea;
    --v3-gold: #c69249;
    --v3-danger: #b84c4c;
    --v3-shadow: 0 18px 48px rgba(23,55,48,.08);
  }

  body {
    color: var(--v3-ink);
    background:
      radial-gradient(circle at 92% 2%, rgba(74,145,125,.10), transparent 25rem),
      linear-gradient(180deg,#f7f8f5 0%,#f0f4f1 100%);
  }

  .brand-panel {
    background: rgba(250,252,249,.92);
    border-bottom: 1px solid rgba(23,107,90,.15);
    box-shadow: 0 8px 30px rgba(22,55,48,.06);
    backdrop-filter: blur(18px);
  }
  .brand-card { max-width: 1248px; }
  .brand-block { gap: 10px; }
  .brand-mark { width: 42px; height: 42px; border-radius: 13px; }
  .brand-card h1 { color: var(--v3-ink); font-size: 18px; letter-spacing: -.035em; }
  .version-mark {
    color: var(--v3-green-deep); border-color: rgba(23,107,90,.2);
    background: var(--v3-mint); font-weight: 800; letter-spacing: .1em;
  }
  .sidebar-nav { gap: 3px; }
  .nav-btn {
    min-height: 38px; padding: 8px 11px; border-radius: 11px;
    color: #52625d; transition: background .18s ease,color .18s ease,transform .18s ease;
  }
  .nav-btn:hover { color: var(--v3-green-deep); background: #edf4f0; transform: translateY(-1px); }
  .nav-btn.active {
    color: #fff; background: var(--v3-green-deep);
    box-shadow: 0 8px 18px rgba(13,69,59,.18);
  }

  .app-main { max-width: 1248px; }
  .dashboard-top {
    min-height: 78px; padding: 17px 18px; border: 1px solid rgba(23,107,90,.14);
    border-left: 4px solid var(--active-module); border-radius: 20px;
    background: rgba(252,253,251,.9); box-shadow: 0 12px 36px rgba(24,56,49,.06);
    backdrop-filter: blur(16px);
  }
  .dashboard-top::after { opacity: .45; }
  .dashboard-top-copy h2 { color: var(--v3-ink); font-size: 21px; letter-spacing: -.04em; }
  .dashboard-top-copy #welcomeText { max-width: 690px; color: var(--v3-muted); font-size: 11.5px; }
  .period-switcher { min-height: 44px; border-color: var(--v3-line); background: #f6f8f6; }
  .top-actions .primary-btn, #headerQuickAddButton { min-height: 44px; border-radius: 12px; }

  .card {
    border: 1px solid var(--v3-line); border-radius: 20px;
    background: rgba(253,254,252,.94); box-shadow: 0 10px 30px rgba(20,52,45,.055);
  }
  .app-view:not(#dashboardView) > .card:first-child,
  .app-view:not(#dashboardView) > .content-grid:first-child > .card:first-child { border-top-width: 1px; }
  .section-head h3 { color: var(--v3-ink); font-size: 17px; }
  .section-caption, .subtle-text { color: var(--v3-muted); }
  .eyebrow { color: var(--active-module); font-size: 9px; letter-spacing: .18em; }

  .dashboard-overview-strip { grid-template-columns: 1.45fr repeat(4,minmax(0,1fr)); gap: 12px; }
  .overview-tile {
    min-height: 126px; padding: 17px; border-radius: 18px; box-shadow: none;
    background: rgba(253,254,252,.88);
  }
  .overview-tile::after { height: 3px; opacity: .55; }
  .overview-tile:hover { border-color: rgba(23,107,90,.24); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(19,55,47,.07); }
  .overview-tile-balance {
    grid-column: 1; grid-row: 1; min-height: 126px; padding: 18px 20px;
    background:
      radial-gradient(circle at 92% 8%,rgba(223,186,117,.28),transparent 42%),
      linear-gradient(135deg,#0b4037,#176554 70%,#247a65);
    box-shadow: 0 18px 34px rgba(13,69,59,.2);
  }
  .overview-tile:not(.overview-tile-balance):nth-child(1) { grid-column: 2; }
  .overview-tile:not(.overview-tile-balance):nth-child(2) { grid-column: 3; }
  .overview-tile:not(.overview-tile-balance):nth-child(3) { grid-column: 4; }
  .overview-tile:not(.overview-tile-balance):nth-child(4) { grid-column: 5; }
  .overview-tile strong,
  .overview-tile-balance strong,
  .overview-tile-balance .currency-primary,
  #overviewCashAvailableValue {
    font-family: "Manrope",sans-serif; font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1,"ss01" 1; letter-spacing: -.045em;
  }
  .overview-tile-balance .currency-primary { font-size: clamp(22px,2vw,30px); font-weight: 800; }
  .overview-tile-balance .currency-secondary { color: #d8ede6; font-size: 11px; font-weight: 700; }
  .overview-tile-balance small { color: rgba(255,255,255,.72); }
  .overview-tile .currency-primary { color: var(--v3-ink); font-size: 16px; }

  .dashboard-expense-workspace { gap: 16px; }
  #expenseEntryCard { border-top: 4px solid var(--v3-green); box-shadow: var(--v3-shadow); }
  #expenseEntryCard .smart-entry-tools { background: linear-gradient(135deg,#eef7f3,#f8f6ef); border-radius: 15px; }
  .dashboard-transaction-preview, .analytics-panel { box-shadow: none; }
  .category-chart-switch { background: #edf2ef; }

  input, select, textarea {
    border-color: #d7e1dd; border-radius: 12px; background: #fff;
    box-shadow: inset 0 1px 2px rgba(20,50,43,.025);
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--v3-green); box-shadow: 0 0 0 4px rgba(23,107,90,.1);
  }
  .primary-btn, .secondary-btn, .ghost-btn, .form-actions button {
    min-height: 40px; border-radius: 11px; font-weight: 750;
  }
  .primary-btn { background: var(--v3-green); box-shadow: 0 8px 18px rgba(23,107,90,.18); }
  .secondary-btn {
    color: #fff; border-color: var(--v3-green); background: var(--v3-green);
    box-shadow: 0 8px 18px rgba(23,107,90,.15);
  }
  #saveCashEntryButton { width: 100%; min-height: 44px; }
  .ghost-btn { color: var(--v3-green-deep); border-color: #d8e2de; background: #f8faf8; }

  .table-wrap, .report-table-wrap { border: 1px solid var(--v3-line); border-radius: 15px; background: #fff; }
  table { border-collapse: separate; border-spacing: 0; }
  thead th {
    color: #62736d; background: #edf4f1; font-size: 9px; letter-spacing: .1em;
    border-bottom: 1px solid #d7e3de;
  }
  tbody td { border-bottom-color: #e8eeeb; }
  tbody tr { transition: background .16s ease; }
  tbody tr:hover { background: #f4f8f6; }
  .records-card > .table-wrap { scrollbar-color: #9fb8ae transparent; }
  .pagination-bar { padding-top: 14px; }

  .module-tabs { padding: 4px; border: 1px solid var(--v3-line); border-radius: 13px; background: #edf2ef; }
  .module-tab { min-height: 36px; border-radius: 9px; }
  .module-tab.active { background: var(--active-module); box-shadow: 0 7px 16px color-mix(in srgb,var(--active-module) 20%,transparent); }

  .ai-hero-card {
    min-height: 175px; padding: 28px 30px; border: 0;
    background:
      radial-gradient(circle at 85% 15%,rgba(211,166,89,.32),transparent 32%),
      linear-gradient(125deg,#0c4037,#166352 58%,#315f50);
    box-shadow: 0 22px 48px rgba(12,64,55,.2);
  }
  .ai-hero-card::after {
    content: ""; position: absolute; width: 220px; height: 220px; right: -45px; bottom: -125px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 50%; pointer-events: none;
  }
  .ai-hero-card .eyebrow { color: #cfe9df; }
  .ai-hero-card h3, .ai-hero-card .ai-hero-title {
    color: #fff; font-family: "Manrope",sans-serif; font-size: clamp(27px,3vw,42px);
    font-weight: 800; letter-spacing: -.055em;
  }
  .ai-hero-card .section-caption { max-width: 720px; color: rgba(255,255,255,.76); font-size: 12px; }
  .ai-hero-card .status-chip { color: #0d453b; border-color: rgba(255,255,255,.5); background: #e7f7f0; }
  .ai-chat-card { border: 1px solid var(--v3-line); box-shadow: var(--v3-shadow); }
  .ai-conversation { border-radius: 16px; background: linear-gradient(180deg,#f8fbf9,#f4f6f3); }
  .ai-message.assistant { border-left: 3px solid var(--v3-green); background: #fff; }
  .ai-question-form { padding: 8px; border: 1px solid var(--v3-line); border-radius: 16px; background: #fff; }
  .ai-question-form textarea { border: 0; box-shadow: none; }

  .operations-shell { box-shadow: var(--v3-shadow); }
  #reportsView .report-sheet { box-shadow: var(--v3-shadow); }
  #settingsView .settings-card, #salaryView .salary-overview, .villa-care-overview { box-shadow: none; }
  .empty-state { border: 1px dashed #cfdcd7; border-radius: 15px; background: #f7faf8; }
}

@media screen and (max-width: 1100px) {
  .dashboard-overview-strip { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .overview-tile-balance { grid-column: span 2; }
  .overview-tile:not(.overview-tile-balance):nth-child(n) { grid-column: auto; }
}

@media screen and (max-width: 700px) {
  .page-shell { padding-bottom: 96px; }
  .app-main { padding-bottom: 98px; }
  .app-view { padding-bottom: 92px; }
  .brand-panel { backdrop-filter: blur(14px); }
  .dashboard-top { padding: 14px; border-radius: 17px; }
  .dashboard-top-copy h2 { font-size: 20px; }
  .dashboard-overview-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .overview-tile-balance { grid-column: 1 / -1; grid-row: 1; min-height: 118px; }
  .overview-tile { min-height: 108px; padding: 14px; border-radius: 16px; }
  .overview-tile:not(.overview-tile-balance):nth-child(n) { grid-column: auto; }
  .overview-tile-balance .currency-primary { font-size: 26px; }
  .card { border-radius: 17px; }
  .mobile-bottom-nav {
    bottom: max(8px,env(safe-area-inset-bottom)); border-color: rgba(23,107,90,.16);
    background: rgba(251,253,251,.94); box-shadow: 0 18px 46px rgba(16,54,46,.22);
    backdrop-filter: blur(18px);
  }
  .mobile-nav-item.active { color: var(--v3-green-deep); background: var(--v3-mint); }
  .mobile-more-sheet { pointer-events: none; }
  .mobile-more-sheet[aria-hidden="false"] { pointer-events: auto; }
  .records-card > .table-wrap { max-height: none; overflow-x: auto; }
  .ai-hero-card { min-height: 190px; padding: 24px 20px; }
  .ai-hero-card h3 { font-size: 30px; }
  .ai-question-form { grid-template-columns: 1fr; }
  .ai-question-form button { width: 100%; }
}

@media screen and (max-width: 420px) {
  .dashboard-overview-strip { gap: 8px; }
  .overview-tile { min-height: 104px; padding: 13px; }
  .overview-tile > span, .overview-tile-label > span { font-size: 9px; }
  .overview-tile .currency-primary { font-size: 14px; }
  .overview-tile small { font-size: 9.5px; }
  .overview-tile-balance { min-height: 114px; }
  .overview-tile-balance .currency-primary { font-size: 25px; }
  .dashboard-expense-workspace { gap: 12px; }
}

/* V2 operations, notifications, and secure records. */
.notification-button{position:relative;min-width:42px;padding-inline:11px}.notification-button b{position:absolute;top:-6px;right:-5px;min-width:18px;height:18px;padding:0 5px;border:2px solid #fff;border-radius:10px;color:#fff;background:#b6534d;font-size:9px;line-height:14px}.notification-backdrop{position:fixed;z-index:108;inset:0;background:rgba(7,29,25,.32);backdrop-filter:blur(2px)}.notification-backdrop[hidden]{display:none}.notification-drawer{position:fixed;z-index:110;top:0;right:0;width:min(420px,100%);height:100dvh;padding:22px;overflow-y:auto;background:#fffdf9;box-shadow:-20px 0 55px rgba(13,48,42,.24);transform:translateX(105%);transition:transform .25s ease}body.notifications-open .notification-drawer{transform:translateX(0)}.notification-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid #e2e7e2}.notification-head h3{margin:3px 0 0}.notification-head button{width:34px;height:34px;border:0;border-radius:50%;color:#435750;background:#edf2ef;font-size:22px}.notification-list{display:grid;gap:10px;margin:18px 0}.notification-item{display:grid;grid-template-columns:8px 1fr;gap:12px;padding:14px;border:1px solid #e1e7e2;border-radius:14px;background:#fbfcfa}.notification-item>span{width:8px;height:8px;margin-top:5px;border-radius:50%;background:#c39855}.notification-item.overdue>span{background:#b6534d}.notification-item strong,.notification-item p{display:block;margin:0}.notification-item p{margin-top:4px;color:#71807b;font-size:11px;line-height:1.45}
.operations-shell{padding:22px}.operations-tabs{margin:18px 0}.operations-panel{display:none}.operations-panel.active{display:block;animation:operations-reveal .24s ease}@keyframes operations-reveal{from{opacity:0;transform:translateY(5px)}}.operations-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}.operations-toolbar h3{margin:3px 0 0}.operations-toolbar input,.operations-toolbar select{width:min(280px,100%)}.calendar-timeline,.document-list,.member-list,.audit-list{display:grid;gap:9px}.calendar-event{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:15px;padding:13px 15px;border:1px solid #e0e6e1;border-radius:14px;background:#fbfcfa}.calendar-event time{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:11px;color:#fff;background:#1e5b50}.calendar-event time strong{font-size:13px}.calendar-event time span{font-size:9px;opacity:.75}.calendar-event h4,.calendar-event p{margin:0}.calendar-event p{margin-top:3px;color:#73817d;font-size:11px}.event-type{color:#a67839;font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.document-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(420px,1.28fr);gap:16px;align-items:start}.document-form{padding:18px}.document-form .card-head{grid-column:1/-1}.document-card{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:13px;padding:13px;border:1px solid #e1e6e2;border-radius:14px;background:#fbfcfa}.document-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;color:#fff;background:linear-gradient(145deg,#1b5a4f,#2d7b69);font-size:9px;font-weight:900}.document-info>div{display:flex;align-items:center;gap:8px}.document-info>div>span:first-child{color:#a27438;font-size:9px;font-weight:800;text-transform:uppercase}.document-info h4,.document-info p{margin:0}.document-info p{margin-top:4px;color:#74817d;font-size:10px}.document-actions{display:flex;gap:5px}.audit-item{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:center;padding:13px 4px;border-bottom:1px solid #e5e9e6}.audit-dot{width:9px;height:9px;border:2px solid #c59a57;border-radius:50%}.audit-item strong{text-transform:capitalize}.audit-item p,.audit-item time{margin:3px 0 0;color:#75827e;font-size:10px}.member-card{display:grid;grid-template-columns:42px 1fr auto auto;align-items:center;gap:11px;padding:13px;border:1px solid #e1e6e2;border-radius:14px;background:#fbfcfa}.member-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;background:#1d5a50;font-weight:800}.member-card p{margin:3px 0 0;color:#77837f;font-size:10px}
@media screen and (max-width:900px){.document-layout{grid-template-columns:1fr}.operations-toolbar{align-items:stretch;flex-direction:column}.operations-toolbar input,.operations-toolbar select{width:100%}}
@media screen and (max-width:700px){.operations-shell{padding:13px}.operations-tabs{position:sticky;top:0;z-index:5;overflow-x:auto;flex-wrap:nowrap;background:#fffdf9}.operations-tabs .module-tab{flex:0 0 auto}.calendar-event{grid-template-columns:54px 1fr}.calendar-event>.status-chip{grid-column:2;justify-self:start}.document-card{grid-template-columns:42px 1fr}.document-actions{grid-column:1/-1;justify-content:flex-end}.member-card{grid-template-columns:38px 1fr auto}.member-card>div:last-child{grid-column:1/-1;justify-self:end}.audit-item{grid-template-columns:9px 1fr}.audit-item time{grid-column:2;text-align:left}.mobile-more-grid{grid-template-columns:1fr 1fr}#salaryView .module-tabs,#carsView .module-tabs,#villaCareView .module-tabs{overflow-x:auto;flex-wrap:nowrap}#salaryView .module-tab,#carsView .module-tab,#villaCareView .module-tab{flex:0 0 auto}}

/* V2 modern visual system. */
@media screen {
  :root { --v2-ink:#102a25; --v2-forest:#123f39; --v2-emerald:#26725f; --v2-mint:#e9f3ef; --v2-gold:#bd9151; --v2-paper:#fffdf9; --v2-canvas:#f3f1eb; --v2-line:rgba(30,72,63,.13); }
  body { color:var(--v2-ink); background:
    radial-gradient(circle at 8% -8%,rgba(54,132,111,.11),transparent 29rem),
    radial-gradient(circle at 96% 10%,rgba(189,145,81,.1),transparent 25rem),var(--v2-canvas); }
  .brand-panel { border-bottom-color:rgba(25,71,62,.1); background:rgba(255,253,249,.88); box-shadow:0 8px 28px rgba(25,58,51,.07); backdrop-filter:blur(22px) saturate(1.2); }
  .brand-card { padding-top:12px; }
  .brand-mark img { border-radius:13px; box-shadow:0 7px 18px rgba(22,67,59,.18); }
  .brand-block h1 { color:var(--v2-forest); font-size:17px; }
  .version-mark { position:absolute; top:14px; right:17px; padding:4px 8px; border:1px solid rgba(189,145,81,.28); border-radius:999px; color:#8a642e; background:#fff9ee; font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
  .sidebar-nav { gap:4px; padding:8px 0 10px; border-top-color:rgba(25,71,62,.07); scrollbar-color:rgba(35,95,80,.25) transparent; }
  .nav-btn { min-height:36px; padding:8px 11px; border-radius:11px; color:#536760; transition:color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease; }
  .nav-btn:hover { color:var(--v2-forest); background:rgba(225,239,234,.8); transform:translateY(-1px); }
  .nav-btn.active { background:linear-gradient(135deg,#174b42,#2b7462); box-shadow:0 8px 20px rgba(24,79,67,.22),inset 0 1px rgba(255,255,255,.16); }
  .app-panel { padding-top:20px; }
  .card { border-color:var(--v2-line); background:rgba(255,253,249,.94); box-shadow:0 10px 30px rgba(29,57,51,.055); }
  .dashboard-top { min-height:78px; padding:14px 16px; border-left:3px solid var(--v2-emerald); border-radius:18px; background:linear-gradient(105deg,rgba(255,253,249,.98),rgba(246,250,247,.92)); }
  .dashboard-top-copy h2 { color:var(--v2-forest); font-size:18px; }
  .dashboard-top-copy #welcomeText { margin-top:4px; font-size:11px; }
  .period-switcher { border-color:rgba(35,91,78,.14); background:#f8faf7; }
  .primary-btn,.secondary-btn { border:0; background:linear-gradient(135deg,#174b42,#2d7865); box-shadow:0 8px 18px rgba(25,83,70,.18); transition:transform .18s ease,box-shadow .18s ease; }
  .primary-btn:hover,.secondary-btn:hover { transform:translateY(-1px); box-shadow:0 11px 24px rgba(25,83,70,.24); }
  .ghost-btn { border-color:rgba(29,76,66,.16); color:#3d5b53; background:rgba(255,255,255,.68); }
  .notification-button span { display:grid; place-items:center; }.notification-button svg { width:17px; height:17px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  input,select,textarea { border-color:rgba(37,81,71,.16); background:rgba(255,255,255,.82); transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
  input:focus,select:focus,textarea:focus { border-color:#4d927f; background:#fff; box-shadow:0 0 0 4px rgba(55,133,112,.11); outline:0; }
  table thead th { color:#4b625b; background:#eef4f0; border-bottom-color:rgba(32,78,68,.12); }
  table tbody tr { transition:background .16s ease; } table tbody tr:hover { background:#f5f9f6; }
  .overview-tile { overflow:hidden; position:relative; }.overview-tile::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:linear-gradient(90deg,var(--v2-emerald),rgba(189,145,81,.65)); opacity:.65; }
  .operations-shell { overflow:hidden; padding:0; border-radius:22px; }
  .operations-hero { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; min-height:190px; padding:30px; overflow:hidden; color:#fff; background:linear-gradient(125deg,#103b35 0%,#1e5e51 62%,#8b6a3f 145%); }
  .operations-hero::before { content:""; position:absolute; width:280px; height:280px; top:-170px; right:8%; border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.018); }
  .operations-hero>div,.operations-live { position:relative; z-index:1; }
  .operations-hero .eyebrow { color:#ebd3aa; }.operations-hero h3 { max-width:680px; margin:8px 0; color:#fff; font:700 clamp(28px,4vw,46px)/1.03 "Fraunces",serif; letter-spacing:-.035em; }.operations-hero p:last-child { max-width:650px; margin:0; color:rgba(255,255,255,.72); line-height:1.6; }
  .operations-live { flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.08); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(8px); }.operations-live i { width:7px; height:7px; border-radius:50%; background:#88d5ad; box-shadow:0 0 0 5px rgba(136,213,173,.13); }
  .operations-kpis { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:-1px 0 0; border-bottom:1px solid var(--v2-line); background:var(--v2-line); }.operations-kpis article { padding:18px 22px; background:#fffdf9; }.operations-kpis span,.operations-kpis small { display:block; }.operations-kpis span { color:#77847f; font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.operations-kpis strong { display:block; margin:5px 0 2px; color:var(--v2-forest); font:700 24px/1 "Fraunces",serif; }.operations-kpis small { color:#94a09c; font-size:9px; }
  .operations-tabs { margin:18px 22px; padding:5px; border:1px solid var(--v2-line); border-radius:14px; background:#f3f6f3; }.operations-tabs .module-tab { border-radius:10px; }.operations-tabs .module-tab.active { color:#fff; background:var(--v2-forest); box-shadow:0 5px 13px rgba(20,68,58,.18); }
  .operations-panel { padding:4px 22px 24px; }
  .calendar-event,.document-card,.member-card { transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }.calendar-event:hover,.document-card:hover,.member-card:hover { transform:translateY(-1px); border-color:rgba(39,113,94,.25); box-shadow:0 9px 22px rgba(28,70,60,.07); }
  .notification-drawer { border-left:1px solid rgba(31,75,66,.12); background:linear-gradient(180deg,#fffdf9,#f7f6f1); }
  .app-view:not(.hidden) { animation:v2-page-in .28s ease both; } @keyframes v2-page-in { from { opacity:.3; transform:translateY(5px); } }
}
@media screen and (max-width:700px) {
  .version-mark { top:12px; right:12px; font-size:7px; }
  .dashboard-top { min-height:0; padding:12px; }
  .operations-hero { min-height:0; padding:22px 18px; align-items:flex-start; flex-direction:column; }.operations-hero h3 { font-size:30px; }.operations-live { align-self:flex-start; }
  .operations-kpis { grid-template-columns:1fr 1fr; }.operations-kpis article { padding:14px 16px; }.operations-kpis strong { font-size:21px; }
  .operations-tabs { margin:12px; }.operations-panel { padding:3px 12px 18px; }
  .notification-drawer { padding:18px 14px calc(92px + env(safe-area-inset-bottom)); }
  .document-form,.records-card { border-radius:16px; }
  .top-actions:has(#headerQuickAddButton.hidden) { grid-template-columns:minmax(0,1fr) auto auto; }
  .top-actions:has(#headerQuickAddButton.hidden) .period-switcher { grid-column:1 / -1; }
  .top-actions:has(#headerQuickAddButton.hidden) .notification-button { grid-column:2; }
  .top-actions:has(#headerQuickAddButton.hidden) #logoutButton { grid-column:3; width:auto; }
}

/* Villa Care module. */
@media screen {
  .nav-btn[data-view="villaCareView"] { order: 5; }
  .nav-btn[data-view="operationsView"] { order: 6; }
  .nav-btn[data-view="expensesView"] { order: 7; }
  .nav-btn[data-view="reportsView"] { order: 8; }
  .nav-btn[data-view="aiView"] { order: 9; }
  .nav-btn[data-view="settingsView"] { order: 10; }
  body[data-active-view="villaCareView"] { --active-module: #4d7c67; }
  .villa-care-grid { gap: 14px; }
  .villa-care-overview { border-top: 3px solid #4d7c67; }
  .villa-care-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
  .villa-care-kpis article { padding: 13px; border: 1px solid var(--ref-line); border-radius: 14px; background: #f8f6f0; }
  .villa-care-kpis span { display: block; color: var(--ref-faint); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .villa-care-kpis strong { display: block; margin-top: 6px; color: var(--ref-green-dark); font-size: 16px; }
  .villa-tab-panel { display: none; grid-template-columns: minmax(280px,.7fr) minmax(420px,1.3fr); gap: 14px; }
  .villa-tab-panel.active { display: grid; }
  .villa-tab-panel[data-villa-panel="history"] { grid-template-columns: 1fr; }
  .villa-task-list, .villa-maintenance-list, .villa-completion-list { display: grid; gap: 9px; }
  .villa-task-card, .villa-maintenance-card, .villa-completion-card { display: grid; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid var(--ref-line); border-radius: 14px; background: #fffefb; }
  .villa-task-card { grid-template-columns: minmax(0,1fr) auto; border-left: 4px solid #86a697; }
  .villa-task-card.overdue { border-left-color: #b45f5a; background: #fff9f7; }
  .villa-task-card.due-today, .villa-task-card.due-soon { border-left-color: #c58a45; background: #fffbf3; }
  .villa-task-card.inactive { opacity: .64; }
  .villa-task-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .villa-task-main > span, .villa-maintenance-card span, .villa-completion-card span:not(.completion-check) { display: block; margin-top: 4px; color: var(--ref-muted); font-size: 10px; }
  .villa-task-main small, .villa-maintenance-card small, .villa-completion-card small { display: block; margin-top: 4px; color: var(--ref-faint); font-size: 10px; line-height: 1.4; }
  .villa-task-actions { display: flex; align-items: center; gap: 6px; }
  .compact-btn { min-height: 30px; padding: 6px 9px; font-size: 10px; }
  #quickVillaCareButton { grid-column: 1 / -1; }
  .villa-maintenance-card { grid-template-columns: minmax(0,1fr) minmax(125px,auto) auto; }
  .villa-maintenance-cost { color: var(--ref-green-dark); font-size: 11px; text-align: right; }
  .villa-completion-card { grid-template-columns: 34px minmax(0,1fr); }
  .completion-check { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #4d7c67; font-weight: 800; }
}

@media screen and (max-width: 900px) {
  .villa-care-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .villa-tab-panel.active { grid-template-columns: 1fr; }
}

@media screen and (max-width: 520px) {
  .villa-care-kpis { grid-template-columns: 1fr 1fr; }
  .villa-care-kpis article:last-child { grid-column: 1 / -1; }
  .villa-task-card, .villa-maintenance-card { grid-template-columns: 1fr; }
  .villa-task-actions { justify-content: flex-start; flex-wrap: wrap; }
  .villa-maintenance-cost { text-align: left; }
}

@media print {
  body.villa-care-print-mode .brand-panel,
  body.villa-care-print-mode .dashboard-top,
  body.villa-care-print-mode .app-view:not(#villaCareView),
  body.villa-care-print-mode [data-villa-tabs],
  body.villa-care-print-mode .villa-tab-panel .card:has(form) { display: none !important; }
  body.villa-care-print-mode #villaCareView,
  body.villa-care-print-mode .villa-tab-panel { display: block !important; }
  body.villa-care-print-mode .villa-care-overview { margin-bottom: 16px; }
  body.villa-care-print-mode .villa-tab-panel > .records-card { margin-bottom: 16px; }
}

/* V34 signature refinement: premium hierarchy, module identity and unified typography. */
@media screen {
  body {
    --active-module: var(--ref-green);
    font-family: "Manrope", sans-serif;
    font-variant-numeric: tabular-nums;
  }
  body[data-active-view="dashboardView"], body[data-active-view="cashView"] { --active-module: #2f7d68; }
  body[data-active-view="expensesView"] { --active-module: #b97732; }
  body[data-active-view="salaryView"] { --active-module: #53788f; }
  body[data-active-view="carsView"] { --active-module: #9b6b43; }
  body[data-active-view="reportsView"] { --active-module: #274b63; }
  body[data-active-view="aiView"] { --active-module: #a77839; }
  body[data-active-view="settingsView"] { --active-module: #6f7974; }

  button, input, select, textarea { font-family: inherit; }
  h1, h2, h3, h4, .section-head h3 { letter-spacing: -.025em; }
  .brand-panel {
    background: linear-gradient(100deg, rgba(248,244,235,.98), rgba(255,254,251,.98) 48%, rgba(232,242,237,.98));
    border-bottom: 2px solid rgba(197,138,69,.48);
    box-shadow: 0 8px 25px rgba(18,63,57,.08);
  }
  .brand-mark img { box-shadow: 0 5px 15px rgba(18,63,57,.18), 0 0 0 1px rgba(197,138,69,.23); }
  .dashboard-top {
    position: relative; overflow: hidden; border-left: 3px solid var(--active-module);
    background: linear-gradient(105deg,#fffefb 72%,color-mix(in srgb,var(--active-module) 8%,#fffefb));
  }
  .dashboard-top::after {
    content: ""; position: absolute; inset: 0 0 0 auto; width: 120px; pointer-events: none;
    background: radial-gradient(circle at 100% 50%,color-mix(in srgb,var(--active-module) 12%,transparent),transparent 70%);
  }
  .dashboard-top-copy h2 { color: color-mix(in srgb,var(--active-module) 74%,#17211f); }

  .dashboard-overview-strip { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .overview-tile-balance {
    grid-column: span 2; isolation: isolate; color: #fff;
    border-color: rgba(197,138,69,.45);
    background: linear-gradient(128deg,#0f3732 0%,#185449 58%,#286858 100%);
    box-shadow: 0 14px 28px rgba(18,63,57,.2), inset 0 1px rgba(255,255,255,.12);
  }
  .overview-tile-balance::before {
    content: ""; position: absolute; z-index: -1; width: 150px; height: 150px; right: -58px; top: -74px;
    border-radius: 50%; background: radial-gradient(circle,rgba(218,176,104,.3),rgba(197,138,69,0) 70%);
  }
  .overview-tile-balance::after { background: linear-gradient(90deg,#d9b16d,#c58a45); opacity: 1; }
  .overview-tile-balance .overview-tile-label > span { color: rgba(255,255,255,.7); }
  .overview-tile-balance .overview-tile-label em {
    color: #fff3d6; border: 1px solid rgba(238,205,151,.3); background: rgba(255,255,255,.1);
  }
  .overview-tile-balance strong {
    color: #fff; font-family: "Fraunces",serif; font-size: clamp(19px,1.55vw,25px); letter-spacing: -.035em;
  }
  .overview-tile-balance small { color: rgba(255,255,255,.65); }
  .overview-tile strong, .summary-box strong, .mini-stat strong, .transaction-subtotal strong,
  .transaction-amount strong, .report-total-value { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

  .secondary-btn {
    color: var(--ref-green-dark); border-color: rgba(47,125,104,.43); background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  }
  .secondary-btn:hover { color: #fff; border-color: var(--ref-green); background: var(--ref-green); }
  .ghost-btn { background: rgba(255,254,251,.72); }

  .app-view:not(#dashboardView) > .card:first-child,
  .app-view:not(#dashboardView) > .content-grid:first-child > .card:first-child {
    border-top: 3px solid var(--active-module);
  }
  .app-view .eyebrow { color: color-mix(in srgb,var(--active-module) 82%,#66736e); }
  .module-tab.active {
    color: #fff; border-color: var(--active-module);
    background: var(--active-module); box-shadow: 0 4px 12px color-mix(in srgb,var(--active-module) 22%,transparent);
  }
  .ai-hero-card h3, .ai-hero-card .ai-hero-title { font-family: "Fraunces",serif; letter-spacing: -.035em; }

  .category-reference-doughnut {
    box-shadow: 0 16px 30px rgba(18,63,57,.11), inset 0 0 0 2px rgba(255,255,255,.75);
  }
  .category-reference-doughnut > span {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    box-shadow: inset 0 0 0 1px rgba(197,138,69,.18), 0 5px 14px rgba(18,63,57,.08);
  }
  .category-reference-doughnut > span small {
    color: var(--ref-faint); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  }
  .category-reference-doughnut > span strong {
    max-width: 86px; color: var(--ref-green-dark); font-size: 11px; line-height: 1.15; text-align: center;
  }
  .category-bar-value { box-shadow: 0 8px 18px color-mix(in srgb,var(--ref-green) 16%,transparent); }

  #reportsView .report-preview, #reportsView .printable-report {
    background: #fff; border-color: #d8d3c9;
  }
  #reportsView .report-title, #reportsView .report-section-title { color: #123f39; }
  #reportsView .report-divider { border-color: #c58a45; }
}

@media screen and (max-width: 900px) {
  .dashboard-overview-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .overview-tile-balance { grid-column: span 2; }
}

@media screen and (max-width: 520px) {
  .dashboard-overview-strip { grid-template-columns: 1fr 1fr; }
  .overview-tile-balance { grid-column: 1 / -1; min-height: 108px; }
  .overview-tile-balance strong { font-size: 23px; }
  .brand-panel { border-bottom-width: 1px; }
  .dashboard-top { border-left-width: 2px; }
}

/* V35 final readability and responsive records polish. */
@media screen {
  .dashboard-top-copy #welcomeText,
  .section-caption,
  .subtle-text,
  .utility-copy,
  .settings-card > p,
  .report-subtitle { font-size: 11px; line-height: 1.55; }

  .overview-tile { min-height: 102px; }
  .overview-tile > span,
  .overview-tile-label > span { font-size: 10.5px; }
  .overview-tile strong { margin-top: 8px; }
  .overview-tile small {
    margin-top: 6px; color: #74817c; font-size: 10.5px; line-height: 1.4;
  }
  .overview-tile .currency-primary,
  .overview-tile .currency-secondary { display: block; }
  .overview-tile .currency-primary { color: inherit; font-size: 15px; font-weight: 800; }
  .overview-tile .currency-secondary {
    margin-top: 3px; color: var(--ref-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  }
  .overview-tile-balance .currency-primary {
    color: #fff; font-family: "Fraunces",serif; font-size: clamp(20px,1.65vw,26px);
  }
  .overview-tile-balance .currency-secondary { color: #efd6ae; font-size: 11px; }
  .overview-tile-balance small { color: rgba(255,255,255,.76); font-size: 10.5px; }

  .report-meta-grid { grid-template-columns: repeat(4,minmax(135px,1fr)); gap: 12px; }
  .meta-item { padding: 15px; }
  .meta-item span { font-size: 10px; line-height: 1.35; }
  .meta-item strong { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
}

@media screen and (max-width: 900px) {
  table:has(#carServicesTableBody) thead { display: none; }
  table:has(#carServicesTableBody),
  #carServicesTableBody { display: block; width: 100%; }
  #carServicesTableBody tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    margin-bottom: 12px; overflow: hidden; border: 1px solid var(--ref-line);
    border-radius: 14px; background: #fffefb; box-shadow: 0 3px 12px rgba(18,63,57,.055);
  }
  #carServicesTableBody td {
    display: grid; grid-template-columns: minmax(78px,.42fr) minmax(0,1fr); align-items: start; gap: 10px;
    min-width: 0; padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(114,101,80,.12);
    white-space: normal; overflow-wrap: anywhere;
  }
  #carServicesTableBody td::before {
    content: attr(data-label); color: var(--ref-faint); font-size: 9px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
  }
  #carServicesTableBody td.no-print { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
  #carServicesTableBody td.no-print::before { margin-right: auto; }
  .report-meta-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media screen and (max-width: 520px) {
  .overview-tile { min-height: 100px; }
  .overview-tile .currency-primary { font-size: 14px; }
  .overview-tile-balance { min-height: 120px; }
  .overview-tile-balance .currency-primary { font-size: 24px; }
  .overview-tile-balance .currency-secondary { font-size: 11px; }
  #carServicesTableBody tr { grid-template-columns: 1fr; }
  #carServicesTableBody td { grid-template-columns: 92px minmax(0,1fr); }
  .report-meta-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .meta-item { padding: 12px; }
}

/* iPhone form focus: prevent Safari zoom and keep the keyboard from covering fields. */
@media screen and (max-width: 700px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-width: 0;
    max-width: 100%;
    font-size: 16px !important;
    line-height: 1.35;
    scroll-margin-top: 120px;
    scroll-margin-bottom: 42vh;
  }

  .form-grid,
  .form-grid > *,
  .form-grid label {
    min-width: 0;
    max-width: 100%;
  }

  .mobile-bottom-nav {
    transition: transform .2s ease, opacity .2s ease;
  }

  body:has(input:focus) .mobile-bottom-nav,
  body:has(select:focus) .mobile-bottom-nav,
  body:has(textarea:focus) .mobile-bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 24px));
  }
}

/* V3 final authority: keep the new command design above legacy refinements. */
@media screen {
  .brand-panel {
    background: rgba(250,252,249,.92);
    border-bottom: 1px solid rgba(23,107,90,.15);
    box-shadow: 0 8px 30px rgba(22,55,48,.06);
    backdrop-filter: blur(18px);
  }
  .dashboard-overview-strip { grid-template-columns: 1.45fr repeat(4,minmax(0,1fr)); gap: 12px; }
  .overview-tile { min-height: 126px; padding: 17px; }
  .overview-tile-balance { grid-column: 1; grid-row: 1; min-height: 126px; }
  .overview-tile:not(.overview-tile-balance):nth-child(1) { grid-column: 2; }
  .overview-tile:not(.overview-tile-balance):nth-child(2) { grid-column: 3; }
  .overview-tile:not(.overview-tile-balance):nth-child(3) { grid-column: 4; }
  .overview-tile:not(.overview-tile-balance):nth-child(4) { grid-column: 5; }
  .overview-tile-balance strong,
  .overview-tile-balance .currency-primary,
  #overviewCashAvailableValue {
    font-family: "Manrope",sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1,"ss01" 1;
    font-weight: 800; letter-spacing: -.045em;
  }
  .overview-tile-balance .currency-primary { font-size: clamp(22px,2vw,30px); }
  .secondary-btn, #saveCashEntryButton {
    color: #fff; border-color: var(--v3-green); background: var(--v3-green);
    box-shadow: 0 8px 18px rgba(23,107,90,.15);
  }
  .secondary-btn:hover, #saveCashEntryButton:hover { color: #fff; border-color: var(--v3-green-deep); background: var(--v3-green-deep); }
  .ai-hero-card {
    background:
      radial-gradient(circle at 85% 15%,rgba(211,166,89,.32),transparent 32%),
      linear-gradient(125deg,#0c4037,#166352 58%,#315f50);
  }
  .ai-hero-card .eyebrow { color: #cfe9df; }
  .ai-hero-card h3, .ai-hero-card .ai-hero-title {
    color: #fff; font-family: "Manrope",sans-serif; font-weight: 800;
    font-size: clamp(27px,3vw,42px); letter-spacing: -.055em;
  }
  .ai-hero-card .section-caption { color: rgba(255,255,255,.76); }
}

@media screen and (max-width: 1100px) {
  .dashboard-overview-strip { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .overview-tile-balance { grid-column: span 2; }
  .overview-tile:not(.overview-tile-balance):nth-child(n) { grid-column: auto; }
}

@media screen and (max-width: 700px) {
  .page-shell, .app-main, .app-view { padding-bottom: 98px; }
  .dashboard-overview-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .overview-tile { min-height: 108px; padding: 14px; }
  .overview-tile-balance { grid-column: 1 / -1; grid-row: 1; min-height: 118px; }
  .overview-tile:not(.overview-tile-balance):nth-child(n) { grid-column: auto; }
  .overview-tile-balance .currency-primary { font-size: 26px; }
  .records-card > .table-wrap { max-height: none; }
}

/* V3.1 navigation, access clarity and typography consistency. */
@media screen {
  .nav-btn[data-view="dashboardView"] { order: 1; }
  .nav-btn[data-view="expensesView"] { order: 2; }
  .nav-btn[data-view="cashView"] { order: 3; }
  .nav-btn[data-view="salaryView"] { order: 4; }
  .nav-btn[data-view="carsView"] { order: 5; }
  .nav-btn[data-view="villaCareView"] { order: 6; }
  .nav-btn[data-view="reportsView"] { order: 7; }
  .nav-btn[data-view="aiView"] { order: 8; }
  .nav-btn[data-view="operationsView"] { order: 9; }
  .nav-btn[data-view="settingsView"] { order: 10; }

  .operations-hero h3 {
    font-family: "Manrope",sans-serif; font-weight: 800;
    letter-spacing: -.055em; line-height: 1.02;
  }
  .report-badge strong { max-width: 130px; font-family: "Manrope",sans-serif; line-height: 1.05; }
  .access-security-note {
    display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 12px 13px;
    border: 1px solid #d5e4de; border-radius: 12px; color: #536861; background: #f0f7f4;
  }
  .access-security-note strong { color: var(--v3-green-deep); font-size: 11px; }
  .access-security-note span { font-size: 10px; line-height: 1.45; }
}