/* ================ 字体 ================ */
@font-face {
  font-family: 'Saira';
  src: url('../font/Saira.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Saira';
  src: url('../font/Saira-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* ================ 主题变量 ================ */
:root {
  --accent: #9ACC34;           /* 黄绿色 accent */
  --bg: #FFFFFF;               /* 主背景 纯白 */
  --sidebar-bg: #F5F6F8;       /* 侧边栏 浅灰 */
  --hover: #E8EAF0;            /* hover 浅灰 */
  --text: #2D3142;             /* 主文字 深灰 */
  --text-muted: #6B7280;       /* 次要文字 */
  --icon-size: 22px;
  --sidebar-w: 220px;          /* 展开宽度 */
  --sidebar-w-collapsed: 56px; /* 折叠宽度 */
  --transition: 0.25s ease;
}

/* ================ Reset ================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { 
  width: 100%; height: 100%; 
  overflow: hidden; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: 'Saira', 'Microsoft YaHei', '微软雅黑', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ================ Layout ================ */
.app {
  display: flex;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
}

/* ================ 侧边栏 ================ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  transition: width var(--transition);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }

/* Logo —— 火花图标同时是导航栏折叠开关 */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 68px;                /* 与 .topbar 等高，保证窗口按钮与标题严格同一水平面 */
  /* 左内边距在展开/折叠两态保持一致：火花图标原地不动。
     若折叠态改用 justify-content:center，因该属性不可动画，
     图标会先被瞬间居中（偏右）再随侧栏收窄滑回左侧。 */
  padding: 0 10px;
  color: var(--accent);
  flex-shrink: 0;
  transition: gap var(--transition);
}
.logo-spark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}
.logo-spark:hover { background: var(--hover); }
.logo-spark:hover .logo-icon { transform: rotate(90deg) scale(1.08); }
.logo-spark:active { transform: scale(0.92); }
.logo-spark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.logo-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  stroke: currentColor;
  transition: transform var(--transition);
}
/* 折叠态：文本已收成 0 宽，去掉间距即可；火花位置保持不变（不居中、不改内边距） */
.sidebar.collapsed .logo {
  gap: 0;
}
.logo-text { display: flex; flex-direction: column; overflow: hidden; white-space: nowrap; transition: opacity var(--transition); }
.sidebar.collapsed .logo-text { opacity: 0; width: 0; }
.logo-title {
  font-family: 'Saira', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--accent);
  line-height: 1;
}
.logo-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* 导航 */
.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px;
  flex: 1;
  /* 悬停提示定位在条目右侧，会撑宽可滚动区域并带出横向滚动条；
     这里禁用横向滚动，纵向仍保留（条目多时可滚） */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;          /* 隐藏滚动条（滚动仍有效） */
  position: relative;    /* 指示条的定位基准 */
}
.nav::-webkit-scrollbar { display: none; }

/* ---------------- Link 面板：Token 持久登录 ---------------- */
/* hidden 属性 + display:flex 同用时 flex 会赢，导致 Link 的内容泄漏到
   Terracotta / CloudflareTunnel 子页 —— 所以 flex 必须挂在 .link-box:not([hidden]) 上 */
