/* ============================================================
   纸月的小站 — P5 式菜单交互 × 海蓝配色
   主页 = 分类菜单；点击进入分类子页（动画过渡）
   ============================================================ */

:root {
  --navy:      #062A42;
  --cyan:      #0FD8E0;
  --cyan-soft: #8FF4F7;
  /* 字体系统三层分工：导航层（全局默认粗斜体）/ 内容层（宋体）/ 系统层（HUD 机械体） */
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "思源宋体", "SimSun", serif;
  --font-hud:   "Chakra Petch", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #1D78C4;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- 背景（双层交叉淡入淡出） ---------- */

.bg-layer {
  position: fixed; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .5s ease;
}

/* 左侧压暗，保证文字可读 */
.bg-overlay {
  position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(6,42,66,.62) 0%,
    rgba(6,42,66,.28) 42%,
    rgba(6,42,66,.05) 72%,
    rgba(6,42,66,0) 100%);
}

/* 底部压暗：遮住背景图自带的水印/版权字，并为底部信息提供干净底色 */
.bg-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; height: 20vh; min-height: 96px;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(5,24,40,.55) 0%,
    rgba(5,24,40,.22) 45%,
    rgba(5,24,40,0) 100%);
}

/* ---------- 视图与过渡 ---------- */

.view {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 6vw;
}

.view.exit {
  animation: viewOut .22s ease both;
  pointer-events: none;
}
@keyframes viewOut {
  to { opacity: 0; transform: translateX(-48px); }
}

/* 级联滑入（只动位移和透明度；斜切由内层 .slanted 常驻负责，避免渲染跳变） */
.view.enter .brand,
.view.enter .cat-title,
.view.enter .menu-item {
  animation: slideIn .32s cubic-bezier(.2,.9,.25,1) backwards;
}
.view.enter .menu-item { animation-delay: calc(70ms + var(--i, 0) * 45ms); }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(70px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 常驻斜切层：自身不参与任何动画 */
.slanted { display: inline-block; transform: skewX(-8deg); }

/* ---------- 站点标题（头像 + 站名） ---------- */

.brand {
  position: absolute; top: 26px; left: 6vw;
  display: flex; align-items: center; gap: 18px;
}

.avatar {
  width: 74px; height: 74px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 4px 5px 0 rgba(6,42,66,.4);
}

/* 标题：深蓝斜切条 + 白字（与子页标题同一语言，明确层级） */
.brand-title {
  position: relative; z-index: 0;
  width: max-content; max-width: 86vw;
  padding: 5px 34px 5px 18px;
  border-left: 5px solid var(--cyan);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 900; font-style: italic;
  letter-spacing: 6px;
  color: #fff;
}
.brand-title::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

/* 副标题：不倾斜（避免颜文字躺倒），内容层宋体 + 青色微投影 */
.brand-sub {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: .95rem;
  letter-spacing: 2px;
  color: var(--cyan-soft);
  text-shadow: 1px 2px 0 rgba(6,42,66,.35);
}

/* 站点说明行：系统层 HUD 字体，淡小字（约 45% 视觉强度） */
.brand-desc {
  margin-top: 7px;
  font-family: var(--font-hud);
  font-size: .72rem;
  letter-spacing: 3px;
  color: rgba(255,255,255,.48);
  text-shadow: 0 1px 3px rgba(3,16,24,.5);
}

/* ---------- 菜单项（P5 式大字列表） ---------- */

.menu {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px;
}

.menu-item {
  position: relative; z-index: 0;
  display: block; width: max-content; max-width: 86vw;
  padding: 3px 40px 3px 20px;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900; font-style: italic;
  letter-spacing: 5px;
  color: #fff; text-decoration: none; cursor: pointer;
  text-shadow: 3px 3px 0 rgba(6,42,66,.55);
  transition: transform .15s ease, color .15s ease, text-shadow .15s ease;
}

/* 英文小字 */
/* 中文名固定最小宽度：保证各行英文左边缘落在同一隐形竖线上 */
.menu-item .zh { display: inline-block; min-width: 2em; }

.menu-item .en {
  margin-left: 14px;
  font-size: .38em; font-weight: 700; font-style: italic;
  letter-spacing: 3px;
  opacity: .75;
}

/* 悬停/选中时的斜切高亮条 */
.menu-item::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--cyan);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s ease;
}

