:root{
      --bg:#0b1220; --card:#111827; --ink:#e5e7eb; --muted:#9ca3af; --brand:#22c55e; --danger:#ef4444;
      --note:#fde047; --income:#16a34a; --expense:#f43f5e; --pending:#f59e0b; --cleared:#38bdf8;
      --radius:12px; --ring:#1f2937; --surface:#0e182b; --pill:#0c1426; --shadow:rgba(0,0,0,.4);
      --bal-warn:#fbbf24;
    }
    :root[data-theme="light"]{
      --bg:#f6f7fb; --card:#ffffff; --ink:#0b1220; --muted:#4b5563; --brand:#22c55e; --danger:#dc2626;
      --note:#f59e0b; --income:#16a34a; --expense:#ef4444; --pending:#f59e0b; --cleared:#0284c7;
      --ring:#e5e7eb; --surface:#f1f5f9; --pill:#f8fafc; --shadow:rgba(0,0,0,.1);
      --bal-warn:#f59e0b;
    }

    *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    body{
      margin:0;
      background:linear-gradient(180deg,var(--bg),color-mix(in oklab,var(--bg) 85%, #e5e7eb));
      color:var(--ink);
      font:16px system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    }
    .container{max-width:1100px;margin:0 auto;padding:0 16px}

    /* Buttons / inputs */
    .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
    .btn,.toolbar input,.toolbar button,select{
      background:var(--card);border:1px solid var(--ring);color:var(--ink);
      padding:10px 14px;border-radius:10px;height:44px;line-height:22px;transition:all .18s ease;cursor:pointer
    }
    .btn:hover,.toolbar button:hover{filter:brightness(1.05)}
    .btn-primary{background:var(--brand);border-color:var(--brand);color:#081510;font-weight:600}
    .btn-primary:hover{filter:none;box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 30%, transparent)}
    .btn-outline{background:var(--pill);border-color:var(--ring)}
    .btn-outline:hover{border-color:color-mix(in oklab,var(--ring) 70%, var(--brand))}
    .btn-ghost{background:transparent;border-color:transparent}
    .btn-danger{background:color-mix(in oklab,var(--danger) 35%, #000);border:1px solid color-mix(in oklab,var(--danger) 55%, #000);color:#fff}
    .btn-danger:hover{background:var(--danger);border-color:var(--danger)}
    .btn .i{font-size:18px;line-height:1}
    .btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

    /* ================= Header ================= */
    .app-header{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--ring)}
    .brandbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
    .brandbtn{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--ink);cursor:pointer;padding:6px 8px;border-radius:10px}
    .brandbtn:hover .brandlogo {
	transform: scale(1.03);
	}
/* Logo scaling */
.brandlogo {
  height: 140px;
  width: auto;
  display: block;
  pointer-events: none;
  transition: transform 0.2s ease;
}
.brandbtn:hover .brandlogo {
  transform: scale(1.03);
}

/* Tablet size */
@media (max-width: 1024px) {
  .brandlogo {
    height: 60px;
	width: Auto;
  }
}

/* Mobile size */
@media (max-width: 640px) {
  .brandlogo {
    height: 60px;
	width: Auto;
  }
}

/* Tiny mobile (iPhone SE / narrow viewports) */
@media (max-width: 400px) {
  .brandlogo {
    height: 60px;
	width: Auto;
  }
}

	    /* ============== Nav ============== */
	    .navwrap{border-top:1px solid color-mix(in oklab,var(--ring) 50%, transparent);padding:10px 0 12px;background:var(--card)}
	    .navgrid{display:grid;grid-template-columns:1fr;gap:12px;align-items:center}
	    .month-wrap{display:flex;align-items:center;gap:8px;padding:0 8px;border:1px solid var(--ring);border-radius:10px;background:var(--pill);height:44px}
	    .month-wrap input{background:transparent;border:0;color:var(--ink);height:40px;padding:0 8px;outline:none}

	    .tools-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
	    .tools-actions .btn{height:44px}

	    @media (max-width:640px){
	      .navgrid{grid-template-columns:1fr;gap:8px}
	      .tools-actions .btn .btn-label{display:none} /* icons only on phones */
	      .tools-actions .btn{flex:1 0 calc(25% - 6px)} /* neat grid feel */
	    }

    /* Footer */
    .app-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:var(--card);color:var(--ink);position:sticky;bottom:0;border-top:1px solid var(--ring);z-index:5}
    @media (max-width:640px){.app-footer{flex-direction:column;gap:6px}}

    /* Calendar & entries (unchanged) */
    .calendar{display:grid;gap:10px;padding:10px 16px}
    @media (min-width:1025px){.calendar{grid-template-columns:repeat(7,minmax(200px,1fr))}}
    @media (min-width:769px) and (max-width:1024px){.calendar{grid-template-columns:repeat(4,1fr)}}
    @media (min-width:481px) and (max-width:768px){.calendar{grid-template-columns:repeat(2,1fr)}}

    .calendar.listmode{display:flex !important;flex-direction:column;gap:10px;padding:10px 16px}
    .listday{background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);padding:10px}
    .listday .top{display:flex;justify-content:space-between;align-items:center}
    .listday .top .label{font-weight:600}
    .listday .top .bal{font-size:12px}
    .listentries{margin-top:8px;display:flex;flex-direction:column;gap:6px}
    .day{background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);min-height:120px;display:flex;flex-direction:column}
    .dayHeader{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--ring)}
    .dayHeader .date{font-weight:600}
    .dayHeader .bal{font-size:12px}
    .entries{padding:6px 8px;display:flex;flex-direction:column;gap:6px}
    .bal-pos{color:var(--income)} .bal-warn{color:var(--bal-warn)} .bal-neg{color:var(--expense)}
    .entry{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:10px;border:1px dashed #334155;background:var(--pill);cursor:pointer;gap:6px}
    .entry.income{border-color:var(--income)} .entry.expense{border-color:var(--expense)} .entry.note{border-color:var(--note)}
    .entry.bank-import{border-style:solid}
    .entry.matched{box-shadow:inset 3px 0 0 var(--cleared)}
    .entry .desc{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .entry-badge{display:inline-flex;margin-left:6px;padding:1px 5px;border-radius:999px;background:color-mix(in oklab,var(--cleared) 20%, transparent);color:var(--cleared);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;vertical-align:middle}
    .entry .amt{font-variant-numeric:tabular-nums}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    /* Dialogs / sections */
    dialog{border:none;border-radius:12px;padding:0;background:var(--card);color:var(--ink);width:min(720px,94vw)}
    dialog::backdrop{background:rgba(0,0,0,0.6)}
    dialog form{padding:16px}
    dialog h3{margin:4px 0 10px}
    .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .grid .span2{grid-column:1/-1}
    .section{border:1px solid var(--ring);border-radius:12px;padding:12px;background:var(--surface)}
    .section h4{margin:0 0 8px 0;font-size:14px;color:var(--muted)}
.actions-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:560px){ .actions-row{grid-template-columns:repeat(2,minmax(0,1fr))} }
.bank-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.bank-sync-toggle{display:flex;align-items:center;gap:8px;margin:2px 0 8px;color:var(--ink);font-size:13px}
.bank-sync-toggle input{width:auto}
.bank-sync-frequency{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,160px);align-items:center;gap:8px;margin:0 0 8px;color:var(--muted);font-size:13px}
.bank-sync-frequency select{height:36px;padding:6px 8px}
.bank-status{font-size:13px;color:var(--muted);line-height:1.4;margin-bottom:8px}
.bank-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.bank-empty{border:1px dashed var(--ring);border-radius:8px;padding:10px;color:var(--muted);font-size:13px}
.bank-card{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border:1px solid var(--ring);border-radius:8px;background:var(--pill);padding:10px}
.bank-card strong,.bank-card small,.bank-accounts{display:block}
.bank-card small,.bank-accounts{color:var(--muted);font-size:12px;line-height:1.35;margin-top:3px}
.bank-accounts{display:flex;flex-wrap:wrap;gap:6px}
.bank-accounts span{border:1px solid var(--ring);border-radius:999px;padding:2px 8px;background:var(--surface)}
.bank-disconnect{height:34px;padding:5px 9px;font-size:13px;flex:0 0 auto}
@media(max-width:560px){
  .bank-actions .btn{flex:1 1 100%}
  .bank-sync-frequency{grid-template-columns:1fr}
  .bank-card{flex-direction:column}
  .bank-disconnect{width:100%}
}
menu{display:flex;justify-content:flex-end;gap:8px;margin:0;padding-top:12px}

    /* Toast */
    .toast{position:fixed;right:16px;bottom:16px;background:var(--card);border:1px solid var(--ring);color:var(--ink);padding:10px 12px;border-radius:10px;box-shadow:0 4px 14px var(--shadow);z-index:9999;opacity:0;transform:translateY(8px);transition:all .2s}
