/* 联机岛 · 三站共用的品牌样式（商城 / 社区 / 控制台）
   1. 品牌变量
   2. 统一顶栏：三个站点同样的高度、底色、Logo、链接、按钮和手机菜单。
      商城导航直接用这些类，控制台由 panel.js 生成同样的结构；
      社区顶栏由 Flarum 渲染，flarum/packages/brand/less/forum.less 按同样的变量改样式 */

/* 1. 品牌变量 */
:root {
  --ljd-primary: #2F7D32;
  --ljd-primary-hover: #276B2A;
  --ljd-primary-dark: #1F5E22;
  --ljd-primary-light: #EEF7EE;
  --ljd-primary-bright: #4CAF50; /* 深色背景上用的品牌绿 */
  --ljd-accent: #F2A33A;
  --ljd-text: #1F2328;
  --ljd-muted: #59636E;
  --ljd-font: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

  --ljd-hd-h: 64px;
  --ljd-hd-pad: 24px;
  /* 顶栏和手机菜单，颜色取自商城主题（themes/brand/theme.php） */
  --ljd-hd-bg: #FFFFFF;
  --ljd-hd-line: hsl(210, 18%, 87%);
  --ljd-hd-text: hsl(210, 13%, 14%);
  --ljd-hd-icon: hsl(212, 10%, 40%);
  --ljd-hd-hover: hsl(210, 29%, 96%);
  --ljd-hd-active-bg: hsl(122 45% 34% / .05);
  --ljd-hd-btn-line: hsl(210, 18%, 87%);
}
@media (max-width: 767px) {
  :root { --ljd-hd-pad: 16px; }
}

/* 2. 统一顶栏
   桌面（≥768px）：[Logo 联机岛] 开服 社区 我的服务器 控制台 ………… [各站自己的按钮] [登录] [注册]
   手机（<768px）：[Logo 联机岛] ………… [菜单]，菜单展开后铺满顶栏以下
   登录后右侧的顺序三站一样：本站工具（搜索、私信、购物车）→ 语言 → 通知 → 头像（32px）。
   退出、设置、管理后台都收进头像菜单：白底卡片，顶部昵称和邮箱，"退出登录"前有分隔线
   （商城 shop.css 的 .ljd-hd-user，社区 forum.less 的 .SessionDropdown，控制台 panel.css 的 .ljd-pt-user） */
.ljd-hd {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--ljd-hd-h);
  padding: 0 var(--ljd-hd-pad);
  background: var(--ljd-hd-bg);
  border-bottom: 1px solid var(--ljd-hd-line);
  font-family: var(--ljd-font);
}
.ljd-hd *, .ljd-hd *::before, .ljd-hd *::after,
.ljd-hd-menu *, .ljd-hd-menu *::before, .ljd-hd-menu *::after { box-sizing: border-box; }

.ljd-hd-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 40px;
  color: var(--ljd-hd-text) !important;
  font: 700 20px/1 var(--ljd-font);
  letter-spacing: .5px;
  text-decoration: none !important;
  white-space: nowrap;
}
.ljd-hd-brand img { display: block; width: 32px; height: 32px; }

.ljd-hd-links { display: flex; align-items: center; gap: 4px; margin-left: 24px; }
.ljd-hd-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--ljd-hd-text) !important;
  font: 600 15px/1 var(--ljd-font);
  text-decoration: none !important;
  white-space: nowrap;
  transition: color .15s, background-color .15s;
}
.ljd-hd-link:hover { color: var(--ljd-hd-text) !important; background: var(--ljd-hd-hover); }
.ljd-hd-link.is-active { color: var(--ljd-primary) !important; }

.ljd-hd-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.ljd-hd-iconbtn {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ljd-hd-icon) !important;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.ljd-hd-iconbtn:hover { color: var(--ljd-hd-text) !important; background: var(--ljd-hd-hover); }