.link-box { margin-top: 4px; }
.link-box:not([hidden]) { display: flex; gap: 20px; align-items: stretch; flex: 1 0 auto; }
/* 分隔缝隙：用户信息列与日志列之间的一条竖直浅缝 */
.link-divider { flex: 0 0 1px; align-self: stretch; background: #E4E8EF; margin: 4px 6px; }
/* 左侧用户卡片：无外框，宽度随文字自适应 */
.link-card {
  flex: 0 0 auto;
  width: max-content;         /* 文字多长就多宽 */
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;                 /* 无边框无底色：纯内容列 */
}
.link-tip { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 12px; max-width: 300px; }
.link-tip code { font-family: 'Saira', monospace; background: var(--hover); padding: 1px 6px; border-radius: 4px; }
.link-tip a { color: var(--accent); text-decoration: none; font-weight: 600; }
.link-tip a:hover { text-decoration: underline; }
.link-row { display: flex; gap: 8px; align-items: center; }
.link-input {
  width: 210px; height: 36px; padding: 0 12px;
  border: 1px solid #E0E4EC; border-radius: 8px;
  background: #FFFFFF; color: var(--text);
  font-size: 13.5px; font-family: 'Saira', 'Microsoft YaHei', sans-serif;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.link-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(154, 204, 52, 0.18); }
.link-btn {
  height: 36px; padding: 0 18px; flex: 0 0 auto;
  border: none; border-radius: 8px;
  background: var(--accent); color: #FFFFFF;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: filter var(--transition);
}
.link-btn:hover { filter: brightness(1.08); }
.link-btn:disabled { opacity: 0.6; cursor: wait; }
.link-status { font-size: 12px; color: var(--text-muted); margin-top: 8px; min-height: 16px; }
.link-status.is-err { color: #A83B3E; }
.link-status.is-ok { color: var(--accent); }

/* 已登录信息：左侧从上往下逐条排列 */
.link-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.link-item { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.link-item b { color: var(--text); font-weight: 700; font-family: 'Saira', 'Microsoft YaHei', sans-serif; }
/* 未签到时的「立即签到」：绿色高亮文字按钮 */
.link-checkin {
  margin-left: 4px; padding: 0;
  border: none; background: transparent;
  color: var(--accent);
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: filter var(--transition), opacity var(--transition);
}
.link-checkin:hover { filter: brightness(0.86); text-decoration: underline; }
.link-checkin:disabled { opacity: 0.6; cursor: wait; text-decoration: none; }

/* 右侧：联机操作 + 日志区（占满剩余宽度；外框去除，仅日志窗保留浅框） */
.link-side {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.link-side-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 0 8px;
}
.link-side-title { font-size: 13px; font-weight: 700; color: var(--text); }
.link-side-badge {
  padding: 1px 7px; border-radius: 999px;
  background: #F1F3F7; color: var(--text-muted);
  font-size: 11px; font-weight: 600;
}
.link-log {
  flex: 1; min-height: 180px;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid #E0E4EC; border-radius: 10px;
  background: #FFFFFF;
  font-family: 'Saira', 'Microsoft YaHei', monospace;
  font-size: 12.5px; line-height: 1.7;
  color: var(--text-muted);
  scrollbar-width: none;
}
.link-log::-webkit-scrollbar { display: none; }
.link-log-empty { color: #B6BCC8; }
.link-log-line { margin: 0; color: var(--text-muted); word-break: break-all; }

/* ---------------- 账号管理面板：账号退出 / Token 有效期与轮换 ----------------
   与 Link 面板同一套视觉语言：无外框纯内容列，同样要小心 hidden + flex 冲突。 */
.acct-box:not([hidden]) { display: block; flex: 1 0 auto; }
.acct-tip { font-size: 13px; color: var(--text-muted); }
.acct-goto-link {
  border: none; background: transparent; padding: 0;
  color: var(--accent); font: inherit; font-weight: 600; cursor: pointer;
}
.acct-goto-link:hover { text-decoration: underline; }
.acct-head { display: flex; align-items: center; gap: 10px; }
.acct-avatar {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent); color: #FFFFFF;
  font-family: 'Saira', sans-serif; font-size: 20px; font-weight: 700;
}
.acct-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-name { font-size: 15px; color: var(--text); }
.acct-name b, .acct-item b { font-weight: 700; color: var(--text); }
.acct-sub { font-size: 12px; color: var(--text-muted); }
.acct-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.acct-item { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.acct-sub-inline { font-size: 12px; color: #B6BCC8; margin-left: 6px; }
.acct-token {
  font-family: 'Saira', monospace; background: var(--hover);
  padding: 1px 8px; border-radius: 5px; font-size: 12.5px; color: var(--text);
}
.acct-actions { display: flex; gap: 10px; margin-top: 16px; }
.acct-btn {
  height: 32px; padding: 0 16px;
  border: 1px solid #E0E4EC; border-radius: 8px;
  background: transparent; color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), filter var(--transition);
}
.acct-btn:hover { background: var(--hover); }
.acct-btn:disabled { opacity: 0.6; cursor: wait; }
.acct-btn-danger { color: #A83B3E; border-color: #E7BFC0; }
.acct-btn-danger:hover { background: #FBECEC; color: #A83B3E; }
.acct-hint { font-size: 12px; color: #B6BCC8; margin-top: 10px; line-height: 1.6; }
.acct-status { font-size: 12px; color: var(--text-muted); margin-top: 8px; min-height: 16px; }
.acct-status.is-err { color: #A83B3E; }
.acct-status.is-ok { color: var(--accent); }

/* ---------------- 游戏启动：端口自动搜索 + 启动联机按钮 ---------------- */
.game-launch { margin-top: 16px; }
.game-btn {
  margin-top: 10px; height: 34px; padding: 0 22px;
  border: none; border-radius: 8px;
  background: #C8CDD6; color: #FFFFFF;
  font-size: 13.5px; font-weight: 700; cursor: not-allowed;
  transition: background var(--transition), filter var(--transition);
}
/* 端口就绪 → 绿色，可开启 */
.game-btn.is-ready { background: var(--accent); cursor: pointer; }
.game-btn.is-ready:hover { filter: brightness(1.08); }
/* 正在关闭 → 红色「联机关闭」 */
.game-btn.is-closing { background: #EF4444; cursor: pointer; }
.game-btn.is-closing:hover { filter: brightness(1.08); }

/* 房间成员列表（宿主 tail Minecraft 日志实时回推） */
.player-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.player-item { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.player-item b { font-weight: 700; }
.player-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.player-time { font-size: 11.5px; color: #B6BCC8; }
.player-empty { font-size: 12.5px; color: #B6BCC8; }

/* 房客按钮：与启动联机并排，青蓝区分身份 */
.game-btn-row { display: flex; gap: 10px; margin-top: 10px; }
.game-btn-row .game-btn { margin-top: 0; flex: 0 0 auto; }
.game-btn-guest { background: #4A90D9 !important; cursor: pointer !important; }
.game-btn-guest:hover { filter: brightness(1.08); }

/* ---------------- 联机进入覆盖层：圆形扩散展开 ---------------- */
.join-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(38, 43, 52, 0.45);
  clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.join-overlay.is-open { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); }
.join-overlay[hidden] { display: none; }
.join-sheet {
  width: min(420px, 86vw);
  background: #FFFFFF; border-radius: 14px;
  padding: 22px 24px 20px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}
.join-head { display: flex; align-items: center; justify-content: space-between; }
.join-title { font-size: 16px; font-weight: 700; color: var(--text); }
.join-close {
  width: 28px; height: 28px; border: none; border-radius: 6px;
  background: transparent; color: var(--text-muted); font-size: 14px; cursor: pointer;
}
.join-close:hover { background: var(--hover); color: var(--text); }
.join-tip { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; margin: 10px 0 0; }
.join-tip b { color: var(--text); }
.join-row { margin-top: 10px; }
.join-input {
  width: 100%; height: 38px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid #E0E4EC; border-radius: 8px;
  background: #FFFFFF; color: var(--text);
  font-size: 13.5px; font-family: 'Saira', 'Microsoft YaHei', sans-serif;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.join-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(154, 204, 52, 0.18); }
.join-actions { display: flex; gap: 10px; margin-top: 16px; }
.join-go {
  flex: 1; height: 36px;
  border: none; border-radius: 8px;
  background: var(--accent); color: #FFFFFF;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: filter var(--transition);
}
.join-go:hover { filter: brightness(1.08); }
.join-go:disabled { opacity: 0.6; cursor: wait; }
.join-go-stop { background: #EF4444; }
.join-status { font-size: 12px; color: var(--text-muted); margin-top: 10px; min-height: 16px; }
.join-status.is-err { color: #A83B3E; }
.join-status.is-ok { color: var(--accent); }
/* 子页占位文字 */
.subnav-placeholder { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  border-radius: 8px;
  transition: background var(--transition), color var(--transition),
              padding var(--transition), gap var(--transition);
  position: relative;
  white-space: nowrap;
}
.nav-item:hover { background: var(--hover); color: var(--text); }

/* 悬停高亮块：条目 padding 12px 14px 是圆角矩形；
   折叠态收成 36px 宽的正方形高亮（与折叠后的条目同宽同高），不再是被压扁的长条。 */
.nav-item { border-radius: 10px; }
.sidebar.collapsed .nav-item { border-radius: 8px; }

/* 选中态：左侧小竖条 + 文字/图标变 accent */
.nav-item.active {
  color: var(--accent);
  background: transparent;  /* 只有小竖条，不要整块底色 */
}
.nav-item.active .nav-icon { stroke: var(--accent); }

/* 指示条：整根侧栏只有一根，切换导航时靠 transform 上下平移到目标项 */
.nav-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transform: translateY(0);
}
/* 首帧定位完成后由 JS 加 .is-ready：此时才开启过渡并显示 */
.nav-indicator.is-ready {
  opacity: 1;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.18s ease;
}
/* 系统开启「减少动态效果」时直接跳位 */
.nav-indicator.is-instant { transition: none; }

.nav-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  stroke: currentColor;
  flex-shrink: 0;
  transition: stroke var(--transition);
}
.nav-label { overflow: hidden; transition: opacity var(--transition); }
.sidebar.collapsed .nav-label { opacity: 0; width: 0; }

/* 折叠态：图标收回到侧栏中轴，与顶部火花（HCL）图标落在同一条竖直线上。
   侧栏 56px、.nav 左右各 10px 内边距 → 条目宽 36，图标 22px；
   条目左右改为 7px 内边距后，图标中心 = 10 + 7 + 11 = 28 = 56 / 2。 */
.sidebar.collapsed .nav-item {
  gap: 0;
  padding-left: 7px;
  padding-right: 7px;
}

/* Tooltip（折叠态悬浮） */
.nav-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--text);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.sidebar.collapsed .nav-item:hover .nav-tooltip { opacity: 1; }

/* ================ 主面板 ================ */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}

/* 顶部条：高度与侧栏 Logo 区（16 + 36 + 16）对齐，形成一条统一的水平带 */
.topbar {
  height: 68px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding-right: 10px;
  cursor: default;
  user-select: none;
}
.win-btn {
  width: 46px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Saira', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.win-btn:hover { background: var(--hover); color: var(--text); }
.win-btn-close:hover { background: #EF4444; color: #fff; }

/* 内容区：顶部条已占位，这里只负责滚动与内边距。
   挂 flex 纵向布局，让 .content 及其内部区块可以撑满剩余高度（联机面板要伸到页底） */
.main-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0 48px 32px;
  scrollbar-width: none;          /* Firefox：隐藏滚动条，滚动仍有效 */
}
.main-body::-webkit-scrollbar { display: none; }  /* Chromium/WebView2：同上 */
.content {
  max-width: 984px;
  flex: 1 0 auto;                 /* 纵向撑满，短内容页也能让面板伸到底 */
  display: flex;
  flex-direction: column;
  will-change: opacity, transform;
}
.content > * { flex-shrink: 0; }  /* 普通区块不压缩，只有联机面板允许伸展 */
.page-title {
  font-family: 'Saira', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--text);
  margin-bottom: 12px;
}
.page-hint {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ================ 「更多」页操作区：分组名称 + 984 × 94 框架 + 四个等大按钮 ================ */
.action-block { margin-top: 28px; }
/* hidden 属性优先于 display，否则隐藏失效 */
.action-block[hidden] { display: none; }

.action-caption {
  font-family: 'Saira', 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}

.action-grid {
  width: 984px;
  max-width: 100%;
  height: 94px;
  padding: 10px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  box-sizing: border-box;
  border-radius: 12px;
  background: var(--sidebar-bg);
}
/* hidden 属性优先于上面的 display:flex，否则隐藏失效 */
.action-grid[hidden] { display: none; }

.action-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--text);
  font-family: 'Saira', 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.action-btn:hover {
  background: #FFFFFF;
  color: var(--accent);
  border-color: var(--accent);
}
.action-btn:active { transform: scale(0.985); }
.action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 变宽时最多铺到 984，变窄时按容器收缩，按钮始终保持等宽 */
@media (max-width: 1090px) {
  .action-grid { width: 100%; }
}

/* ================ 通用提示弹框 ================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 49, 66, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-card {
  width: 320px;
  max-width: calc(100vw - 48px);
  padding: 22px 22px 18px;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 18px 48px rgba(45, 49, 66, 0.18);
  transform: translateY(10px) scale(0.96);
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.modal.is-open .modal-card { transform: none; }

.modal-title {
  font-family: 'Saira', 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.modal-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 18px;
  white-space: pre-line;   /* 多行文案（今日人品两行）按 \n 换行 */
}
.modal-actions { display: flex; justify-content: flex-end; }

.modal-ok {
  min-width: 76px;
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #FFFFFF;
  font-family: 'Saira', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--transition), transform var(--transition);
}
.modal-ok:hover { filter: brightness(0.94); }
.modal-ok:active { transform: scale(0.97); }
.modal-ok:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* ================ 启动入场动画 ================ */
/* 页面首帧就开始播：侧栏自左滑入、主面板淡入上浮。只播一次，结束停在正常状态。
   与 C# 侧主窗口的透明度淡入叠加，形成「启动画面 → 主界面」的衔接感。 */
@keyframes hcl-sidebar-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hcl-main-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.sidebar { animation: hcl-sidebar-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.main    { animation: hcl-main-in    0.30s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .sidebar, .main { animation: none; }
}
/* ================ 今日人品：按分数改变界面配色 ================ */
/* 0~40：界面变红 */
.modal[data-tone="bad"] { background: rgba(229, 72, 77, 0.16); }
.modal[data-tone="bad"] .modal-card {
  background: #FFF4F4;
  border: 1px solid #F6C9CB;
}
.modal[data-tone="bad"] .modal-title { color: #D93A3F; }
.modal[data-tone="bad"] .modal-body  { color: #A83B3E; }
.modal[data-tone="bad"] .modal-ok    { background: #D93A3F; }

/* 41~60：界面渐粉 */
.modal[data-tone="soft"] { background: rgba(236, 116, 165, 0.14); }
.modal[data-tone="soft"] .modal-card {
  background: linear-gradient(160deg, #FFF8FB 0%, #FFE6F0 100%);
  border: 1px solid #F8D2E3;
}
.modal[data-tone="soft"] .modal-title { color: #C2417F; }
.modal[data-tone="soft"] .modal-body  { color: #A25076; }
.modal[data-tone="soft"] .modal-ok    { background: #D4679B; }

/* 61~100：界面正常（沿用默认白底 + 绿色按钮） */
/* ================ 关于页 ================ */
.about-block { margin-top: 20px; max-width: 984px; }
/* hidden 属性优先于 display，否则隐藏失效 */
.about-block[hidden] { display: none; }

.about-card {
  background: #FFFFFF;
  border: 1px solid #E8EAF0;
  border-radius: 12px;
  padding: 16px 18px;
}
.about-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.about-name {
  font-family: 'Saira', 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}
.about-version {
  font-family: 'Saira', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: #F4F9E6;
  border-radius: 999px;
  padding: 1px 9px;
}
.about-desc { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.about-path {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  word-break: break-all;      /* 路径很长时不撑破卡片 */
}

.about-caption { margin-top: 22px; margin-bottom: 12px; }

.author-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.author-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid #E8EAF0;
  border-radius: 12px;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.author-card:hover {
  border-color: #DCE3C8;
  box-shadow: 0 6px 18px rgba(45, 49, 66, 0.07);
  transform: translateY(-1px);
}

/* 头像：外链在线加载；加载中/失败都有底色，不会出现白洞 */
.author-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sidebar-bg);
  border: 1px solid #E8EAF0;
  opacity: 0;
  transition: opacity var(--transition);
}
.author-avatar.is-loaded { opacity: 1; }
/* 外链拿不到时（离线/防盗链）退化成首字头像 */
.author-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Saira', 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  background: #F4F9E6;
  opacity: 1;
}

.author-body { min-width: 0; }
/* 名字 + 右侧高亮椭圆标签（发起人 / 作者、制作者） */
.author-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.author-name { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.author-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;               /* 椭圆 */
  font-family: 'Saira', 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.6;
  color: #FFFFFF;
  background: linear-gradient(135deg, #A8D74E 0%, #8CC22C 100%);
  box-shadow: 0 1px 3px rgba(140, 194, 44, 0.38);
  white-space: nowrap;
}
.author-role { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--accent); }
.author-intro { margin-top: 7px; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }

/* ================ 背景图（HCL\HCLIMAGE） ================ */
/* HCLIMAGE 里有图时，宿主注入 window.__HCL_BG，前端给 .app 挂 .has-bg：
   整窗铺图，侧栏与主面板叠半透明，保证文字依然读得清；目录为空则不挂类，保持纯白。 */
.app.has-bg {
  background-image: var(--hcl-bg-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.app.has-bg .sidebar {
  background: rgba(245, 246, 248, 0.78);
  backdrop-filter: blur(8px);
}
.app.has-bg .main {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(2px);
}
/* 卡片略微透出背景，但保留白底以保证正文可读 */
.app.has-bg .about-card,
.app.has-bg .author-card {
  background: rgba(255, 255, 255, 0.9);
}
.app.has-bg .action-grid { background: rgba(245, 246, 248, 0.82); }
.app.has-bg .action-btn { background: rgba(255, 255, 255, 0.92); }

/* ================ 联机页子导航 ================ */
.subnav-block { margin-top: 4px; max-width: 984px; }
.subnav-block[hidden] { display: none; }   /* hidden 属性优先于 display */
/* 联机页时让面板区块吃掉剩余高度（伸到页面底部）；其它页不受影响 */
.subnav-block:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; }

.subnav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--sidebar-bg);
  border-radius: 10px;
  margin-bottom: 18px;
  position: relative;          /* 顶部滑动绿条的定位基准 */
}
.subnav-item {
  position: relative;
  padding: 8px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-family: 'Saira', 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 8px;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.subnav-item:hover { background: var(--hover); color: var(--text); }
.subnav-item.active { color: var(--accent); }

/* 顶部滑动绿条：整条子导航只有一根，切换时左右平移到选中项的正上方。
   与主侧栏的 .nav-indicator 同一思路：单元素 + transform 过渡，而不是每项各画一条。 */
.subnav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 3px;
  border-radius: 0 0 3px 3px;   /* 贴着子导航条顶部，只圆下缘 */
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s ease;
  z-index: 2;                   /* 压在子导航底色与悬停高亮之上 */
}
.subnav-indicator.is-ready { opacity: 1; }
.subnav-indicator.is-instant { transition: none; }

.subnav-panel {
  background: #FFFFFF;
  border: 1px solid #E8EAF0;
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-muted);
  min-height: 120px;
  /* 联机页时面板本身也伸到页底（父级 .subnav-block 已是纵向 flex） */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* ================ 关于页：友情链接 ================ */
.friend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
/* 横排「图标 + 名称/介绍」左对齐；padding-left 16px 与作者卡片一致，
   图标 58px 圆形 → 中心 = 268 + 1(border) + 16 + 29 = 314，与阿轩头像严格同轴 */
.friend-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  max-width: 420px;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid #E8EAF0;
  border-radius: 12px;
  text-decoration: none;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.friend-card:hover {
  border-color: #DCE3C8;
  box-shadow: 0 6px 18px rgba(45, 49, 66, 0.07);
  transform: translateY(-1px);
}
.friend-name {
  font-family: 'Saira', 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.friend-card:hover .friend-name { color: var(--accent); }
.friend-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  word-break: break-all;
}
.friend-logo {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sidebar-bg);
  border: 1px solid #E8EAF0;
  opacity: 0;
  transition: opacity var(--transition);
}
.friend-logo.is-loaded { opacity: 1; }
.friend-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Saira', 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  background: #F4F9E6;
  opacity: 1;
}
.friend-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* 作者名字可点击链接（思雨 → 博客）：默认与普通名字同色，悬停变绿提示可点 */
.author-name-link {
  color: var(--text);
  text-decoration: none;
  transition: color var(--transition);
}
.author-name-link:hover { color: var(--accent); }

/* 友链卡片的名称行：名称 + 许可证徽章并排 */
.friend-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.license-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 1px 8px;
  border: 1px solid #E0E4EC;
  border-radius: 999px;
  background: #F5F6F8;
  color: var(--text-muted);
  font-family: 'Saira', 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.license-badge:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}