.toast.show{opacity:1;transform:translateY(0)}
.toast-undo{
  margin-left:10px;
  border:1px solid var(--ring);
  background:var(--pill);
  color:var(--ink);
  border-radius:6px;
  padding:4px 8px;
  cursor:pointer;
}
.form-help{
  margin:-4px 0 12px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}
.onboarding-section{
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid var(--ring);
  border-radius:8px;
  background:color-mix(in oklab, var(--pill) 64%, transparent);
}
.onboarding-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.onboarding-section-head h4{
  margin:0 0 3px;
  font-size:14px;
  line-height:1.15;
}
.onboarding-section-head p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.onboarding-section-head .btn{
  height:34px;
  flex:0 0 auto;
  padding:6px 10px;
  font-size:13px;
}
.onboarding-rows{
  display:grid;
  gap:8px;
}
.onboarding-row{
  display:grid;
  grid-template-columns:minmax(120px,1.15fr) minmax(96px,.8fr) minmax(112px,.85fr) minmax(126px,1fr) auto;
  gap:8px;
  align-items:end;
  padding:9px;
  border:1px solid color-mix(in oklab, var(--ring) 72%, transparent);
  border-radius:8px;
  background:var(--card);
}
.onboarding-row label{
  min-width:0;
  font-size:12px;
}
.onboarding-row input,
.onboarding-row select{
  height:36px;
  padding:7px 8px;
  font-size:13px;
}
.onboarding-remove{
  height:36px;
  padding:7px 9px;
  color:var(--muted);
  font-size:12px;
}
@media(max-width:760px){
  .onboarding-section-head{
    flex-direction:column;
  }
  .onboarding-section-head .btn{
    width:100%;
  }
  .onboarding-row{
    grid-template-columns:1fr 1fr;
  }
  .onboarding-remove{
    grid-column:1/-1;
  }
}
textarea{
  width:100%;
  background:var(--pill);
  border:1px solid var(--ring);
  color:var(--ink);
  border-radius:8px;
  padding:10px;
  font:inherit;
  resize:vertical;
}
	/* ===== Phone LANDSCAPE polish (small height) ============================ */
/* Kicks in for phones / split-screen with short height */
@media (max-height: 480px) and (orientation: landscape) {
  /* Header bar */
  .hdr-bar { padding: 6px 10px; gap: 8px; }
  .hello { display: none; }                  /* hide "Hi, Jason" */
  /* Sign out: icon-only */
  #signOutBtn .btn-label,
  #signInBtn  .btn-label,
  #signUpBtn  .btn-label { display:none; }

  /* Logo sizing in landscape */
  .brandlogo { width: 110px; }

  /* Snap toolbar becomes a single compact row */
  .header-tools { padding: 0; border-top: 1px solid var(--ring); }
  .snap-page { padding: 8px 10px; }
  .snap-strip {
    gap: 0;
    scroll-snap-type: x mandatory;
  }

  /* Buttons: one slim row, icon-only; keep big hit targets */
  .btn-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 8px;
  }
  .btn-grid .btn {
    flex: 0 0 44px;                 /* square chip */
    width: 44px; height: 44px;      /* thumb-friendly */
    padding: 0; justify-content: center;
  }
  .btn-grid .btn .btn-label { display: none; }

  /* Month chip stays wide enough to tap */
  .month-wrap {
    min-width: 220px; height: 44px; padding: 0 6px;
  }

  /* Totals page: compact typography */
  .totals-big { font-size: 14px; padding: 8px 4px; }

  /* Dots closer together, smaller */
  .snap-dots { padding: 4px 0 8px; }
  .snap-dots .dot { width: 6px; height: 6px; }
}

/* ===== Tablet LANDSCAPE (roomier, but keep single-row feel) ============= */
@media (min-height: 481px) and (max-height: 700px) and (orientation: landscape) {
  .hdr-bar { padding: 8px 12px; }
  .brandlogo { height: 30px; width: auto; }
  .btn-grid { display: flex; gap: 10px; }
  .btn-grid .btn { flex: 0 0 48px; width: 48px; height: 48px; }
  .totals-big { font-size: 15px; }
}

/* ===================== DESKTOP TOOLBAR CLEANUP ===================== */
@media (min-width: 1025px) {
  /* Make the whole toolbar one line */
  .header-tools { padding: 8px 16px; }

  /* Stop the snap/scroll behavior on desktop */
  .snap-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .snap-page {
    min-width: auto;
    scroll-snap-align: unset;
    padding: 0;                   /* tighter vertical rhythm */
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .snap-dots { display: none; }   /* no pager dots on desktop */

  /* Month chip compact */
  .month-wrap {
    height: 36px;
    padding: 0 8px;
    border-radius: 8px;
  }
  .month-wrap input {
    height: 32px;
    padding: 0 6px;
    font-size: 14px;
  }

  /* Buttons become compact, single-row chips */
  .btn-grid {
    display: flex;                /* force a single row */
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 0;                /* remove extra top margin */
  }
  .btn-grid .btn,
  .header-tools .btn {
    height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    line-height: 20px;
    font-size: 14px;
  }
  .header-tools .btn .i { font-size: 16px; }

  /* Totals live on the same row, aligned to the right */
  #pageTotals { margin-left: auto; }
  #totals {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
  }
}
/* Month chip */
.month-wrap{
  position:relative; display:flex; align-items:center;
  border:1px solid var(--ring); border-radius:10px;
  background:var(--pill); height:44px; padding:0 10px;
}

