:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --ink: #111827;
  --muted: #667085;
  --soft: #f2f4f7;
  --line: #e4e7ec;
  --blue: #465fff;
  --blue-soft: #eef2ff;
  --nav: #ffffff;
  --shadow: 0 16px 42px rgb(16 24 40 / 10%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* {box-sizing: border-box;}
body {margin: 0;}
body > svg[aria-hidden="true"] {display: none;}
button {font: inherit; cursor: pointer;}
.shell {position: relative; display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; transition: grid-template-columns 180ms ease;}
.shell.is-collapsed {grid-template-columns: 84px 1fr;}
.sidebar {position: relative; z-index: 90; display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: visible; border-right: 1px solid var(--line); background: var(--nav); transition: transform 180ms ease;}
.mobile-backdrop {display: none;}
.brand {display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 0 20px; border-bottom: 1px solid var(--line);}
.logo {display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #101828; color: #ffffff; font-weight: 900;}
.logo img {display: block; width: 27px; height: 27px; object-fit: contain;}
.brand-text {min-width: 0;}
.brand-text b, .brand-text span {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.brand-text b {font-size: 15px;}
.brand-text span {color: var(--muted); font-size: 12px;}
.store-switcher {position: relative; z-index: 120; padding: 12px 16px 6px;}
.store-button {display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; min-height: 48px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fcfcfd; color: var(--ink); transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;}
.store-button:hover, .store-button:focus-visible {border-color: #c7d0ff; background: #ffffff; box-shadow: 0 0 0 4px rgb(70 95 255 / 10%); outline: 0;}
.dropdown-trigger svg {transition: transform 160ms ease;}
.dropdown.is-open > .store-button svg:last-child {transform: rotate(180deg);}
.store-button strong {display: block; overflow: hidden; max-width: 160px; text-overflow: ellipsis; white-space: nowrap; font-size: 13px;}
.store-button small {display: block; margin-top: 2px; color: var(--muted); font-size: 11px; text-align: left;}
.store-menu {position: absolute; top: calc(100% - 8px); left: 16px; right: 16px; z-index: 140; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; box-shadow: var(--shadow);}
.dropdown-menu {display: none;}
.dropdown.is-open > .dropdown-menu {display: block;}
.store-option {display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 7px 9px; border-radius: 6px; color: #344054; font-size: 13px; cursor: pointer; transition: background 140ms ease, color 140ms ease;}
.store-option:hover {background: #f2f4f7; color: #182230;}
.store-option.active {background: var(--blue-soft); color: #2731b8; font-weight: 750;}
.nav {flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-behavior: smooth; padding: 0 16px 16px; scrollbar-width: none;}
.nav::-webkit-scrollbar {display: none;}
.nav-label {margin: 15px 10px 8px; color: #98a2b3; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;}
.nav-item {display: flex; align-items: center; width: 100%; gap: 11px; min-height: 40px; padding: 10px 11px; border: 0; border-radius: 8px; background: transparent; color: #475467; font-size: 14px; font-weight: 600; text-decoration: none; text-align: left; transition: background 140ms ease, color 140ms ease, transform 140ms ease;}
.nav-item:hover {background: #f2f4f7; color: #182230;}
.nav-item:focus-visible {outline: 3px solid rgb(70 95 255 / 18%); outline-offset: 2px;}
.nav-item.active {background: var(--blue-soft); color: var(--blue);}
.nav-item.active:hover {background: #e4e9ff; color: #2731b8;}
.nav-badge {margin-left: auto; padding: 2px 7px; border-radius: 999px; background: #f2f4f7; color: #667085; font-size: 11px; font-weight: 800;}
.nav-item.admin-only .nav-badge {background: #fff7ed; color: #b45309;}
.nav-item.admin-only:hover .nav-badge {background: #ffedd5;}
.main {min-width: 0;}
.topbar {display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 0 24px; border-bottom: 1px solid var(--line); background: #ffffff; position: relative; z-index: 35;}
.sidebar-toggle, .icon-button {display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: #ffffff; color: #667085; transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease; position: relative;}
.sidebar-toggle:hover, .icon-button:hover, .profile:hover {background: #f8f9ff; color: var(--blue);}
.sidebar-toggle:focus-visible, .icon-button:focus-visible, .primary:focus-visible, .profile:focus-visible {outline: 3px solid rgb(70 95 255 / 18%); outline-offset: 2px;}
.search {display: flex; align-items: center; gap: 10px; width: min(440px, 42vw); height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; color: #98a2b3; font-size: 14px; transition: border-color 140ms ease, box-shadow 140ms ease;}
.search:focus-within {border-color: #c7d0ff; box-shadow: 0 0 0 4px rgb(70 95 255 / 10%);}
.search input {width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit;}
.search input::placeholder {color: #98a2b3;}
.search input::-webkit-search-decoration, .search input::-webkit-search-cancel-button, .search input::-webkit-search-results-button, .search input::-webkit-search-results-decoration {display: none;}
.search-action {display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: auto; border: 1px solid var(--line); border-radius: 7px; background: #ffffff; color: #667085; transition: background 140ms ease, border-color 140ms ease, color 140ms ease;}
.search-action:hover {border-color: #c7d0ff; background: #f8f9ff; color: var(--blue);}
.search-action svg {width: 15px; height: 15px;}
.search-clear {display: none;}
.search.has-value .search-arrow {display: none;}
.search.has-value .search-clear {display: block;}
.primary {display: inline-flex; align-items: center; gap: 8px; min-width: 42px; height: 42px; padding: 0 15px; border: 0; border-radius: 8px; background: var(--blue); color: #ffffff; font-size: 14px; font-weight: 800; white-space: nowrap; transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;}
.primary:hover {background: #3446db; box-shadow: 0 10px 22px rgb(70 95 255 / 24%); transform: translateY(-1px);}
@media (max-width: 1440px) {
  .primary {width: 42px; min-width: 42px; padding: 0; justify-content: center;}
  .primary span {display: none;}
}
.top-actions {display: flex; align-items: center; gap: 8px; margin-left: auto;}
.quick-nav {display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 3px; border: 0; border-radius: 9px; background: transparent;}
.quick-link {position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 7px; background: transparent; color: #667085; transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;}
.quick-link:hover {background: #f8f9ff; color: var(--blue);}
.quick-link.active {background: #eef2ff; color: var(--blue);}
.quick-link::after {content: attr(data-title); position: absolute; top: calc(100% + 8px); left: 50%; z-index: 30; padding: 5px 8px; border-radius: 6px; background: #101828; color: #ffffff; font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-3px); transition: opacity 120ms ease, transform 120ms ease; white-space: nowrap;}
.quick-link:hover::after, .quick-link:focus-visible::after {opacity: 1; transform: translateX(-50%) translateY(0);}
.nav-hover-popup {position: fixed; z-index: 180; padding: 6px 9px; border-radius: 6px; background: #101828; color: #ffffff; font-size: 11px; font-weight: 700; line-height: 1.2; opacity: 0; pointer-events: none; transform: translate(4px, -50%); transition: opacity 120ms ease, transform 120ms ease; white-space: nowrap;}
.nav-hover-popup::before {content: ""; position: absolute; top: 50%; right: 100%; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #101828; transform: translateY(-50%);}
.nav-hover-popup.is-visible {opacity: 1; transform: translate(0, -50%);}
.profile {display: flex; align-items: center; gap: 10px; height: 42px; padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; color: var(--ink); transition: border-color 140ms ease, background 140ms ease, color 140ms ease;}
.avatar {display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: #101828; color: #ffffff; font-size: 12px; font-weight: 900;}
.profile b {display: block; font-size: 13px;}
.profile span {display: block; color: var(--muted); font-size: 11px;}
.dropdown {position: relative;}
.popover {position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: 190px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; box-shadow: var(--shadow);}
.profile-menu {position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: 230px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; box-shadow: var(--shadow);}
.profile-summary {display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line);}
.profile-summary b, .profile-summary span {display: block;}
.profile-summary b {font-size: 13px;}
.profile-summary span {color: var(--muted); font-size: 12px;}
.profile-menu button {display: block; width: 100%; min-height: 36px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #344054; text-align: left;}
.profile-menu button:hover {background: #f2f4f7; color: #182230;}
.profile-menu .logout {color: #b42318;}
.profile-menu .logout:hover {background: #fff1f0; color: #b42318;}
.popover b, .popover span, .popover button {display: block; width: 100%;}
.popover b {padding: 6px 8px 4px; font-size: 13px;}
.popover span {padding: 0 8px 6px; color: var(--muted); font-size: 12px;}
.popover button {display: flex; align-items: center; gap: 9px; min-height: 34px; border: 0; border-radius: 6px; background: transparent; color: #344054; text-align: left;}
.popover button:hover {background: #f2f4f7;}
.mobile-menu-item {display: none;}
svg {width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;}
.shell.is-collapsed .brand {justify-content: center; padding: 0 10px;}
.shell.is-collapsed .brand-text, .shell.is-collapsed .nav-label, .shell.is-collapsed .nav-item span, .shell.is-collapsed .nav-badge {display: none;}
.shell.is-collapsed .store-switcher {display: block; padding: 12px;}
.shell.is-collapsed .store-button {justify-content: center; min-height: 44px; padding: 0;}
.shell.is-collapsed .store-button span {display: none;}
.shell.is-collapsed .store-menu {top: 12px; left: calc(100% - 4px); right: auto; width: 230px; z-index: 140;}
.shell.is-collapsed .nav {padding: 12px;}
.shell.is-collapsed .nav-item {justify-content: center;}
@media (max-width: 1280px) and (min-width: 941px) {
  .shell {grid-template-columns: 84px 1fr;}
  .brand {justify-content: center; padding: 0 10px;}
  .brand-text, .nav-label, .nav-item span, .nav-badge {display: none;}
  .store-switcher {display: block; padding: 12px;}
  .store-button {justify-content: center; min-height: 44px; padding: 0;}
  .store-button span {display: none;}
  .store-menu {top: 12px; left: calc(100% - 4px); right: auto; width: 230px;}
  .nav {padding: 12px;}
  .nav-item {justify-content: center;}
}
@media (max-width: 940px) {
  .shell {display: block; min-height: 100vh;}
  .mobile-backdrop {position: fixed; inset: 0; z-index: 45; border: 0; background: rgb(16 24 40 / 38%); opacity: 0; pointer-events: none; transition: opacity 180ms ease;}
  .shell.is-mobile-open .mobile-backdrop {display: block; opacity: 1; pointer-events: auto;}
  .sidebar {position: fixed; inset: 0 auto 0 0; z-index: -1; width: min(100vw, 360px); max-width: 100%; transform: translateX(-100%); box-shadow: var(--shadow); visibility: hidden;}
  .shell.is-mobile-open .sidebar {z-index: 50; transform: translateX(0); visibility: visible;}
  .shell.is-collapsed .sidebar {transform: translateX(-100%);}
  .shell.is-mobile-open.is-collapsed .sidebar {transform: translateX(0);}
  .brand {justify-content: flex-start; padding: 0 20px;}
  .shell.is-collapsed .brand-text, .shell.is-collapsed .nav-label, .shell.is-collapsed .nav-item span, .shell.is-collapsed .nav-badge, .profile div:not(.avatar) {display: block;}
  .nav {padding: 16px;}
  .nav-item {justify-content: flex-start;}
  .shell.is-collapsed .nav-item {justify-content: flex-start;}
  .store-switcher {display: block; padding: 12px 16px 6px;}
  .store-button {justify-content: space-between; min-height: 48px; padding: 9px 11px;}
  .store-button span {display: block;}
  .shell.is-collapsed .store-button span {display: block;}
  .store-menu {top: calc(100% - 8px); left: 16px; right: 16px; width: auto;}
  .shell.is-collapsed .store-menu {top: calc(100% - 8px); left: 16px; right: 16px; width: auto;}
  .topbar {flex-wrap: wrap; height: auto; padding: 12px;}
  .quick-nav, .top-actions > .dropdown:first-of-type {display: none;}
  .mobile-menu-item {display: flex;}
  .popover {position: fixed; top: 64px; right: 12px; width: min(230px, calc(100vw - 24px)); max-height: calc(100vh - 84px); overflow: auto;}
  .profile-menu {position: fixed; top: 64px; right: 12px; width: min(230px, calc(100vw - 24px)); max-height: calc(100vh - 84px); overflow: auto;}
}
@media (max-width: 680px) {
  .search {order: 5; width: 100%;}
}