.menu-item:hover,
.menu-item.selected {
  transform: translateX(14px);
  color: var(--navy);
  text-shadow: none;
}
.menu-item:hover::before,
.menu-item.selected::before {
  transform: scaleX(1);
}

/* ---------- 分类子页 ---------- */

/* 子页从顶部排布，给服务列表留足纵向空间；超出时可滚动 */
.view:not(.home) {
  justify-content: flex-start;
  padding-top: 12vh;
  overflow-y: auto;
}

.cat-title {
  position: relative; z-index: 0;
  width: max-content; max-width: 86vw;
  margin: 0 0 22px;
  padding: 4px 44px 4px 18px;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 900; font-style: italic;
  letter-spacing: 8px;
  color: var(--cyan-soft);
}
.cat-title::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
}
.cat-title .en {
  margin-left: 12px;
  font-size: .36em; letter-spacing: 4px;
  opacity: .8;
}

/* ---------- 子页服务条目（紧凑功能入口：正体、两行、半透明底条） ---------- */

.cat-menu .menu-item {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px;
  min-width: min(300px, 82vw);
  padding: 7px 34px 7px 16px;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-style: normal;
  letter-spacing: 1px;
  text-shadow: none;
  background: rgba(6,42,66,.55);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}

.cat-menu .entry-url {
  font-size: .68rem; font-weight: 600;
  letter-spacing: 1px;
  color: var(--cyan-soft);
  opacity: .9;
}

.cat-menu .menu-item:hover .entry-url,
.cat-menu .menu-item.selected .entry-url {
  color: var(--navy);
  opacity: 1;
}

/* ---------- 主页：选中分类预览（只展示，不操作） ---------- */

/* 位置由 JS 按菜单实际右缘动态放置。
   竖线标记"这是该分类的内容区域"，不跟随单个服务——预览列表，非选择列表 */
.cat-preview {
  position: absolute; top: 42%; left: 30vw; z-index: 0;
  width: 380px;
  padding-left: 22px;
  border-left: 2px solid rgba(15,216,224,.28);
  text-shadow: 0 1px 4px rgba(3,16,24,.55);
  pointer-events: none;
}

/* 切换动画：内容自下方浮入 */
.pv-inner.pv-in { animation: pvIn .22s ease; }
@keyframes pvIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Header：分区标签 + 服务计数 */
.pv-header {
  display: flex; justify-content: space-between; align-items: baseline;
}

.pv-desc {
  font-family: var(--font-hud);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: rgba(34,211,223,.9);
}

.pv-counter {
  font-family: var(--font-hud);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(255,255,255,.45);
}

/* 分隔线 */
.pv-sep {
  height: 1px; margin: 10px 0 6px;
  background: rgba(15,216,224,.22);
}

/* 服务条目：纯展示，无链接无状态无箭头 */
.pv-svc {
  display: flex; gap: 14px;
  padding: 10px 0;
}

/* 编号：HUD 字体点缀 */
.pv-svc-num {
  font-family: var(--font-hud);
  font-size: .68rem; font-weight: 600;
  color: rgba(255,255,255,.3);
  letter-spacing: .1em;
  min-width: 20px;
  flex: none;
  padding-top: 4px; /* 与服务名基线对齐 */
}

.pv-svc-text { flex: 1; min-width: 0; }

/* 服务名：宋体，与一级菜单的内容层一致 */
.pv-svc-name {
  font-family: var(--font-serif);
  font-size: 1.05rem; font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.4;
  color: rgba(255,255,255,.92);
}