/* Left inline icon */
.month-wrap::before{
  content:"📅";
  position:absolute; left:12px; font-size:18px; opacity:.95; pointer-events:none;
}

/* Input styling */
.month-wrap input[type="month"]{
  background:transparent; border:0; color:var(--ink);
  height:40px; padding-left:34px; padding-right:10px;
  font-size:15px; outline:none; width:100%; cursor:pointer;
}

/* Hide native calendar icon (Chromium/Safari/Edge) */
.month-wrap input[type="month"]::-webkit-calendar-picker-indicator{
  display:none; -webkit-appearance:none; opacity:0; width:0; height:0; pointer-events:none;
}
/* Hide clear/inner buttons just in case */
.month-wrap input[type="month"]::-webkit-clear-button,
.month-wrap input[type="month"]::-webkit-inner-spin-button{
  display:none; -webkit-appearance:none;
}

/* Firefox doesn’t show an icon for month inputs, so no extra rules needed */

/* Always show a full 7-day week in landscape, even on mobile */
@media (orientation: landscape) and (max-width: 1024px) {
  .calendar { 
    /* Keep days readable; adjust min width if needed */
    grid-template-columns: repeat(7, minmax(100px, 1fr));
  }
}
/* --- Base background hardening (fix white gutters on iOS) --- */
html, body {
  background-color: var(--bg);
  min-height: 100dvh;
  overscroll-behavior-y: contain;
}

/* --- MINI MODE (phone landscape / tiny-height) --------------------------- */
/* We toggle .mini-land on <body> with a tiny JS helper below */
body.mini-land .hdr-bar { padding: 4px 8px; gap: 8px; }
body.mini-land .hello { display: none; }

body.mini-land .brandlogo { width: 100px; height: auto; }
@media (min-width: 768px) {
  body.mini-land .brandlogo { width: 110px; }
}

/* Auth buttons: icon-only, smaller height */
body.mini-land #signOutBtn .btn-label,
body.mini-land #signInBtn  .btn-label,
body.mini-land #signUpBtn  .btn-label { display:none; }
body.mini-land .auth .btn { height: 36px; padding: 0 8px; }

/* Toolbar becomes a single compact row; totals page hidden in mini mode */
body.mini-land .header-tools { padding: 0; border-top: 1px solid var(--ring); }
body.mini-land .snap-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.mini-land .snap-page { padding: 6px 8px; box-sizing: border-box; }
body.mini-land #pageTotals { display: none; }
body.mini-land #totals { display: none; }
body.mini-land .snap-dots { display: none; }

/* Month chip stays tappable but shorter */
body.mini-land .month-wrap { min-width: 170px; height: 36px; padding: 0 6px; }
body.mini-land .month-wrap input { height: 32px; }

/* Buttons = icon-only square chips (44px hit target) */
body.mini-land .btn-grid { display: flex; flex-wrap: nowrap; gap: 8px; margin: 6px 0 0; }
body.mini-land .btn-grid .btn { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; justify-content: center; }
body.mini-land .btn-grid .btn .btn-label { display: none; }

/* Footer: slimmer */
body.mini-land .app-footer { padding: 8px 10px; gap: 8px; }
body.mini-land .app-footer .btn { height: 30px; padding: 2px 10px; }

/* Safety: if any brand text sneaks in, hide it */
.brand .brand-text, .brandname { display: none !important; }

/* ====== MINI-LANDSCAPE — extra shrink for header & chips =============== */
body.mini-land .hdr-bar{ padding:2px 6px; gap:6px; border-bottom:1px solid var(--ring); }
body.mini-land .auth .btn{ height:32px; padding:0 6px; }
body.mini-land .brandlogo{ width:92px; }            /* was 100–110 */

body.mini-land .month-wrap{
  min-width:160px; height:34px; padding:0 6px;
  border-radius:8px; font-size:13px;
}
body.mini-land .month-wrap .i{ font-size:14px; }
body.mini-land .month-wrap input{ height:30px; font-size:13px; }

/* Actions = icon-only 36px chips */
body.mini-land .btn-grid{ gap:6px; margin:6px 0 0; }
body.mini-land .btn-grid .btn{
  flex:0 0 36px; width:36px; height:36px;
  padding:0; justify-content:center; border-radius:8px;
}
body.mini-land .btn-grid .btn .i{ font-size:16px; }
body.mini-land .btn-grid .btn .btn-label{ display:none; }

/* Totals stay hidden in mini-land (calendar gets the height) */
body.mini-land #pageTotals, 
body.mini-land #totals, 
body.mini-land .snap-dots { display:none; }

/* Footer slimmer */
body.mini-land .app-footer{ padding:6px 8px; gap:6px; }
body.mini-land .app-footer .btn{ height:28px; padding:2px 8px; }

/* ====== DENSER CALENDAR TYPOGRAPHY & PADDING =========================== */
body.mini-land .calendar{ gap:8px; padding:8px 10px; }
body.mini-land .day{ min-height:90px; border-radius:10px; }
body.mini-land .dayHeader{ padding:4px 6px; }
body.mini-land .dayHeader .date{ font-weight:700; font-size:13px; }
body.mini-land .dayHeader .bal{ font-size:11px; }

body.mini-land .entries{ padding:4px 6px; gap:4px; }
body.mini-land .entry{
  padding:4px 6px; gap:6px; border-radius:8px; 
  border-width:1px; /* keep a hint of structure */
}
body.mini-land .entry .desc{ font-size:12px; }
body.mini-land .entry .amt{ font-size:12px; }

/* List mode density too */
body.mini-land .listday{ padding:8px; border-radius:10px; }
body.mini-land .listday .top .label{ font-size:13px; }
body.mini-land .listday .top .bal{ font-size:11px; }
body.mini-land .listentries{ gap:4px; }

/* ====== ULTRA-TIGHT (very short height) ================================= */
body.mini-land.tight .brandlogo{ width:86px; }
body.mini-land.tight .auth .btn{ height:28px; }

body.mini-land.tight .month-wrap{ min-width:150px; height:32px; }
body.mini-land.tight .month-wrap input{ height:28px; }

body.mini-land.tight .btn-grid .btn{ width:34px; height:34px; }
body.mini-land.tight .btn-grid .btn .i{ font-size:15px; }

body.mini-land.tight .day{ min-height:82px; }
body.mini-land.tight .dayHeader{ padding:3px 5px; }
body.mini-land.tight .dayHeader .date{ font-size:12px; }
body.mini-land.tight .dayHeader .bal{ font-size:10px; }
body.mini-land.tight .entries{ padding:3px 5px; gap:3px; }
body.mini-land.tight .entry{ padding:3px 5px; }
body.mini-land.tight .entry .desc,
body.mini-land.tight .entry .amt{ font-size:11px; }

/* Keep brand text hidden if any sneaks back in */
.brand .brand-text, .brandname { display:none !important; }


