  <style>
/* Tighten Fidelity header block */
.fidelity-header {
  padding: 0.5rem 0.75rem;      /* was ~1–1.5rem */
}

.fidelity-header h5 {
  margin: 0;                    /* remove top/bottom margin */
  line-height: 1.2;
  padding: 0.25rem 0.75rem;     /* slim banner feel */
}

/* Minimize extra vertical space around rows */
#divMinMax,
#divInfo {
  margin-top: 0.25rem;
  margin-bottom: 0;
}

    :root {
      --ios-bg: #f2f2f7;
      --glass-bg: rgba(255, 255, 255, 0.85);
      --glass-border: rgba(0, 0, 0, 0.1);
      --nav-height: 64px;
      --breadcrumb-height: 2.25rem;
      --mobile-nav-height: 80px;
      --footer-height: 56px;
      --primary-color: #0d6efd;
      --border-radius: 20px;
      --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    * {
      -webkit-tap-highlight-color: transparent;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
      width: 100%;
      max-width: 100vw;
      overflow-x: hidden;
    }

    body {
      background-color: var(--ios-bg);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      width: 100vw;
      padding-top: var(--nav-height);
      padding-bottom: var(--mobile-nav-height);
    }

    body.breadcrumbs-visible {
      padding-top: calc(var(--nav-height) + var(--breadcrumb-height));
    }

    @media (min-width: 992px) {
      body {
        padding-top: var(--nav-height);
        padding-bottom: var(--footer-height);
      }
      body.breadcrumbs-visible {
        padding-top: calc(var(--nav-height) + var(--breadcrumb-height));
      }
    }

    .glass-component {
      background: var(--glass-bg) !important;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border);
    }

    /* Top navbar with integrated toolbar row */
    .navbar-top {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1030;
      padding-top: env(safe-area-inset-top);
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      border-bottom: 1px solid var(--glass-border);
      background-color: #fff;
    }

    .navbar-brand-reset { margin-left: 0; }

    .toolbar-inline {
      border-top: 1px solid rgba(0,0,0,0.04);
      margin-top: 0.25rem;
      padding-top: 0.25rem;
    }

    .toolbar-icon {
      color: #555;
      font-size: 1.05rem;
      padding: 6px 10px;
      border-radius: 10px;
      transition: all 0.2s;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
    }
    .toolbar-icon:hover {
      background: rgba(0, 0, 0, 0.05);
      color: var(--primary-color);
    }
    .toolbar-separator {
      width: 1px;
      height: 22px;
      background: rgba(0, 0, 0, 0.08);
      margin: 0 10px;
    }

    /* Breadcrumbs */
    #divBreadCrumbs {
      display: none;
      position: fixed;
      top: var(--nav-height);
      left: 0;
      right: 0;
      width: 100%;
      background-color: #ffffff !important;
      border-bottom: 1px solid #e5e5e5;
      padding: 0.25rem 1.5rem !important;
      z-index: 1020;
      margin: 0 !important;
      font-size: 0.9rem !important;
      line-height: 1.4;
    }
    #divBreadCrumbs.show { display: block !important; }
    #divBreadCrumbs a {
      color: #0d6efd !important;
      text-decoration: none !important;
      font-weight: 500 !important;
    }
    #divBreadCrumbs a:hover {
      text-decoration: underline !important;
    }
    #divBreadCrumbs span {
      color: #999 !important;
    }

    /* Main content */
    .main-content {
      flex: 1;
      width: 100%;
      max-width: 100vw;
      padding: 1rem 0 2rem 0;
    }
    @media (min-width: 992px) {
      .main-content {
        padding: 1.5rem 0 2rem 0;
      }
    }

    .card-modern {
      border: none;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow-sm);
      background: #ffffff;
      transition: all 0.3s;
    }
    .card-modern:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }

    /* Sticky actions bar (Data / Calc / Tools) */
    .sticky-toolbar {
      position: sticky;
      top: 0;
      z-index: 15;
      background: #f8f9fa;
      padding: 4px 0;
      border-bottom: 1px solid #ddd;
    }

    /* Mobile bottom nav (unchanged structurally) */
    .mobile-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100vw;
      max-width: 100vw;
      height: var(--mobile-nav-height);
      padding-bottom: env(safe-area-inset-bottom);
      z-index: 1025;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding-top: 8px;
      overflow-x: auto;
      background: var(--glass-bg, #fff);
      box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
      border-top: 1px solid var(--glass-border);
    }
    @media (min-width: 992px) {
      .mobile-nav { display: none !important; }
    }
    .mobile-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      text-decoration: none;
      color: #8e8e93;
      transition: all 0.2s;
      flex: 1 1 0;
      min-width: 60px;
      max-width: 100px;
      font-size: 1rem;
      padding: 6px 0 2px 0;
      background: none;
      border: none;
      outline: none;
    }
    .mobile-nav-item.active { color: var(--primary-color); }
    .mobile-nav-item i { font-size: 1.5rem; }

    /* Footer */
    .footer-main {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      max-width: 100%;
      height: var(--footer-height);
      z-index: 1020;
      display: none;
      border-top: 1px solid #e5e5e5;
      background: #f8f9fa !important;
    }
    @media (min-width: 992px) {
      .footer-main { display: block; }
    }

    /* Debug panel (start collapsed chip-like) */
    .debug-panel {
      position: fixed;
      bottom: 16px;
      right: 16px;
      background: rgba(30, 30, 35, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 999px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      z-index: 9999;
      font-family: 'Monaco', 'Courier New', monospace;
      font-size: 12px;
      display: flex;
      align-items: center;
      padding: 4px 10px;
      cursor: pointer;
    }
    .debug-panel.expanded {
      border-radius: 8px;
      width: 500px;
      max-width: 90vw;
      height: 360px;
      flex-direction: column;
      padding: 0;
    }
    .debug-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      background: rgba(0, 0, 0, 0.3);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      color: #0d6efd;
      font-weight: bold;
      cursor: move;
      flex-shrink: 0;
    }
    .debug-messages {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 8px 10px;
      color: #00ff00;
      line-height: 1.4;
    }
    .debug-panel:not(.expanded) .debug-messages { display: none; }

    @media (max-width: 768px) {
      .debug-panel.expanded {
        bottom: 10px;
        right: 10px;
        width: calc(100vw - 20px);
        height: 280px;
      }
    }

    .btn-no-style {
      background: none;
      border: none;
      outline: none;
    }
    .search-input-custom { width: 200px; }
    .search-icon-absolute {
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
    }
  </style>
