:root {
  --zebra-w: 56px;           /* collapsed tab width */
  --zebra-open: 300px;       /* open panel width */
  --hdr-height: 80px;        /* same as your fixed header */
  --zebra-bg: #fff;
  --zebra-border: #e5e7eb;
  --zebra-shadow: 0 8px 30px rgba(0,0,0,.12);
  --btn-bg: #f3f4f6;
  --btn-fg: #111;
  --btn-ring: #111;
}

/* container & tab */
.zebra {
  position: fixed;
  top: var(--hdr-height);
  left: 0;
  bottom: 24px;
  width: var(--zebra-w);
  z-index: 1300;
  display: flex;
  align-items: flex-start;
}

.zebra-tab {
  width: var(--zebra-w);
  height: 44px;
  border: 1px solid var(--zebra-border);
  border-left: 0;
  background: #111;
  color: #fff;
  border-radius: 0 10px 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--zebra-shadow);
  cursor: pointer;
}

/* panel */
.zebra-panel {
  width: var(--zebra-open);
  max-height: calc(100vh - var(--hdr-height) - 24px);
  background: var(--zebra-bg);
  border: 1px solid var(--zebra-border);
  border-left: 0;
  border-radius: 0 14px 14px 0;
  box-shadow: var(--zebra-shadow);
  overflow: auto;
  transform: translateX(-110%); /* hidden by default */
  transition: transform .25s ease;
}
.zebra.is-open .zebra-panel { transform: translateX(0); }
.zebra.is-open .zebra-tab   { opacity: .85; }

.zebra-hdr {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #fff;
  border-bottom: 1px solid var(--zebra-border);
}
.zebra-close {
  background: transparent;
  border: 0;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.zebra-groups {
  padding: 12px;
  display: grid;
  gap: 12px;
}
.a11y-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.a11y-btn {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--zebra-border);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  cursor: pointer;
}
.a11y-btn[aria-pressed="true"] {
  outline: 2px solid var(--btn-ring);
  outline-offset: 2px;
}
.a11y-btn.reset {
  background: #fee2e2;
  border-color: #fecaca;
}

/* body offset so content doesn't overlap */
@media (min-width: 1024px) {
  body { margin-left: var(--zebra-w); }
  body.zebra-open {
    margin-left: var(--zebra-open);
    transition: margin-left .25s ease;
  }
}

/* Mobile: floating tab */
@media (max-width: 1023px) {
  .zebra {
    top: auto;
    bottom: 16px;
    left: 16px;
    width: auto;
  }
  .zebra-tab {
    border-radius: 10px;
    border: 1px solid var(--zebra-border);
  }
  .zebra-panel {
    left: 16px;
    right: 16px;
    border-radius: 14px;
    border-left: 1px solid var(--zebra-border);
  }
}