/* Icon-only Settings button on phones */
@media (max-width:640px){
  #settingsBtn .btn-label{ display:none; }
  
  /* ===== Compact Header & Toolbar Layout Overrides ===== */
.app-header {
  background: var(--card);
  border-bottom: 1px solid var(--ring);
  padding: 4px 0;
}

.brandbar {
  padding: 6px 0;
}

.brandlogo {
  height: 60px; /* smaller logo */
  transition: transform 0.2s ease;
}
.brandbtn:hover .brandlogo {
  transform: scale(1.02);
}

.navwrap {
  padding: 6px 0;
}

.tools-actions .btn,
.tools-totals .btn,
.month-wrap {
  height: 36px !important;
  padding: 4px 10px !important;
  border-radius: 8px;
}

.tools-actions {
  gap: 6px;
}

.tools-totals {
  font-size: 15px;
}

.calendar {
  padding-top: 4px !important;
}

#totals {
  font-size: 15px;
  font-weight: 600;
}

.app-footer {
  padding: 8px 12px;
}

.btn .i {
  font-size: 16px;
}

/* ======= Header + Toolbar Compression v2 ======= */
.app-header {
  padding: 2px 0;
}

.brandbar {
  padding: 2px 0;
  min-height: 48px;
}

.brandlogo {
  height: 42px; /* down from 60 */
}

/* Tighten toolbar */
.navwrap {
  padding: 2px 0;
}

.tools-actions .btn,
.month-wrap {
  height: 32px !important;
  padding: 2px 8px !important;
  border-radius: 6px;
  font-size: 14px;
}

.tools-actions {
  gap: 4px;
}

/* Reduce totals line space */
.tools-totals {
  margin-top: 0;
  font-size: 14px;
}

#totals {
  padding-top: 2px;
  font-weight: 600;
  font-size: 14px;
}

/* Pull calendar up closer to toolbar */
.calendar {
  margin-top: 2px;
  padding-top: 0 !important;
  gap: 6px;
}

/* Slightly smaller footer */
.app-footer {
  padding: 6px 10px;
  font-size: 14px;
}
.app-header {
  box-shadow: none;
  border-bottom: 1px solid var(--ring);
}
#totals {
  color: var(--muted);
  font-weight: 500;
}
/* Stack totals below the buttons */
.navgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.tools-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}

.tools-totals {
  text-align: right;
  font-size: 14px;
  color: var(--muted);
  padding-right: 4px;
}

/* ===== FINAL COMPACT HEADER + TOOLBAR OVERRIDE ===== */
.app-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 2px 8px !important;
  gap: 4px !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--ring) !important;
  box-shadow: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  min-height: 40px !important;
}

.brand h1 {
  margin: 0 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.toolbar .btn,
.toolbar input,
.toolbar button,
select {
  height: 28px !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

.brandlogo {
  height: 38px !important;
  width: auto !important;
  transition: transform 0.2s ease !important;
}
.brandbtn:hover .brandlogo {
  transform: scale(1.02) !important;
}

.month-wrap {
  height: 30px !important;
  padding: 0 6px !important;
  border-radius: 6px !important;
}
.month-wrap input {
  height: 26px !important;
  font-size: 13px !important;
}

.app-footer {
  padding: 4px 8px !important;
  font-size: 13px !important;
}

.btn {
  height: 30px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
}

/* Mobile extra-tight mode */
@media (max-width: 480px) {
  .app-header { padding: 2px 6px !important; }
  .brandlogo { height: 32px !important; }
  .btn, .toolbar .btn { height: 26px !important; font-size: 12px !important; }
}
/* ===================== RESPONSIVE HEADER FIX ===================== */

/* --- Default: comfortable mobile layout --- */
@media (max-width: 640px) {
  .app-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px !important;
  }

  .brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  #authBar {
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .toolbar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .toolbar .btn,
  .toolbar input,
  .toolbar button,
  select {
    height: 38px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  .month-wrap {
    grid-column: span 3;
    justify-content: center;
    height: 40px !important;
    font-size: 15px;
  }

  .tools-totals {
    text-align: center;
    font-size: 15px;
    margin-top: 4px;
  }

  .brandlogo {
    height: 52px !important;
    width: auto !important;
  }

  #totals {
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
  }
}

/* --- Desktop: ultra-compact version --- */
@media (min-width: 641px) {
  .app-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 2px 8px !important;
    gap: 4px !important;
    background: var(--card);
    color: var(--ink);
    border-bottom: 1px solid var(--ring);
    box-shadow: none;
    min-height: 40px;
  }

  .toolbar .btn,
  .toolbar input,
  .toolbar button,
  select {
    height: 28px !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  .brandlogo {
    height: 36px !important;
    width: auto !important;
  }

  .month-wrap {
    height: 30px !important;
    padding: 0 6px !important;
  }
}
/* ======= MOBILE LANDSCAPE COMPACT HEADER BAR ======= */
@media (max-height: 480px) and (orientation: landscape) {
  /* Compact toolbar mode */
  .app-header {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    height: 44px !important;
    overflow-x: auto !important;
    background: var(--card);
    border-bottom: 1px solid var(--ring);
  }

  /* Hide greeting / big blocks */
  .hello, #userEmail, .brand h1 {
    display: none !important;
  }

  /* Logo smaller and inline */
  .brandlogo {
    height: 32px !important;
    width: auto !important;
    flex-shrink: 0;
  }

  /* Make all buttons uniform and inline */
  .toolbar,
  #authBar,
  .tools-actions,
  .navgrid {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .toolbar .btn,
  .btn,
  select,
  input[type="month"] {
    height: 34px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    white-space: nowrap;
  }

  /* Month selector compact */
  .month-wrap {
    height: 34px !important;
    padding: 0 6px !important;
    min-width: 140px !important;
  }
  .month-wrap::before {
    font-size: 14px;
    left: 8px;
  }
  .month-wrap input {
    height: 28px !important;
    font-size: 13px !important;
    padding-left: 28px !important;
  }

  /* Hide secondary bars to free screen space */
  .navwrap,
  .tools-totals,
  .app-footer {
    display: none !important;
  }

  /* Let calendar take full height */
  .calendar {
    padding: 4px 6px !important;
    margin: 0 !important;
    height: calc(100dvh - 44px) !important;
    overflow-y: auto !important;
  }

  /* Slightly smaller day cards */
  .day {
    min-height: 100px;
    border-radius: 10px;
  }
  .dayHeader .date {
    font-size: 13px;
  }
  .dayHeader .bal {
    font-size: 11px;
  }
}
/* ============================================================
   MOBILE LANDSCAPE COMPACT MODE + LOCKED FOOTER
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  /* === Compact Header / Toolbar === */
  .app-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    height: 44px !important;
    background: var(--card);
    border-bottom: 1px solid var(--ring);
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .app-header > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* Hide large items */
  .hello, #userEmail, .brand h1 {
    display: none !important;
  }

  /* Logo compact inline */
  .brandlogo {
    height: 30px !important;
    width: auto !important;
  }

  /* Toolbar & buttons unified row */
  .toolbar,
  #authBar,
  .tools-actions,
  .navgrid {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .btn,
  .toolbar .btn,
  select,
  input[type="month"] {
    height: 34px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    white-space: nowrap;
  }

  /* Month selector smaller */
  .month-wrap {
    height: 34px !important;
    padding: 0 6px !important;
    min-width: 140px !important;
    flex-shrink: 0;
  }
  .month-wrap::before {
    font-size: 14px;
    left: 8px;
  }
  .month-wrap input {
    height: 28px !important;
    font-size: 13px !important;
    padding-left: 28px !important;
  }

  /* Hide secondary bars & totals */
  .navwrap,
  .tools-totals {
    display: none !important;
  }

  /* === Calendar Area === */
  .calendar {
    padding: 4px 6px !important;
    margin: 0 !important;
    height: calc(100dvh - 44px - 34px) !important; /* header + footer */
    overflow-y: auto !important;
    scrollbar-width: thin;
  }

  .day {
    min-height: 90px;
    border-radius: 10px;
  }

  .dayHeader .date { font-size: 13px; }
  .dayHeader .bal { font-size: 11px; }

  /* === Locked Footer (Compact) === */
  .app-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    width: 100%;
    height: 34px;
    padding: 4px 8px !important;
    background: var(--card);
    border-top: 1px solid var(--ring);
    color: var(--muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 20;
  }

  .app-footer .btn {
    height: 28px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
  }
}

