/* ============================================================
   LXD Panel - User 用户端布局（顶部导航 + 内容区）
   ============================================================ */

.user-shell { min-height: 100vh; display: flex; flex-direction: column; }
.user-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: rgba(var(--d-rgb), 0.82);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.user-topbar .brand-logo { width: 32px; height: 32px; font-size: 14px; }
.user-topbar-name { font-weight: 700; font-size: 14.5px; color: var(--text-1); }
.user-topbar-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }

.user-nav { display: flex; gap: 4px; margin-left: 18px; overflow-x: auto; }
.user-nav .u-nav-item {
  padding: 8px 14px; font-size: 13.5px; color: var(--text-2);
  cursor: pointer; border-radius: 10px; white-space: nowrap;
  border: 1px solid transparent; transition: background .2s, color .2s;
  text-decoration: none;
}
.user-nav .u-nav-item:hover { background: var(--card); color: var(--text-1); }
.user-nav .u-nav-item.active { background: rgba(56, 189, 248, 0.1); color: var(--primary); border-color: rgba(56, 189, 248, 0.25); font-weight: 600; }

.user-topbar .u-spacer { flex: 1; }
.user-content { padding: 20px; max-width: 1180px; width: 100%; margin: 0 auto; flex: 1; }

@media (max-width: 760px) {
  .user-nav { margin-left: 0; order: 3; width: 100%; }
  .user-topbar { flex-wrap: wrap; }
  .user-content { padding: 14px; }
}

/* ---------- v1.1：用户中心移动端折叠菜单 ---------- */
.u-menu-btn { display: none; }
.user-topbar .u-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 960px) {
  .user-topbar { flex-wrap: wrap; }
  .u-menu-btn { display: inline-flex; }
  .user-nav {
    order: 3; width: 100%; margin-left: 0;
    display: none; flex-direction: column; gap: 2px;
    padding: 8px 0 4px; border-top: 1px solid var(--border); margin-top: 8px;
  }
  .user-nav.open { display: flex; }
  .user-nav .u-nav-item { padding: 10px 12px; }
  .user-topbar-sub { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.user-topbar > .brand-logo, .user-topbar > div:not(.u-actions) { order: 0; }
.user-nav { order: 1; min-width: 0; flex: 0 1 auto; scrollbar-width: thin; }
.user-topbar .u-spacer { order: 2; }
.user-topbar .u-actions { order: 3; }
@media (max-width: 960px) {
  .user-nav { order: 4; }
}
@media (max-width: 480px) {
  .u-logout-text { display: none; }
}
@media (max-width: 640px) {
  .user-nav.open { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
}