.ui-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: grid;
  height: var(--ft-topbar-height);
  grid-template-columns: var(--ft-sidebar-width) minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  background: linear-gradient(115deg, #3a261f 0%, #4a2f25 62%, #5b3b27 100%);
  box-shadow: 0 3px 18px rgba(47, 33, 27, 0.16);
}

.ui-topbar-brand {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

.ui-topbar-brand img { display: block; width: 7.25rem; max-height: 3.25rem; object-fit: contain; }
.ui-topbar-context { display: flex; min-width: 0; align-items: baseline; gap: var(--ft-space-3); padding-inline: var(--ft-space-6); }
.ui-topbar-context span { color: rgba(255, 255, 255, 0.58); font-size: var(--ft-font-xs); font-weight: 500; }
.ui-topbar-context strong { overflow: hidden; color: rgba(255, 255, 255, 0.94); font-size: var(--ft-font-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-topbar-account { padding-right: var(--ft-space-5); }
.ui-account-link { display: flex; min-height: 2.75rem; align-items: center; gap: var(--ft-space-3); padding: var(--ft-space-1) var(--ft-space-2); border-radius: var(--ft-radius-sm); color: #fff !important; text-decoration: none; }
.ui-account-link:hover { background: rgba(255, 255, 255, 0.08); }
.ui-account-link > span:last-child { display: grid; }
.ui-account-link strong { max-width: 14rem; overflow: hidden; font-size: var(--ft-font-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-account-link small { color: rgba(255, 255, 255, 0.58); font-size: 0.68rem; }
.ui-avatar { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--ft-brown-900); background: var(--ft-gold-500); font-size: var(--ft-font-sm); font-weight: 700; }

.ui-menu-toggle { display: none; width: 2.75rem; height: 2.75rem; place-content: center; gap: 4px; border: 0; border-radius: var(--ft-radius-sm); color: #fff; background: transparent; }
.ui-menu-toggle span { display: block; width: 1.15rem; height: 2px; border-radius: 2px; background: currentColor; }

.ui-sidebar {
  position: fixed;
  inset: var(--ft-topbar-height) auto 0 0;
  z-index: 90;
  display: flex;
  width: var(--ft-sidebar-width);
  flex-direction: column;
  padding: var(--ft-space-5) var(--ft-space-4) var(--ft-space-4);
  color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, #4b3026 0%, #3d2922 72%, #33231e 100%);
  overflow-y: auto;
}

.ui-sidebar-heading { display: flex; align-items: center; gap: var(--ft-space-3); padding: 0 var(--ft-space-2) var(--ft-space-5); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ui-sidebar-heading > span { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: var(--ft-radius-sm); color: var(--ft-brown-900); background: var(--ft-gold-500); font-size: var(--ft-font-xs); font-weight: 700; }
.ui-sidebar-heading div { display: grid; }
.ui-sidebar-heading strong { color: #fff; font-size: var(--ft-font-sm); font-weight: 600; }
.ui-sidebar-heading small { color: rgba(255, 255, 255, 0.52); font-size: var(--ft-font-xs); }
.ui-sidebar-nav { display: grid; gap: 2px; margin-top: var(--ft-space-4); }
.ui-nav-label { margin: var(--ft-space-4) var(--ft-space-3) var(--ft-space-1); color: rgba(255, 255, 255, 0.42); font-size: 0.67rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ui-sidebar-nav a { display: flex; min-height: 2.75rem; align-items: center; gap: var(--ft-space-3); padding: 0 var(--ft-space-3); border-radius: var(--ft-radius-sm); color: rgba(255, 255, 255, 0.72); font-size: var(--ft-font-sm); font-weight: 500; text-decoration: none; }
.ui-nav-icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .78; transition: opacity var(--ft-transition), transform var(--ft-transition); }
.ui-sidebar-nav a:hover .ui-nav-icon, .ui-sidebar-nav a.is-active .ui-nav-icon { opacity: 1; transform: scale(1.06); }
.ui-sidebar-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.ui-sidebar-nav a.is-active { color: #fff; background: linear-gradient(90deg, rgba(247, 196, 74, 0.25), rgba(247, 196, 74, 0.08)); box-shadow: inset 3px 0 0 var(--ft-gold-500); }
.ui-sidebar-nav a.is-active .ui-nav-icon { color: var(--ft-gold-500); }
.ui-sidebar-logout { margin-top: auto; padding-top: var(--ft-space-6); }
.ui-sidebar-logout button { display: flex; width: 100%; min-height: 2.6rem; align-items: center; justify-content: center; gap: var(--ft-space-2); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--ft-radius-sm); color: rgba(255, 255, 255, 0.76); background: transparent; font-size: var(--ft-font-sm); font-weight: 500; }
.ui-sidebar-logout button:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); }
.ui-service-state { display: flex; align-items: center; gap: var(--ft-space-3); margin-top: var(--ft-space-4); padding: var(--ft-space-4) var(--ft-space-2) 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ui-service-state > span { width: 0.55rem; height: 0.55rem; flex: 0 0 auto; border-radius: 50%; background: #53b77b; box-shadow: 0 0 0 4px rgba(83, 183, 123, 0.11); }
.ui-service-state div { display: grid; }
.ui-service-state strong { color: rgba(255, 255, 255, 0.84); font-size: var(--ft-font-xs); font-weight: 600; }
.ui-service-state small { color: rgba(255, 255, 255, 0.44); font-size: 0.66rem; }
.ui-sidebar-backdrop { display: none; }

.ui-app-shell { min-height: 100vh; margin-left: var(--ft-sidebar-width); padding-top: var(--ft-topbar-height); }
.ui-app-shell main { min-height: calc(100vh - var(--ft-topbar-height) - 3rem); }
.ui-footer { display: flex; min-height: 3rem; align-items: center; padding: 0 var(--ft-space-8); border-top: 1px solid var(--ft-border); color: var(--ft-text-muted); background: var(--ft-surface-soft); font-size: var(--ft-font-xs); }