/* === Ensure Footer Always Locks to Bottom on All Mobile Views === */
@media (max-width: 640px) and (orientation: portrait) {
  .app-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    width: 100%;
    height: 40px;
    padding: 6px 10px !important;
    background: var(--card);
    border-top: 1px solid var(--ring);
    font-size: 14px;
    z-index: 20;
  }
  main {
    padding-bottom: 50px; /* ensure content never hidden behind footer */
  }
}}
/* =============================================================
   INLINE SCROLLABLE HEADER BAR FOR MOBILE LANDSCAPE
   (non-destructive final enhancement)
   ============================================================= */
@media (max-height: 480px) and (orientation: landscape) {
  /* Turn entire header into one scrollable row */
  .app-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 4px 8px !important;
    height: 44px !important;
  }

  .app-header > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* Hide greeting text to save space */
  .hello, #userEmail, .brand h1 {
    display: none !important;
  }

  /* Keep logo visible and compact */
  .brandlogo {
    height: 30px !important;
    width: auto !important;
    flex-shrink: 0;
  }

  /* Make all control groups share the same line */
  .toolbar,
  #authBar,
  .tools-actions,
  .navgrid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .toolbar .btn,
  .btn,
  select,
  input[type="month"] {
    height: 34px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    white-space: nowrap;
  }

  /* Month selector kept inline */
  .month-wrap {
    height: 34px !important;
    padding: 0 6px !important;
    min-width: 140px !important;
    flex-shrink: 0;
  }
  .month-wrap input {
    height: 28px !important;
    font-size: 13px !important;
    padding-left: 28px !important;
  }

  /* Calendar occupies remaining height */
  .calendar {
    height: calc(100dvh - 44px - 34px) !important; /* header + footer */
    margin: 0 !important;
    padding: 4px 6px !important;
    overflow-y: auto !important;
  }

  /* Footer pinned and minimal */
  .app-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    width: 100%;
    height: 34px;
    padding: 4px 8px !important;
    background: var(--card);
    border-top: 1px solid var(--ring);
    color: var(--muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 30;
  }
}
/* ============================================================
   DESKTOP HEADER DOWNSIZE — FOCUS ON CALENDAR
   ============================================================ */
@media (min-width: 1025px) {
  /* Slimmer header bar */
  .app-header {
    padding: 4px 12px !important;
    min-height: 52px !important; /* was taller */
    border-bottom: 1px solid var(--ring);
  }

  .brandlogo {
    height: 75px !important;
    width: auto !important;
  }

  /* Greeting & auth section tighter */
  #authBar {
    gap: 6px !important;
  }

  #authBar .btn {
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
  }

  /* Toolbar / buttons more compact */
  .toolbar {
    gap: 6px !important;
  }

  .toolbar .btn,
  .toolbar input,
  .toolbar button,
  select {
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
  }

  /* Month selector fits neatly */
  .month-wrap {
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 14px !important;
  }
  .month-wrap::before {
    font-size: 16px !important;
  }
  .month-wrap input {
    height: 28px !important;
    font-size: 14px !important;
    padding-left: 30px !important;
  }

  /* Totals bar smaller font and margin */
  #totals {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  /* Calendar gets more breathing room */
  .calendar {
    margin-top: 4px !important;
    padding-top: 6px !important;
  }

  /* Footer slightly thinner for desktop */
  .app-footer {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }
/* ====== Landing Additions ====== */

.hero {
  max-width:900px;margin:60px auto;text-align:center;padding:0 16px;
}
.hero h1 {font-size:2rem;line-height:1.2;margin-bottom:12px;}
.hero .sub {color:var(--muted);margin-bottom:20px;}
.trustbar {display:flex;justify-content:center;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted);}
.trustbar span {display:flex;align-items:center;gap:4px;}

.mockup-frame {max-width:900px;margin:40px auto;text-align:center;}
.mockup-img {width:100%;max-width:900px;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.45);transition:transform .3s;}
.mockup-img:hover {transform:scale(1.02);}

.how {max-width:1100px;margin:60px auto;padding:0 16px;text-align:center;}
.how h2 {font-size:22px;margin-bottom:18px;}
.steps {display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.step {background:var(--card);border:1px solid #1f2937;border-radius:12px;padding:18px;transition:transform .25s;}
.step:hover {transform:translateY(-4px);}
.step h4 {color:var(--brand);margin-bottom:6px;}

.testimonials {max-width:900px;margin:70px auto;text-align:center;overflow:hidden;}
.t-carousel {display:flex;transition:transform .6s ease;}
.t-card {min-width:100%;padding:20px;background:var(--card);border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,.3);}
.t-name {margin-top:8px;font-weight:600;}
.t-dots {display:flex;justify-content:center;gap:8px;margin-top:10px;}
.t-dots .dot {width:10px;height:10px;border-radius:50%;background:#334155;border:0;cursor:pointer;}
.t-dots .dot.active {background:var(--brand);}

.pricing {max-width:900px;margin:80px auto;text-align:center;}
.pricing h2 {margin-bottom:18px;}
.pricing-table {width:100%;border-collapse:collapse;}
.pricing-table th, .pricing-table td {border:1px solid #1f2937;padding:10px;}
.pricing-table th {background:#0d1628;color:var(--ink);}
.pricing-table td {background:var(--card);}
.pricing-table button {margin-top:4px;}

.btn {transition:transform .15s, box-shadow .15s;}
.btn:hover {transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.3);}
.btn:active {transform:translateY(1px);box-shadow:none;}

.socials {display:flex;gap:12px;justify-content:center;margin-top:14px;}
.social-icon {width:24px;height:24px;filter:invert(1);opacity:.8;transition:transform .2s;}
.social-icon:hover {transform:scale(1.15);opacity:1;}
:root[data-theme="light"] .invertable {filter:none;}

/* Fade-in reveal */
.reveal {opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;}
.reveal.show {opacity:1;transform:none;}

/* Pulse CTA */
.pulse {animation:pulse 3s infinite;}
@keyframes pulse {0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.3);}50%{box-shadow:0 0 0 12px rgba(34,197,94,0);}}

/* Responsive */
@media (max-width:600px){
  .hero h1{font-size:1.6rem;}
  .mockup-frame{margin:30px auto;}
  .step{padding:14px;}
  .t-card{padding:16px;}
}

/* === Scroll Reveal Animation === */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.reveal-visible {
  opacity: 1;
  transform: none;
}

.calendar .entry .desc {
  white-space: normal !important;     /* allow wrapping */
  overflow: visible !important;       /* prevent clipping */
  text-overflow: unset !important;    /* no ellipsis */
  display: block !important;          /* fixes flex squeeze */
  line-height: 1.25;                  /* tighter for multi-line */
  max-width: 100% !important;         /* stop shrinking */
}

}