/* 一句话描述：安静的 sans-serif 正文 */
.pv-svc-desc {
  font-size: .78rem; font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.5;
  color: rgba(255,255,255,.42);
  margin-top: 3px;
}

/* 空状态 */
.pv-empty {
  font-family: var(--font-serif);
  font-size: .85rem; letter-spacing: 1px;
  color: rgba(255,255,255,.45);
  padding: 12px 0;
}

.back-btn {
  position: fixed; left: 6vw; bottom: 58px; z-index: 2;
  padding: 7px 26px 7px 16px;
  background: rgba(6,42,66,.88);
  color: var(--cyan-soft);
  font-size: 1rem; font-weight: 900; font-style: italic;
  letter-spacing: 3px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.back-btn:hover { background: var(--cyan); color: var(--navy); }



/* ---------- 底部：服务状态栏 + ICP ---------- */

.status-bar {
  position: fixed; left: 6vw; right: 3vw; bottom: 14px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 24px;
  font-family: var(--font-hud);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.85);
  pointer-events: none;  /* 不遮挡背景，子元素单独恢复点击 */
}

/* 左下：系统状态摘要（异常优先；正常时只占两行，服务再多尺寸不变） */
.sys-status { position: relative; pointer-events: auto; user-select: none; }

.sys-line1 {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(255,255,255,.85);
}

.sys-line2 {
  margin-top: 3px;
  font-size: .66rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.42);
}
.sys-line2.alert { color: rgba(255,107,107,.8); }

/* 展开层：无底色无方框，与中间预览同一语言（细竖线 + 直接印在画面上的文字），
   可读性交给页面底部全局渐变；从摘要位置向上 clip/reveal 展开，文字逐行淡入 */
.sys-panel {
  position: absolute; bottom: calc(100% + 12px); left: 0;
  min-width: 220px;
  padding-left: 14px;
  border-left: 1px solid rgba(15,216,224,.22);
  text-shadow: 0 1px 3px rgba(3,16,24,.55);
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  clip-path: inset(100% 0 0 0);
  transition: opacity .18s ease, transform .18s ease, clip-path .22s ease,
              visibility 0s linear .22s;
}
.sys-status:hover .sys-panel,
.sys-status.open .sys-panel {
  opacity: 1; visibility: visible;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition: opacity .18s ease, transform .18s ease, clip-path .22s ease;
}

/* 逐行淡入（仅展开时有延迟；收起时立即隐去） */
.sys-panel > * {
  opacity: 0; transform: translateY(5px);
  transition: opacity .14s ease, transform .14s ease;
}
.sys-status:hover .sys-panel > *,
.sys-status.open .sys-panel > * { opacity: 1; transform: none; }
.sys-status:hover .sys-panel > :nth-child(1),  .sys-status.open .sys-panel > :nth-child(1)  { transition-delay: .02s; }
.sys-status:hover .sys-panel > :nth-child(2),  .sys-status.open .sys-panel > :nth-child(2)  { transition-delay: .05s; }
.sys-status:hover .sys-panel > :nth-child(3),  .sys-status.open .sys-panel > :nth-child(3)  { transition-delay: .08s; }
.sys-status:hover .sys-panel > :nth-child(4),  .sys-status.open .sys-panel > :nth-child(4)  { transition-delay: .11s; }
.sys-status:hover .sys-panel > :nth-child(5),  .sys-status.open .sys-panel > :nth-child(5)  { transition-delay: .14s; }
.sys-status:hover .sys-panel > :nth-child(6),  .sys-status.open .sys-panel > :nth-child(6)  { transition-delay: .17s; }
.sys-status:hover .sys-panel > :nth-child(7),  .sys-status.open .sys-panel > :nth-child(7)  { transition-delay: .20s; }
.sys-status:hover .sys-panel > :nth-child(8),  .sys-status.open .sys-panel > :nth-child(8)  { transition-delay: .23s; }
.sys-status:hover .sys-panel > :nth-child(9),  .sys-status.open .sys-panel > :nth-child(9)  { transition-delay: .26s; }
.sys-status:hover .sys-panel > :nth-child(10), .sys-status.open .sys-panel > :nth-child(10) { transition-delay: .29s; }
.sys-status:hover .sys-panel > :nth-child(11), .sys-status.open .sys-panel > :nth-child(11) { transition-delay: .32s; }
.sys-status:hover .sys-panel > :nth-child(12), .sys-status.open .sys-panel > :nth-child(12) { transition-delay: .35s; }

