/* ===== NAV UI ROOT ===== */
:root {
  --navui-h: 64px;
  --navui-panel-w: clamp(240px, 26vw, 360px);
  --navui-border: 1px solid #e0e0e0;
  --navui-btn: 44px;
  --navui-pad: 12px;
}

body {
  font-family: 'Roboto', Arial, sans-serif;
  background: #FBF0EE;
  overflow-x: hidden;
  margin: 0;
  padding-top: var(--navui-h);
}

/* ===== TOPBAR ===== */
.navui-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: var(--navui-h);

  display: flex;
  align-items: center;

  padding-left: var(--navui-pad);

  background: #fff;
  border-bottom: var(--navui-border);

  z-index: 1000;

  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

body.navui-open .navui-topbar {
  background: #f5f5f5;
}

/* ===== OPEN BUTTON ===== */
.navui-openbtn {
  height: var(--navui-btn);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #e0e0e0;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.navui-openbtn:hover {
  background-color: #f5f5f5;
}

.navui-openicon {
  font-size: 22px;
}

.navui-opentext {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ===== HEADER DIM ===== */
.navui-header-dim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navui-h);
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  z-index: 1100;
  transition: opacity .2s ease;
}

body.navui-open .navui-header-dim {
  opacity: 1;
  pointer-events: auto;
}

/* ===== BACKDROP ===== */
.navui-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1500;
}

body.navui-open .navui-backdrop {
  pointer-events: auto;
}

/* ===== PANEL ===== */
.navui-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--navui-panel-w);
  height: 100vh;
  background: #fff;
  border-right: var(--navui-border);
  z-index: 2000;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}

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

/* ===== PANEL TOP ===== */
.navui-panel-top {
  height: var(--navui-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--navui-pad);
  border-bottom: var(--navui-border);
}

.navui-panel-title {
  font-weight: 700;
}

.navui-closebtn {
  width: var(--navui-btn);
  height: var(--navui-btn);
  border: 1px solid #e0e0e0;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.navui-closebtn:hover {
  background-color: #f5f5f5;
}

/* ===== MENU ===== */
.navui-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navui-menu a {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  color: #000;
  border-bottom: var(--navui-border);
  transition: background-color 0.15s ease;
}

.navui-menu a:hover {
  background-color: #f5f5f5;
  background: #000;
  color: #fff;
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  .navui-panel,
  .navui-header-dim {
    transition: none;
  }
}

.navui-closebtn span{
    color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

.navui-openbtn span{
    color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}