/* ===== ExactMoney command-center overview ===== */
.overview {
  display: grid;
  gap: 12px;
  padding: 14px 16px 6px;
}
.overview-hero,
.overview-grid,
.overview-panel,
.calendar-empty {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.overview-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--ring);
  border-left: 5px solid var(--income);
  border-radius: 8px;
  padding: 16px;
}
.overview-hero.is-tight { border-left-color: var(--bal-warn); }
.overview-hero.is-danger,
.overview-hero.is-negative { border-left-color: var(--expense); }
.overview-hero h2 {
  margin: 2px 0 4px;
  font-size: 26px;
  line-height: 1.1;
}
.overview-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}
.eyebrow,
.overview-number span,
.metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.overview-number {
  min-width: 190px;
  text-align: right;
}
.overview-number strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.overview-number small {
  color: var(--muted);
}
.overview-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
}
.metric {
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 8px;
  padding: 12px;
}
.metric strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.metric-wide {
  grid-column: span 2;
}
.insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.insights-card {
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 8px;
  padding: 14px;
}
.insights-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.insights-card-head h3 {
  margin: 0;
  font-size: 16px;
}
.insights-card-head span,
.category-row small,
.insights-scale,
.insights-summary small,
.insights-empty {
  color: var(--muted);
  font-size: 12px;
}
.category-chart {
  display: grid;
  gap: 10px;
}
.category-row {
  display: grid;
  gap: 5px;
}
.category-row-head,
.insights-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.category-row-head span,
.category-row-head strong,
.insights-summary strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-row-head strong,
.insights-summary strong {
  font-variant-numeric: tabular-nums;
}
.category-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--pill);
}
.category-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--expense);
}
.balance-chart {
  display: block;
  width: 100%;
  height: 150px;
  overflow: visible;
}
.balance-chart-line {
  fill: none;
  stroke: var(--brand);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.balance-chart-zero {
  stroke: var(--expense);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  opacity: .75;
}
.insights-scale {
  display: flex;
  justify-content: space-between;
  margin-top: -4px;
}
.insights-summary {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ring);
}
.insights-summary span {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.overview-panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,.75fr);
  gap: 12px;
}
.overview-panel > div,
.calendar-empty {
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 8px;
  padding: 14px;
}
.overview-panel h3,
.calendar-empty h3 {
  margin: 0 0 8px;
  font-size: 16px;
}
.overview-panel p,
.calendar-empty p {
  color: var(--muted);
  line-height: 1.45;
}
.overview-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.overview-panel li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid color-mix(in oklab,var(--ring) 65%, transparent);
  padding-bottom: 8px;
}
.overview-panel li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.overview-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.calendar-empty {
  grid-column: 1 / -1;
  text-align: center;
}
@media (max-width: 860px) {
  .overview-hero,
  .overview-panel {
    grid-template-columns: 1fr;
  }
  .overview-number {
    text-align: left;
  }
  .overview-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .metric-wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .overview {
    padding: 10px 10px 4px;
  }
  .overview-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Product polish layer: calmer household finance command center ===== */
:root {
  --bg: #101827;
  --card: #151f2e;
  --surface: #111a28;
  --pill: #0f1724;
  --ring: #263244;
  --ink: #f3f6fa;
  --muted: #a8b3c2;
  --brand: #2fbf71;
  --income: #34c77b;
  --expense: #ee5f67;
  --pending: #e8a93f;
  --cleared: #4fa3d9;
  --bal-warn: #d9a441;
}
:root[data-theme="light"] {
  --bg: #f5f7fa;
  --card: #ffffff;
  --surface: #eef3f7;
  --pill: #f7fafc;
  --ring: #d8e0ea;
  --ink: #132033;
  --muted: #657388;
  --brand: #247a4a;
  --income: #168a50;
  --expense: #c94b55;
  --pending: #a96f13;
  --cleared: #256f9f;
  --bal-warn: #986b14;
}
body {
  background: var(--bg);
}
.app-header {
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.brandbar {
  padding: 8px 0;
}
.brandlogo {
  max-height: 64px !important;
}
.navwrap {
  background: color-mix(in oklab, var(--card) 94%, var(--surface));
}
.btn,
select,
input,
textarea,
.month-wrap {
  border-radius: 8px !important;
}
.btn {
  align-items: center;
  justify-content: center;
  font-weight: 650;
}
.btn-primary {
  color: #fff !important;
}
.overview-hero {
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.overview-hero.is-safe {
  background: linear-gradient(135deg, color-mix(in oklab, var(--card) 86%, var(--income)), var(--card));
}
.overview-hero.is-tight {
  background: linear-gradient(135deg, color-mix(in oklab, var(--card) 88%, var(--bal-warn)), var(--card));
}
.overview-hero.is-danger,
.overview-hero.is-negative {
  background: linear-gradient(135deg, color-mix(in oklab, var(--card) 88%, var(--expense)), var(--card));
}
.metric,
.overview-panel > div,
.calendar-empty,
.day,
.listday {
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.day {
  min-height: 150px;
}
.dayHeader {
  min-height: 42px;
}
.dayHeader .date {
  font-weight: 750;
}
.entry {
  border-style: solid !important;
  border-radius: 8px !important;
}
.entry .desc {
  line-height: 1.25;
}
.entry.income {
  background: color-mix(in oklab, var(--pill) 86%, var(--income)) !important;
}
.entry.expense {
  background: color-mix(in oklab, var(--pill) 88%, var(--expense)) !important;
}
dialog {
  border: 1px solid var(--ring);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
dialog h3 {
  font-size: 20px;
}
label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}
label input,
label select,
label textarea {
  margin-top: 6px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}
.toast {
  left: 16px;
  right: auto;
  max-width: min(420px, calc(100vw - 32px));
}
@media (min-width: 1025px) {
  .app-header {
    padding: 0 10px !important;
  }
  .brandbar {
    padding: 2px 0 !important;
  }
  .navwrap {
    padding: 4px 0 6px !important;
  }
  .brandlogo {
    height: 46px !important;
  }
  .tools-actions .btn,
  #authBar .btn,
  .month-wrap {
    height: 34px !important;
  }
  .calendar {
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    max-width: 1280px;
    margin: 0 auto;
  }
}
@media (max-width: 640px) {
  .app-header {
    display: block !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  .brandbar {
    align-items: center;
    padding: 4px 8px !important;
    min-height: 44px !important;
  }
  .brandlogo {
    height: 34px !important;
  }
  #authBar {
    flex-wrap: wrap;
    gap: 4px !important;
    justify-content: flex-end;
  }
  #authBar .btn {
    height: 32px !important;
    padding: 3px 7px !important;
    font-size: 12px !important;
  }
  .navwrap {
    padding: 4px 8px !important;
  }
  .tools-actions {
    gap: 5px;
  }
  .tools-actions .btn,
  .month-wrap {
    height: 34px !important;
  }
  .overview-hero,
  .metric,
  .overview-panel > div,
  .calendar-empty {
    padding: 12px;
  }
  .overview-hero h2 {
    font-size: 23px;
  }
  .calendar {
    padding-bottom: 56px !important;
  }
  .app-footer .socials {
    display: none;
  }
}

/* ===== ExactMoney app readability pass ===== */
body {
  font-size: 15px;
  line-height: 1.45;
}

main {
  padding-bottom: 24px;
}

.container {
  max-width: 1280px;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklab, var(--card) 96%, var(--bg));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.brandbar {
  min-height: 64px;
  padding: 8px 0 !important;
}

.brandbtn {
  min-width: 0;
  padding: 4px 0;
}

.brandlogo {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
}

#authBar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.google-auth-btn {
  width: 100%;
  margin: 4px 0 12px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--ring);
}

.hello {
  max-width: min(32vw, 260px);
  overflow: hidden;
  color: var(--ink);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navwrap {
  padding: 10px 0 !important;
  background: var(--bg);
}

.navgrid {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.tools-actions {
  min-width: 0;
}

.month-wrap {
  flex: 0 1 220px;
  min-width: 180px;
  height: 42px !important;
}

.tools-actions .btn,
#authBar .btn,
.app-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: 1;
}

#settingsBtn,
#themeToggleBtn {
  padding-inline: 10px !important;
}

#totals {
  color: var(--ink);
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.35;
  white-space: nowrap;
}

