.lifeos-workbench-shell {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  min-height: 100vh;
}

.lifeos-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 248, 205, .07), transparent 28%),
    linear-gradient(180deg, var(--sidebar, #183128), var(--sidebar-deep, #0f241f));
  color: var(--sidebar-text, rgba(250, 247, 226, .82));
  border-right: 1px solid var(--sidebar-line, rgba(220, 232, 202, .18));
  box-shadow: 12px 0 28px rgba(17, 46, 35, .16);
}

.lifeos-sidebar .brand {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 14px 18px;
  color: var(--sidebar-text-strong, #fff8dc);
  border-bottom: 1px solid var(--sidebar-line, rgba(220, 232, 202, .18));
}

.lifeos-sidebar .brand-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lifeos-sidebar .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #fff8dc, #bddd9b);
  color: #183128;
  font-size: 16px;
  font-weight: 900;
}

.lifeos-sidebar .brand strong {
  display: block;
  font-size: 17px;
  line-height: 1.1;
}

.lifeos-sidebar .brand span {
  display: block;
  margin-top: 2px;
  color: rgba(250, 247, 226, .62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.lifeos-sidebar .sidebar-reward-points {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 241, 201, .24);
  border-radius: 10px;
  background: rgba(255, 241, 201, .1);
  color: #fff8dc;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.lifeos-sidebar .sidebar-reward-points span {
  margin: 0;
  color: rgba(250, 247, 226, .72);
  font-size: 11px;
  letter-spacing: 0;
}

.lifeos-sidebar .sidebar-reward-points strong {
  font-size: 18px;
  line-height: 1;
  color: #fff1c9;
}

.lifeos-sidebar .side-menu {
  display: grid;
  gap: 10px;
  padding: 18px 12px 24px;
}

.lifeos-sidebar .side-section {
  padding: 13px 10px 4px;
  color: rgba(225, 237, 204, .62);
  font-size: 12px;
  font-weight: 800;
}

.lifeos-sidebar .side-submenu {
  display: grid;
  gap: 4px;
  padding-left: 9px;
  border-left: 1px solid rgba(220, 232, 202, .16);
}

.lifeos-sidebar .side-subitem {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 32px;
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--sidebar-text, rgba(250, 247, 226, .82));
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}

.lifeos-sidebar .side-subitem.is-current {
  background: rgba(234, 246, 220, .14);
  color: var(--sidebar-text-strong, #fff8dc);
}

.lifeos-sidebar .side-subdot {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(234, 246, 220, .22);
  border-radius: 5px;
  background: var(--icon-paper, #eaf6dc);
  color: var(--icon-ink, #183128);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.lifeos-sidebar .side-subdot::before { content: var(--icon-mark, "□"); }
.lifeos-sidebar .side-subdot[data-icon="home"] { --icon-mark: "⌂"; --icon-paper: #eaf6dc; --icon-ink: #205236; }
.lifeos-sidebar .side-subdot[data-icon="strategy"] { --icon-mark: "◇"; --icon-paper: #eaf6dc; --icon-ink: #205236; }
.lifeos-sidebar .side-subdot[data-icon="five-year"] { --icon-mark: "△"; --icon-paper: #eef0c8; --icon-ink: #566520; }
.lifeos-sidebar .side-subdot[data-icon="three-year"] { --icon-mark: "▥"; --icon-paper: #e2f1d8; --icon-ink: #315d34; }
.lifeos-sidebar .side-subdot[data-icon="year"] { --icon-mark: "▣"; --icon-paper: #f4edc9; --icon-ink: #6b571f; }
.lifeos-sidebar .side-subdot[data-icon="month"] { --icon-mark: "◐"; --icon-paper: #e8edf7; --icon-ink: #385472; }
.lifeos-sidebar .side-subdot[data-icon="week"] { --icon-mark: "▦"; --icon-paper: #e7f3ea; --icon-ink: #2d6446; }
.lifeos-sidebar .side-subdot[data-icon="today"] { --icon-mark: "✓"; --icon-paper: #fff1c9; --icon-ink: #7a5a13; }
.lifeos-sidebar .side-subdot[data-icon="feedback"] { --icon-mark: "↺"; --icon-paper: #e8f5eb; --icon-ink: #1f754e; }
.lifeos-sidebar .side-subdot[data-icon="vow"] { --icon-mark: "☼"; --icon-paper: #fff1c9; --icon-ink: #7a5a13; }
.lifeos-sidebar .side-subdot[data-icon="journal"] { --icon-mark: "✦"; --icon-paper: #f0e8d7; --icon-ink: #6d4b2c; }
.lifeos-sidebar .side-subdot[data-icon="errands"] { --icon-mark: "□"; --icon-paper: #e9f2df; --icon-ink: #436029; }
.lifeos-sidebar .side-subdot[data-icon="health"] { --icon-mark: "+"; --icon-paper: #e2f3e8; --icon-ink: #246544; }
.lifeos-sidebar .side-subdot[data-icon="heatmap"] { --icon-mark: "▦"; --icon-paper: #e2f3e8; --icon-ink: #246544; }
.lifeos-sidebar .side-subdot[data-icon="reward"] { --icon-mark: "◆"; --icon-paper: #fff1c9; --icon-ink: #7a5a13; }
.lifeos-sidebar .side-subdot[data-icon="music"] { --icon-mark: "♪"; --icon-paper: #e7edf5; --icon-ink: #394f72; }
.lifeos-sidebar .side-subdot[data-icon="status"] { --icon-mark: "⚙"; --icon-paper: #e7edf5; --icon-ink: #394f72; }
.lifeos-sidebar .side-subdot[data-icon="drafts"] { --icon-mark: "▣"; --icon-paper: #f4edc9; --icon-ink: #6b571f; }
.lifeos-sidebar .side-subdot[data-icon="settings"] { --icon-mark: "□"; --icon-paper: #e9f2df; --icon-ink: #436029; }

.lifeos-sidebar-overlay {
  display: none;
}

.sidebar-drawer-toggle {
  display: none !important;
  border-radius: 999px;
}

.lifeos-sidebar .side-link,
.lifeos-sidebar .side-subitem {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 980px) {
  .lifeos-workbench-shell {
    display: block;
  }

  .sidebar-drawer-toggle {
    display: inline-grid !important;
    min-width: 40px;
    min-height: 40px;
    place-items: center;
    border: 1px solid rgba(24, 49, 40, .18);
    border-radius: 999px;
    background: #ffffff;
    color: #183128;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(17, 46, 35, .1);
  }

  .lifeos-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    display: block;
    width: min(82vw, 310px);
    max-width: 310px;
    transform: translateX(-104%);
    transition: transform 180ms ease-out;
    visibility: hidden;
  }

  .lifeos-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .lifeos-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: block;
    background: rgba(12, 25, 20, .42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease-out;
  }

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

  body.has-sidebar-open {
    overflow: hidden;
  }
}