:root {
  --bg: #f6f6f4;
  --card: #fff;
  --text: #1d1d1b;
  --muted: #6b6b66;
  --line: #dcdcd6;
  --accent: #b5121b;
  --accent-text: #fff;
  --ok: #1f7a3a;
  --ok-bg: #e6f4ea;
  --warn: #8a5a00;
  --warn-bg: #fff4d6;
  --bad: #a3131b;
  --bad-bg: #fde8e8;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: .2em 0 .6em; }
h2 { font-size: 1.15rem; margin: 1.4em 0 .5em; }
body > main { max-width: 1100px; padding: 1.25rem 1.75rem 2rem; }


/* ---- Left menu: one group per module ---- */
:root { --nav-w: 248px; --nav-bg: #ffffff; --nav-line: #ebe9e4; --nav-text: #3a3833; --nav-muted: #8a877f;
  --nav-hover: #f5f4f1; --nav-active-bg: #fdeeee; }
.sidenav { position: fixed; inset: 0 auto 0 0; width: var(--nav-w); background: var(--nav-bg); color: var(--nav-text);
  border-right: 1px solid var(--nav-line); display: flex; flex-direction: column; z-index: 20; }
.sidenav a { text-decoration: none; color: inherit; }
.icon { width: 20px; height: 20px; flex: none; }

.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: .06em; color: inherit; text-decoration: none; }
.sidenav .brand { padding: 1.1rem 1.1rem 1rem; border-bottom: 1px solid var(--nav-line); color: var(--text); font-size: 1.05rem; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent);
  color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: 0; box-shadow: 0 2px 6px rgba(181, 18, 27, .25); }

.nav-groups { flex: 1; overflow-y: auto; padding: .8rem .7rem; display: flex; flex-direction: column; gap: .2rem; }
.nav-top { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .7rem; border: 0; border-radius: 9px;
  background: none; color: var(--nav-text); font: inherit; font-size: .97rem; font-weight: 600; text-align: left; cursor: pointer; }
.nav-top .icon { color: var(--nav-muted); }
.nav-top span { flex: 1; }
.nav-top:hover { background: var(--nav-hover); }
.nav-top.active, .nav-group.current > .nav-top { color: var(--accent); }
.nav-top.active { background: var(--nav-active-bg); }
.nav-top.active .icon, .nav-group.current > .nav-top .icon { color: var(--accent); }
.nav-top .chevron { width: 16px; height: 16px; transition: transform .15s ease; }
.nav-top[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.nav-group + .nav-group, .nav-top + .nav-group { margin-top: .1rem; }

.nav-items { list-style: none; margin: .15rem 0 .5rem 1.55rem; padding: 0 0 0 .55rem; border-left: 1px solid var(--nav-line); }
.nav-items a { position: relative; display: flex; align-items: center; gap: .5rem; padding: .42rem .65rem; margin: 1px 0;
  border-radius: 7px; font-size: .92rem; color: var(--nav-text); }
.nav-items a:hover { background: var(--nav-hover); }
.nav-items a.store::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c9c6be; flex: none; }
.nav-items a.active { background: var(--nav-active-bg); color: var(--accent); font-weight: 600; }
.nav-items a.active::after { content: ""; position: absolute; left: calc(-.55rem - 1px); top: 6px; bottom: 6px; width: 3px;
  border-radius: 3px; background: var(--accent); }
.nav-items a.store.active::before { background: var(--accent); }

.nav-foot { display: flex; align-items: center; gap: .3rem; padding: .7rem; border-top: 1px solid var(--nav-line); }
.nav-foot form { margin: 0; }
.me { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: 9px; }
.me:hover, .me.active { background: var(--nav-hover); }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: #f1e3e3; color: var(--accent); font-size: .8rem; font-weight: 700; }
.me-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.me-text strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-text small { color: var(--nav-muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signout { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px; background: none;
  color: var(--nav-muted); cursor: pointer; }
.signout:hover { background: var(--nav-hover); color: var(--accent); }

body.has-nav > main { margin-left: var(--nav-w); }
body.wide > main { max-width: none; }

/* Phones and small tablets: the menu slides in from the left */
.mobilebar { display: none; align-items: center; gap: .7rem; padding: .55rem .9rem; background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-line); color: var(--text); }
.mobilebar.always { display: flex; }
.mobilebar .brand-mark { width: 28px; height: 28px; font-size: .95rem; }
.menu-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--nav-line); border-radius: 10px;
  background: #fff; color: var(--text); cursor: pointer; }
.nav-backdrop { display: none; }
@media (max-width: 900px) {
  .mobilebar { display: flex; position: sticky; top: 0; z-index: 10; }
  body.has-nav > main { margin-left: 0; }
  .sidenav { width: min(300px, 86vw); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  body.nav-open .sidenav { transform: none; visibility: visible; box-shadow: 8px 0 30px rgba(0,0,0,.18); }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(20,20,20,.35); z-index: 15; }
  .nav-top { padding: .7rem .75rem; }
  .nav-items a { padding: .55rem .7rem; }
}

.flash { padding: .6rem .8rem; border-radius: 6px; margin-bottom: .8rem; background: var(--ok-bg); color: var(--ok); }
.flash.error { background: var(--bad-bg); color: var(--bad); }
@media print {
  .sidenav, .mobilebar, .no-print { display: none !important; }
  body.has-nav > main { margin-left: 0; }
  body { background: #fff; }
}
.nav-caption { margin: .55rem 0 .15rem .65rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--nav-muted); }