.sys-panel-title {
  margin-bottom: 6px;
  font-size: .62rem;
  letter-spacing: .2em;
  color: rgba(15,216,224,.6);
}

.sys-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0;
  font-size: .72rem;
  color: rgba(255,255,255,.82);
  text-decoration: none;
}
.sys-row:hover { color: var(--cyan-soft); }

/* 右侧只放一档元信息：正常=延迟（最低权重），异常=OFFLINE（红） */
.sys-row .meta {
  margin-left: auto; padding-left: 24px;
  text-align: right;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
}
.sys-row .meta.bad { color: rgba(255,107,107,.85); }

.sys-panel-foot {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px solid rgba(15,216,224,.15);
  font-size: .62rem;
  letter-spacing: .15em;
  color: rgba(255,255,255,.4);
}
.sys-panel-foot.bad { color: rgba(255,107,107,.8); }

.status-right { display: flex; align-items: center; gap: 20px; pointer-events: auto; }

.st-dot {
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: #8fa0ac;  /* 检测中 */
}
.st-dot.on  { background: var(--cyan); box-shadow: 0 0 5px rgba(15,216,224,.45); }
.st-dot.off { background: #FF6B6B;     box-shadow: 0 0 5px rgba(255,107,107,.4); }

.status-bar .icp {
  pointer-events: auto;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(3,16,24,.6);
  transition: color .2s;
}
.status-bar .icp:hover { color: var(--cyan-soft); }

/* ---------- 右上：micro HUD（栏目编号 + 系统标识） ---------- */

.micro-hud {
  position: fixed; top: 44px; right: 56px; z-index: 3;
  text-align: right;
  font-family: var(--font-hud);
  pointer-events: none;
  text-shadow: 0 0 1px rgba(255,255,255,.15); /* 描边为主，阴影只留发丝级 */
}

/* 只做"位置 + 时间"：栏目标识不出现于此（左侧 active 已是最强状态），
   也不用青色——让 active 菜单的大青块成为唯一的状态强调色。
   冷灰白细描边解决白字在高亮天空上的轮廓识别，paint-order 防止字形被描边吃掉 */
/* 编号：装饰性定位信息，次一级 */
.mh-num {
  font-size: .75rem; font-weight: 500; letter-spacing: .16em;
  color: rgba(255,255,255,.76);
  -webkit-text-stroke: .45px rgba(155,180,195,.72);
  paint-order: stroke fill;
}
.mh-sep { opacity: .45; }

/* 时间：功能性信息，比编号更亮更大半号——真正的可读取对象 */
.mh-clock {
  margin-top: 4px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(255,255,255,.92);
  -webkit-text-stroke: .45px rgba(155,180,195,.72);
  paint-order: stroke fill;
}

/* ---------- 响应式 ---------- */

@media (max-width: 900px) {
  .cat-preview, .micro-hud { display: none; }
}

@media (max-width: 640px) {
  .view { padding: 0 7vw; }
  .brand { top: 18px; left: 7vw; }
  .avatar { width: 60px; height: 60px; }
  .menu-item { letter-spacing: 4px; }
  .menu-item .en { display: block; margin: 2px 0 0; }
  .cat-title { letter-spacing: 6px; }
  .back-btn { left: 7vw; bottom: 66px; }
  .status-bar { left: 7vw; right: 7vw; font-size: .68rem; }
}