#totals strong {
  font-variant-numeric: tabular-nums;
}

.overview {
  gap: 14px;
  padding: 18px 20px 8px;
}

.overview-hero,
.overview-grid,
.overview-panel,
.calendar-empty,
.calendar {
  max-width: 1280px;
}

.overview-hero {
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  padding: 18px 20px;
}

.overview-hero h2 {
  font-size: 24px;
  letter-spacing: 0;
}

.overview-grid {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.metric {
  min-height: 78px;
  padding: 14px 16px;
}

.metric strong {
  overflow-wrap: anywhere;
}

.overview-panel {
  grid-template-columns: minmax(320px, .72fr) minmax(280px, .45fr);
}

.overview-panel li span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.overview-panel li strong {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.calendar {
  gap: 12px;
  padding: 12px 20px 24px;
}

@media (min-width: 1025px) {
  .calendar {
    grid-template-columns: repeat(7, minmax(150px, 1fr)) !important;
  }
}

.day,
.listday {
  overflow: hidden;
  border-radius: 8px !important;
}

.day {
  min-height: 176px !important;
}

.day:empty {
  opacity: .38;
}

.dayHeader {
  min-height: 44px;
  padding: 9px 10px !important;
}

.dayHeader .date,
.listday .label {
  font-size: 15px;
  font-weight: 800;
}

.dayHeader .bal,
.listday .bal {
  flex: 0 0 auto;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}

.entries,
.listentries {
  gap: 8px !important;
}

.entry {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid var(--ring) !important;
  border-left-width: 4px !important;
  border-radius: 8px !important;
  background: var(--pill) !important;
  gap: 10px !important;
}

.entry:hover {
  border-color: color-mix(in oklab, var(--ring) 70%, var(--brand)) !important;
  filter: brightness(1.04);
}

.entry.income {
  border-left-color: var(--income) !important;
}

.entry.expense {
  border-left-color: var(--expense) !important;
}

.entry.note {
  border-left-color: var(--note) !important;
}

.entry .desc {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750 !important;
  line-height: 1.2;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.entry .amt {
  color: var(--ink);
  font-size: 14px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap !important;
}

.calendar.listmode {
  max-width: 760px !important;
  padding-inline: 20px;
}

.listday {
  padding: 12px !important;
}

.listday .top {
  padding-bottom: 8px;
}

.app-footer {
  position: static !important;
  display: flex;
  flex-wrap: wrap;
  min-height: 56px;
  padding: 10px 20px !important;
}

.app-footer > div:first-child {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  min-width: 0;
}

.socials {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.social-wrap,
.social-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-text {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.social-icon {
  width: 24px;
  height: 24px;
  opacity: .85;
  filter: invert(1);
}

:root[data-theme="light"] .invertable {
  filter: none;
}

@media (max-width: 900px) {
  .navgrid,
  .overview-hero,
  .overview-panel {
    grid-template-columns: 1fr;
  }

  .tools-totals,
  #totals {
    justify-self: stretch;
    text-align: left;
    white-space: normal;
  }

  .overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-wide {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  main {
    padding-bottom: 0;
  }

  .app-header {
    position: sticky !important;
  }

  .brandbar {
    min-height: 50px !important;
    padding: 6px 10px !important;
  }

  .brandlogo {
    height: 36px !important;
    max-height: 36px !important;
  }

  .hello {
    max-width: 34vw;
    font-size: 14px;
  }

  #authBar {
    flex-wrap: nowrap;
    gap: 6px !important;
  }

  #authBar .btn {
    height: 36px !important;
    min-width: 36px;
    padding: 6px 8px !important;
  }

  #signOutBtn .btn-label,
  #settingsBtn .btn-label,
  #signInBtn .btn-label,
  #signUpBtn .btn-label {
    display: none;
  }

  .navwrap {
    padding: 8px 10px !important;
  }

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

  .month-wrap {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .tools-actions .btn {
    width: 100%;
    height: 42px !important;
    padding: 0 !important;
  }

  .tools-actions .btn .btn-label {
    display: none !important;
  }

  .overview {
    gap: 10px;
    padding: 12px 10px 6px;
  }

  .overview-hero {
    gap: 12px;
    padding: 14px;
  }

  .overview-number {
    min-width: 0;
    text-align: left;
  }

  .overview-number strong {
    font-size: 22px;
  }

  .overview-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .metric {
    min-height: 0;
    padding: 12px;
  }

  .overview-panel {
    display: block;
  }

  .overview-panel > div + div {
    margin-top: 10px;
  }

  .calendar {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    padding: 10px 10px 18px !important;
  }

  .calendar:not(.listmode) .day:empty {
    display: none;
  }

  .day {
    width: 100%;
    min-height: auto !important;
  }

  .dayHeader {
    min-height: 46px;
  }

  .entries {
    padding: 10px !important;
  }

  .entry {
    grid-template-columns: 1fr;
    gap: 6px !important;
    padding: 11px 12px !important;
  }

  .entry .desc {
    font-size: 15px;
    white-space: normal !important;
  }

  .entry .amt {
    justify-self: end;
    font-size: 15px !important;
  }

  .calendar.listmode {
    padding-inline: 10px !important;
  }

  .app-footer {
    gap: 10px;
    min-height: 0;
    padding: 12px 10px !important;
  }

  .app-footer > div:first-child {
    justify-content: center;
    width: 100%;
  }
}

@media (orientation: landscape) and (max-width: 1024px) {
  .calendar:not(.listmode) {
    grid-template-columns: repeat(7, minmax(120px, 1fr)) !important;
    overflow-x: auto !important;
  }

  .day {
    min-height: 150px !important;
  }
}

/* Final calendar entry and form contrast guard. */
.calendar .entry,
.listentries .entry {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  row-gap: 6px !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
}

.calendar .entry .desc,
.listentries .entry .desc {
  display: -webkit-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-height: 1.18 !important;
}

.calendar .entry .amt,
.listentries .entry .amt {
  justify-self: end !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-align: right !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
}

.calendar:not(.listmode) .entries {
  min-height: 0;
  overflow: hidden;
}

@media (min-width: 641px) {
  .calendar:not(.listmode) {
    grid-auto-rows: 224px;
    align-items: stretch;
  }

  .calendar:not(.listmode) .day {
    height: 224px;
    min-height: 0 !important;
  }

  .calendar:not(.listmode) .entries {
    flex: 1 1 auto;
    max-height: 180px;
  }
}

.day-flow-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid color-mix(in oklab, var(--ring) 80%, var(--brand));
  border-radius: 8px;
  background: color-mix(in oklab, var(--surface) 78%, var(--pill));
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}

.day-flow-summary:hover {
  border-color: color-mix(in oklab, var(--ring) 44%, var(--brand));
  filter: brightness(1.03);
}

.day-flow-summary span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.day-flow-summary span:first-child {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.day-flow-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.day-flow-summary strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.entry-more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid var(--ring);
  border-radius: 7px;
  background: color-mix(in oklab, var(--surface) 74%, var(--pill));
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.entry-more:hover {
  border-color: color-mix(in oklab, var(--ring) 55%, var(--brand));
  color: var(--ink);
  filter: brightness(1.04);
}

.entry-more span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-more strong {
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.entry-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 45px;
  padding: 6px 8px;
  border: 1px solid var(--ring);
  border-left-width: 4px;
  border-radius: 7px;
  background: color-mix(in oklab, var(--pill) 88%, var(--card));
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.entry-chip:hover {
  border-color: color-mix(in oklab, var(--ring) 55%, var(--brand));
  filter: brightness(1.04);
}

.entry-chip.income {
  border-left-color: var(--income);
  background: color-mix(in oklab, var(--income) 10%, var(--pill));
}

.entry-chip.expense {
  border-left-color: var(--expense);
  background: color-mix(in oklab, var(--expense) 9%, var(--pill));
}

.entry-chip-label {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-overflow: unset;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.entry-chip-amt {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  justify-self: end;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Final compact overview and single view-toggle treatment. */
.overview {
  gap: 10px !important;
  padding: 12px 20px 8px !important;
}

.overview-compact,
.overview-details {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.overview-compact {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, auto) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--ring);
  border-left: 5px solid var(--income);
  border-radius: 8px;
  background: var(--card);
}

.overview-compact.is-tight {
  border-left-color: var(--bal-warn);
}

.overview-compact.is-danger,
.overview-compact.is-negative {
  border-left-color: var(--expense);
}

.overview-compact-main {
  min-width: 0;
}

.overview-compact-main span,
.overview-compact-stats small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.overview-compact-main strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.overview-compact-main small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.overview-compact-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 10px;
}

.overview-compact-stats span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.overview-compact-stats strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.overview-toggle {
  min-width: 96px;
  justify-content: center;
}

.overview-details {
  display: none;
}

.overview-details.is-open {
  display: grid;
  gap: 14px;
}

.overview-details .overview-grid {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.overview-details .metric-wide {
  grid-column: span 2;
}

.overview-panel-empty-bills {
  grid-template-columns: minmax(0, .7fr) minmax(280px, .5fr) !important;
}

.tools-actions #toggleViewBtn {
  min-width: 104px;
  justify-content: center;
}

@media (max-width: 900px) {
  .overview-compact {
    grid-template-columns: 1fr;
  }

  .overview-compact-stats,
  .insights-grid,
  .overview-details .overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-details .metric-wide {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .overview {
    padding: 10px !important;
  }

  .overview-compact {
    gap: 12px;
  }

  .overview-compact-main strong {
    font-size: 22px;
  }

  .overview-compact-stats {
    grid-template-columns: 1fr;
  }

  .insights-grid {
    grid-template-columns: 1fr;
  }

  .tools-actions #toggleViewBtn {
    min-width: 0;
  }
}

/* Floating month navigation keeps Prev/Next reachable without scrolling. */
body.app-shell {
  padding-bottom: 86px;
}

.floating-month-nav {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--ring);
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 94%, transparent);
  box-shadow: 0 12px 32px var(--shadow);
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.floating-month-nav .btn {
  min-width: 94px;
  height: 38px !important;
  justify-content: center;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-weight: 850;
}

.floating-month-nav span {
  font-size: 20px;
  line-height: 0;
}

@media (max-width: 520px) {
  body.app-shell {
    padding-bottom: 96px;
  }

  .floating-month-nav {
    right: 12px;
    left: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    justify-content: space-between;
    transform: none;
  }

  .floating-month-nav .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

.day-details {
  padding: 16px;
}

.day-details-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.day-details-head h3 {
  margin: 0 0 4px;
}

.day-details-head p,
.day-details-empty {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.day-details-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(56vh, 520px);
  overflow: auto;
  padding-right: 2px;
}

.day-details-list .entry {
  width: 100%;
}

dialog input,
dialog select,
dialog textarea {
  width: 100%;
  background: var(--pill) !important;
  border: 1px solid var(--ring) !important;
  color: var(--ink) !important;
  caret-color: var(--brand);
  color-scheme: dark;
}

:root[data-theme="light"] dialog input,
:root[data-theme="light"] dialog select,
:root[data-theme="light"] dialog textarea {
  color-scheme: light;
}

dialog input::placeholder,
dialog textarea::placeholder {
  color: color-mix(in oklab, var(--muted) 82%, var(--ink)) !important;
  opacity: 1;
}

dialog input::selection,
dialog textarea::selection {
  background: color-mix(in oklab, var(--brand) 72%, white) !important;
  color: #07140d !important;
}

dialog input:focus,
dialog select:focus,
dialog textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 24%, transparent);
  outline: none;
}

/* Final app header logo sizing guard. */
.app-header .brandbar {
  min-height: 128px !important;
  padding-block: 12px !important;
}

.app-header .brandlogo {
  height: 112px !important;
  max-height: 112px !important;
  width: auto !important;
}

@media (max-width: 640px) {
  .app-header .brandbar {
    min-height: 86px !important;
    padding-block: 8px !important;
  }

  .app-header .brandlogo {
    height: 74px !important;
    max-height: 74px !important;
  }
}