.ljd-hd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: 600 14px/1 var(--ljd-font);
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.ljd-hd-btn--outline { border-color: var(--ljd-hd-btn-line); background: #FFFFFF; color: var(--ljd-hd-text) !important; }
.ljd-hd-btn--outline:hover { background: var(--ljd-hd-hover); }
.ljd-hd-btn--primary { background: var(--ljd-primary); color: #FFFFFF !important; }
.ljd-hd-btn--primary:hover { background: var(--ljd-primary-hover); }

/* 图标：<span class="ljd-ico" style="--ico:url(/brand/icons/xxx.svg)"></span>，颜色跟随文字 */
.ljd-ico {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}

/* 手机菜单 */
.ljd-hd-menu {
  position: fixed;
  top: var(--ljd-hd-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  overflow-y: auto;
  background: var(--ljd-hd-bg);
  font-family: var(--ljd-font);
}
.ljd-hd-menu[hidden] { display: none; }
.ljd-hd-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ljd-hd-text) !important;
  font: 600 14px/20px var(--ljd-font);
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
}
.ljd-hd-menu__item .ljd-ico { color: hsl(210 13% 14% / .5); }
.ljd-hd-menu__item:hover { background: var(--ljd-hd-active-bg); }
.ljd-hd-menu__item.is-active { background: var(--ljd-hd-active-bg); color: var(--ljd-primary) !important; }
.ljd-hd-menu__item.is-active .ljd-ico { color: var(--ljd-primary); }
.ljd-hd-menu__sep { height: 1px; margin: 8px 0; background: var(--ljd-hd-line); }
.ljd-hd-menu__user { display: flex; align-items: center; gap: 12px; padding: 4px 0 8px; }
.ljd-hd-menu__user img { width: 40px; height: 40px; border: 1px solid var(--ljd-hd-line); border-radius: 50%; }
.ljd-hd-menu__user strong { display: block; color: var(--ljd-hd-text); font-size: 15px; }
.ljd-hd-menu__user span { display: block; color: var(--ljd-hd-icon); font-size: 13px; }
.ljd-hd-menu__actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 16px; }
.ljd-hd-menu__actions .ljd-hd-btn { width: 100%; height: 44px; font-size: 15px; }

/* 桌面 / 手机 只显示其中一种 */
@media (max-width: 767px) {
  .ljd-hd-desktop { display: none !important; }
}
@media (min-width: 768px) {
  .ljd-hd-mobile { display: none !important; }
}

/* 3. 语言切换（结构由 ljd.js 的 langSwitcherHTML / langRowHTML 生成，商城由服务端输出同样的结构）
   桌面：顶栏右侧 [文A 中]，点开列出全部语言；手机：菜单里一行 语言 [简体中文] [English] */
.ljd-lang { position: relative; flex: none; }
.ljd-lang__btn { width: auto !important; gap: 4px; padding: 0 8px !important; }
.ljd-lang__cur { font: 600 13px/1 var(--ljd-font); }
.ljd-lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1100;
  display: none;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--ljd-hd-line);
  border-radius: 10px;
  background: var(--ljd-hd-bg);
  box-shadow: 0 8px 24px rgba(31, 35, 40, .12);
}
.ljd-lang.is-open .ljd-lang__menu { display: block; }
.ljd-lang__menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ljd-hd-text);
  font: 500 14px/20px var(--ljd-font);
  text-align: left;
  cursor: pointer;
}
.ljd-lang__menu button:hover { background: var(--ljd-hd-hover); }
.ljd-lang__menu button .ljd-ico { width: 16px; height: 16px; visibility: hidden; color: var(--ljd-primary); }
.ljd-lang__menu button.is-active { color: var(--ljd-primary); font-weight: 600; }
.ljd-lang__menu button.is-active .ljd-ico { visibility: visible; }

.ljd-lang-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--ljd-hd-text);
  font: 600 14px/20px var(--ljd-font);
}
.ljd-lang-row > .ljd-ico { color: hsl(210 13% 14% / .5); }
.ljd-lang-row__opts { display: flex; gap: 8px; margin-left: auto; }
.ljd-lang-row__opts button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ljd-hd-btn-line);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--ljd-hd-text);
  font: 500 13px/1 var(--ljd-font);
  cursor: pointer;
}
.ljd-lang-row__opts button.is-active { border-color: var(--ljd-primary); background: var(--ljd-primary-light); color: var(--ljd-primary); font-weight: 600; }