/* Menu feature styles live in the shared app shell to preserve the existing UI. */

/* Typography alignment: match the existing page heading and eyebrow sizes. */
.page-heading h1 {
  font-size: 26px !important;
}

.eyebrow,
.settings-page-head .eyebrow {
  color: #7650d8 !important;
  font-size: 9px !important;
}

/* The drawer is grouped the way the app groups it: a heading, then the items
   that belong under it. */
.drawer-section-label {
  margin: 14px 12px 6px;
  color: #8d87a0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .8px;
}

.drawer-item-new {
  margin: 2px 6px 4px;
  border-radius: 13px;
  background: linear-gradient(145deg, #f3ecff, #e6d9ff);
  color: #5e2dd2;
  font-weight: 700;
}

/* The drawer's top row, as the app draws it: the mark, the word Indoone, and
   a close button on the right. */
.drawer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0 13px;
}

.drawer-brand-name {
  flex: 1 1 auto;
  color: #263753;
  font-size: 19px;
  font-weight: 700;
}

.drawer-close {
  flex: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #59677d;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.drawer-close:hover {
  background: #f2eef9;
}