:root {
  --green: #2b7dff;
  --black: #181c20;
  --nav-light: #1a84ff0d;
  --nav-active: #2b7dff;
  --nav-active-text: #fff;
  --radius: 17px;
  --shadow: 0 6px 32px #2b7dff13;
  --header-h: 62px;
  --icon-sz: 28px;
  --getstarted-shadow: 0 2px 14px #2b7dff55;
  --getstarted-green: #2b7dff;
  --getstarted-black: #181c20;
}
body {margin:0;font-family:'Inter','Segoe UI',Arial,sans-serif;background:#fff;}
.ap-header-main {
  background:#fff;border-bottom:1.5px solid #eaf3ee; position:sticky;top:0;width:100vw;z-index:100;
}
.ap-header-bar {
  display:flex;align-items:center;justify-content:space-between;height:var(--header-h);max-width:1400px;margin:auto;padding:0 24px;gap:0;
}
.ap-header-logo {
  font-family:'Segoe UI',Arial,sans-serif;font-weight:900;font-size:45px;letter-spacing:-1.8px;text-decoration:none;display:flex;align-items:center;white-space:nowrap;user-select:none;
}
.ap-header-logo .logo-black { color:var(--black);}
.ap-header-logo .logo-green { color:var(--green);}
.ap-header-nav-center {
  display:flex;align-items:center;justify-content:center;gap:14px;flex:1;
}
.ap-header-nav-center a, .ap-header-nav-center button {
  display:flex;align-items:center;justify-content:center;background:var(--nav-light);
  border:none;outline:none;width:50px;height:50px;min-width:50px;
  border-radius:var(--radius);margin:0 0px;cursor:pointer;position:relative;
  transition:background .13s, color .13s, box-shadow .14s;
  color:var(--black);font-size:1.07em;text-decoration:none;box-shadow:0 1px 6px #1a84ff0d;
}
.ap-header-nav-center a.active, .ap-header-nav-center button.active {
  background:var(--nav-active);color:var(--nav-active-text);box-shadow:0 4px 24px #2b7dff33;
}
.ap-header-nav-center a.active svg,
.ap-header-nav-center button.active svg { color:var(--nav-active-text); fill:var(--nav-active-text);}
.ap-header-nav-center a:hover, .ap-header-nav-center button:hover {background:#eafbee;color:var(--green);}
.ap-header-nav-center svg {width:var(--icon-sz);height:var(--icon-sz);color:inherit;}
/* GET STARTED BUTTON (green/black) */
.header-getstarted {
  display:flex;align-items:center;gap:9px;font-weight:800;background:black;color:white;
  border:none;border-radius:100px;padding:11px 29px 11px 18px;font-size:1.12em;margin-left:24px;text-decoration:none;cursor:pointer;
  transition:background .15s, color .15s;
  letter-spacing:-0.6px;white-space:nowrap;
}
.header-getstarted svg {width:20px;height:20px;margin-right:5px;}
.header-getstarted:hover {background:#10ac4c;color:#fff;}
/* Switch to black/white? Uncomment below
.header-getstarted {background:var(--black);color:#fff;}
.header-getstarted:hover {background:#212325;color:#fff;}
.header-getstarted svg circle, .header-getstarted svg path {stroke:#fff;}
*/
/* PROFILE */
.ap-header-profile {display:flex;align-items:center;gap:8px;margin-left:18px;position:relative;}
.ap-profile-avatar {
  width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #e3e3e3;cursor:pointer;background:#eee;
}
.ap-dropdown-menu {
  display:none;position:absolute;right:0;top:54px;min-width:200px;background:#fff;
  border:1px solid #e0e0e0;border-radius:12px;box-shadow:var(--shadow);z-index:100;
}
.ap-dropdown-menu.show {display:block;}
.ap-dropdown-menu a {display:block;padding:13px 24px;font-size:1em;color:#23273c;text-decoration:none;}
.ap-dropdown-menu a:hover {background:#f5f8f4;}
/* MOBILE */
@media (max-width: 800px) {.ap-header-bar{padding:0 6px;}}
@media (max-width: 650px) {
  .ap-header-bar {padding:0 2vw;min-width:0;width:auto;height:52px;}
  .ap-header-logo {font-size:35px;}
  .ap-header-profile {margin-left:0;}
  .ap-header-nav-center {display:none;}
  .header-getstarted {padding:9px 12px 9px 9px;font-size:.99em;margin-left:auto;}
  .ap-profile-avatar {width:32px;height:32px;}
}
@media (max-width: 650px) {
  .ap-header-main {position:sticky;top:0;width:100vw;}
  .ap-header-bar {gap:0;}
  /* BOTTOM NAV */
  .ap-header-bottom-nav {
    display:flex;align-items:center;justify-content:space-around;position:fixed;left:0;right:0;bottom:0;
    height:58px;width:100vw;background:#fff;border-top:1.5px solid #e2f4e6;box-shadow:0 -2px 16px #e7eaf030;z-index:99;
  }
  .ap-header-bottom-nav a, .ap-header-bottom-nav button {
    width:44px;height:48px;display:flex;align-items:center;justify-content:center;
    background:none;border:none;border-radius:15px;transition:background 0.17s;color:var(--black);font-size:1.14em;
  }
  .ap-header-bottom-nav a.active, .ap-header-bottom-nav button.active,
  .ap-header-bottom-nav a:hover, .ap-header-bottom-nav button:hover {
    background:var(--green);color:#fff;
  }
  .ap-header-bottom-nav svg {width:24px;height:24px;}
}
  </style>