:root {
       --nav-bg: rgba(255, 255, 255, .92);
       --nav-border: rgba(15, 23, 42, .12);
       --nav-text: #0f172a;
       --nav-muted: #64748b;
       --nav-accent: #ffcc00;
       --nav-accent2: #ffe27a;
       --nav-radius: 16px;
       --nav-shadow: 0 18px 40px rgba(15, 23, 42, .10);
       --nav-shadow2: 0 10px 26px rgba(15, 23, 42, .08);
       --nav-max: 1150px;
       --nav-focus: 0 0 0 4px rgba(255, 204, 0, .25);
   }

   /* ===== Topbar ===== */
   .v-topbar {
       position: sticky;
       top: 0;
       z-index: 1000;
       background: var(--nav-bg);
       backdrop-filter: blur(10px);
       border-bottom: 1px solid var(--nav-border);
       margin-top: 4px;
   }

   .v-topbar__inner {
       max-width: var(--nav-max);
       margin: 0 auto;
       padding: 10px clamp(12px, 3vw, 20px);
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .v-burger {
       width: 44px;
       height: 44px;
       border-radius: 14px;
       border: 1px solid var(--nav-border);
       background: #fff;
       box-shadow: var(--nav-shadow2);
       display: inline-grid;
       place-items: center;
       cursor: pointer;
       -webkit-tap-highlight-color: transparent;
       position: relative;
   }

   .v-burger:focus-visible {
       outline: none;
       box-shadow: var(--nav-focus), var(--nav-shadow2);
   }

   .v-burger__lines {
       width: 20px;
       height: 2px;
       background: var(--nav-text);
       border-radius: 2px;
       position: relative;
       display: block;
   }

   .v-burger__lines::before,
   .v-burger__lines::after {
       content: "";
       position: absolute;
       left: 0;
       width: 20px;
       height: 2px;
       background: var(--nav-text);
       border-radius: 2px;
   }

   .v-burger__lines::before {
       top: -6px;
   }

   .v-burger__lines::after {
       top: 6px;
   }

   .v-burger .bi {
       font-size: 20px;
       color: var(--nav-text);
       line-height: 1;
   }

   .v-burger[data-icon="on"] .v-burger__lines {
       display: none;
   }

   .v-brand {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       text-decoration: none;
       color: var(--nav-text);
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
       font-weight: 900;
       letter-spacing: .2px;
   }

   .v-brand__mark {
       width: 38px;
       height: 38px;
       border-radius: 14px;
       display: inline-grid;
       place-items: center;
       background: linear-gradient(180deg, var(--nav-accent2), var(--nav-accent));
       box-shadow: 0 10px 20px rgba(255, 204, 0, .25);
       color: #000;
       font-weight: 900;
   }

   .v-brand__sub {
       font-weight: 700;
       color: var(--nav-muted);
       margin-left: 6px;
   }

   /* ===== Desktop nav ===== */
   .v-nav {
       margin-left: auto;
       display: flex;
       align-items: center;
       gap: 8px;
       flex-wrap: wrap;
   }

   .v-link {
       text-decoration: none;
       color: var(--nav-text);
       font-weight: 800;
       padding: 10px 12px;
       border-radius: 12px;
       border: 1px solid transparent;
       transition: background .15s ease, border-color .15s ease;
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
       font-size: 14px;
       background: transparent;
   }

   .v-link:hover {
       background: #fff7d6;
       border-color: rgba(255, 204, 0, .45);
   }

   .v-link--cta {
       background: linear-gradient(180deg, var(--nav-accent2), var(--nav-accent));
       color: #000;
       border-color: rgba(0, 0, 0, .06);
   }

   @media (max-width: 980px) {
       .v-nav {
           display: none;
       }
   }

   /* ===== Desktop dropdown (details) ===== */
   .v-dd {
       position: relative;
   }

   .v-dd summary {
       list-style: none;
   }

   .v-dd summary::-webkit-details-marker {
       display: none;
   }

   .v-dd__sum {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       cursor: pointer;
   }

   .v-dd__menu {
       position: absolute;
       top: 48px;
       right: 0;
       min-width: 260px;
       background: #fff;
       border: 1px solid var(--nav-border);
       border-radius: 14px;
       box-shadow: var(--nav-shadow2);
       padding: 8px;
       display: grid;
       gap: 6px;
       z-index: 2000;
   }

   .v-dd:not([open]) .v-dd__menu {
       display: none;
   }

   .v-dd__item {
       text-decoration: none;
       color: var(--nav-text);
       font-weight: 800;
       border: 1px solid rgba(15, 23, 42, .10);
       border-radius: 12px;
       padding: 10px 10px;
       display: flex;
       align-items: center;
       gap: 10px;
       background: #fff;
       transition: background .15s ease, border-color .15s ease;
   }

   .v-dd__item:hover {
       background: #fff7d6;
       border-color: rgba(255, 204, 0, .55);
   }

   /* ===== Overlay + Drawer ===== */
   .v-overlay {
       position: fixed;
       inset: 0;
       background: rgba(15, 23, 42, .45);
       opacity: 0;
       pointer-events: none;
       transition: opacity .18s ease;
       z-index: 1100;
   }

   .v-overlay.is-open {
       opacity: 1;
       pointer-events: auto;
   }

   .v-drawer {
       position: fixed;
       top: 0;
       left: 0;
       height: 100svh;
       max-height: 100svh;
       width: min(86vw, 360px);
       background: #fff;
       border-right: 1px solid var(--nav-border);
       box-shadow: var(--nav-shadow);
       transform: translateX(-102%);
       transition: transform .22s ease;
       z-index: 1200;
       display: flex;
       flex-direction: column;
       overflow: hidden;
       /* muhimu kwa overlay panel */
   }

   .v-drawer.is-open {
       transform: translateX(0);
   }

   .v-drawer__top {
       padding: 14px 14px 10px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
       border-bottom: 1px solid var(--nav-border);
       background: #fff;
   }

   .v-close {
       width: 40px;
       height: 40px;
       border-radius: 12px;
       border: 1px solid var(--nav-border);
       background: #fff;
       box-shadow: var(--nav-shadow2);
       cursor: pointer;
       display: inline-grid;
       place-items: center;
   }

   .v-close .bi {
       font-size: 18px;
       color: var(--nav-text);
   }

   .v-drawer__body {
       padding: 12px;
       display: grid;
       gap: 8px;
       overflow: auto;
       -webkit-overflow-scrolling: touch;
   }

   .v-item {
       border: 1px solid var(--nav-border);
       border-radius: 14px;
       padding: 12px 12px;
       text-decoration: none;
       color: var(--nav-text);
       font-weight: 900;
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
       background: #fff;
       transition: background .15s ease, border-color .15s ease, transform .15s ease;
       display: flex;
       align-items: center;
       gap: 10px;
       cursor: pointer;
   }

   .v-item .bi {
       color: var(--nav-text);
       font-size: 16px;
   }

   .v-item:hover {
       background: #fff7d6;
       border-color: rgba(255, 204, 0, .55);
       transform: translateY(-1px);
   }

   .v-item--cta {
       background: linear-gradient(180deg, var(--nav-accent2), var(--nav-accent));
       color: #000;
       border-color: rgba(0, 0, 0, .06);
   }

   .v-item--cta .bi {
       color: #000;
   }

   .v-actions {
       display: grid;
       gap: 10px;
       margin-bottom: 10px;
   }

   .v-btn {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 12px 14px;
       border-radius: 14px;
       border: 1px solid var(--nav-border);
       background: #fff;
       color: var(--nav-text);
       font-weight: 900;
       text-decoration: none;
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
       box-shadow: var(--nav-shadow2);
       transition: background .15s ease, border-color .15s ease, transform .15s ease;
   }

   .v-btn:hover {
       background: #fff7d6;
       border-color: rgba(255, 204, 0, .55);
       transform: translateY(-1px);
   }

   .v-btn--primary {
       background: linear-gradient(180deg, var(--nav-accent2), var(--nav-accent));
       color: #000;
       border-color: rgba(0, 0, 0, .06);
   }

   .v-divider {
       height: 1px;
       background: var(--nav-border);
       margin: 10px 0;
   }

   /* ===== Mobile “overlay panels” inside drawer ===== */
   .v-panel {
       position: absolute;
       inset: 0;
       background: #fff;
       z-index: 5;
       transform: translateX(102%);
       transition: transform .18s ease;
       display: flex;
       flex-direction: column;
   }

   .v-panel.is-open {
       transform: translateX(0);
   }

   .v-panel__top {
       padding: 12px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
       border-bottom: 1px solid var(--nav-border);
       background: #fff;
   }

   .v-back {
       width: 40px;
       height: 40px;
       border-radius: 12px;
       border: 1px solid var(--nav-border);
       background: #fff;
       box-shadow: var(--nav-shadow2);
       cursor: pointer;
       display: inline-grid;
       place-items: center;
   }

   .v-back .bi {
       font-size: 18px;
       color: var(--nav-text);
   }

   .v-panel__title {
       font-weight: 950;
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
       color: var(--nav-text);
   }

   .v-panel__body {
       padding: 12px;
       display: grid;
       gap: 8px;
       overflow: auto;
       -webkit-overflow-scrolling: touch;
       background: rgba(255, 247, 214, .25);
   }

   .v-subitem {
       border: 1px solid rgba(15, 23, 42, .10);
       border-radius: 14px;
       padding: 12px 12px;
       text-decoration: none;
       color: var(--nav-text);
       font-weight: 900;
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
       background: #fff;
       display: flex;
       align-items: center;
       gap: 10px;
       transition: background .15s ease, border-color .15s ease, transform .15s ease;
   }

   .v-subitem:hover {
       background: #fff7d6;
       border-color: rgba(255, 204, 0, .55);
       transform: translateY(-1px);
   }

   /* Section button look */
   .v-item--section {
       justify-content: space-between;
   }

   .v-item--section .v-item__left {
       display: inline-flex;
       align-items: center;
       gap: 10px;
   }

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

       .v-drawer,
       .v-panel,
       .v-overlay {
           transition: none;
       }

       .v-item,
       .v-btn,
       .v-subitem {
           transition: none;
       }

       .v-item:hover,
       .v-btn:hover,
       .v-subitem:hover {
           transform: none;
       }
   }