/* Who am I? — TUI 主题
 *
 * 调色板与 gem-quest 同源（深黑底 + 柔绿字 + 琥珀强调）：
 *   text #7fe0a8 / dim #4e9f74 / accent #ffd24a / accentSoft #d9ae2e
 *   border #2f6b4d / panelBg #000000 / codeBlock #000000
 *   link #78ffaa / error #ff5555
 *
 * 规则（和终端保持一致，别偏离）：
 *   - 全等宽字体，正文也是。终端里没有无衬线。
 *   - 无圆角、无投影。面板 = 1px 边框，靠 ── 线条分区。
 *   - 白卡全部去掉，改深色面板；文字是暖米色不是纯白。
 *   - 强调色是琥珀 #ffd24a。
 *
 * 历史：初版是粉色 neo-brutalism，二版是深底白卡 + 蓝，现在是 TUI。
 * 字体：Maple Mono 400/700 都要（正文也等宽，需要 bold 字重）。
 * 国旗字体保留。
 */

@font-face {
  font-family: "Country Flags";
  src: url("/assets/TwemojiCountryFlags-Bymva2JV.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* TUI dark palette */
  --bg: #0d1117;
  --panel: #000000;
  --panel-alt: #11161d;
  --panel-head: #11161d;
  --ink: #7fe0a8;
  --ink-soft: #4e9f74;
  --line: #2f6b4d;
  --accent: #ffd24a;
  --accent-soft: #d9ae2e;
  --link: #78ffaa;
  --error: #ff5555;
  --radius: 0px;

  /* 终端只有等宽。sans 变量保留是为了兼容遗留选择器，值也指向等宽。
     ⚠ Maple Mono 只有拉丁字集，中文必须靠后面的 CJK 回退，
     否则汉字全是豆腐块（□□□）。回退项排在等宽体后面，
     不影响 IP/UA 这类纯 ASCII 内容的等宽对齐。 */
  --font-mono: "Courier New", "Country Flags", Courier, "Nimbus Mono PS",
    "Liberation Mono", "Noto Sans Mono CJK SC", "Noto Sans CJK SC",
    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", monospace;
  --font-sans: var(--font-mono);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  min-height: 100dvh;
  /* 纯色底，不用渐变——终端没有渐变背景 */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

main {
  margin-inline: auto;
  width: 100%;
  /* 硬上限：width:fit-content 遇上超长不断行内容（如 User-Agent）会一直
     撑宽面板，此时 dd 的 overflow-wrap 不生效（容器优先长大而不是换行）。 */
  max-width: min(46rem, 100%);
  /* 与 tools 站各工具页对齐：普通文档流，从顶部开始。
     原来是 flex + min-height:100dvh + justify-content:center，
     内容不满一屏时会被推到屏幕正中，跟其他页面不一致。 */
  padding: 2rem 1rem calc(3rem + env(safe-area-inset-bottom, 0px));
}

/* --- 顶部返回：做成终端提示符里的一条命令 --- */
.crumb { margin-bottom: 0.9rem; font-size: 0.8rem; }
.crumb a {
  color: var(--ink-soft);
  text-decoration: none;
}
.crumb a::before {
  content: "$ cd ";
  color: var(--line);
}
.crumb a:hover { color: var(--accent); }

/* --- 页头：$ whoami --- */
.badge-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
/* logo 旁边的标题块：原来 .badge-row 是纵向 flex，加了 logo 后
   改成横向，标题与副标题包一层继续纵向排。*/
.badge-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}
.badge-row .badge {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0;
}
.badge-row .badge::before {
  content: "> ";
  color: var(--accent-soft);
}
.page-sub {
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.page-sub::before {
  content: "# ";
  color: var(--line);
}

/* --- 面板（原 .card）：1px 框，无圆角无投影 --- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.card-body { padding: 1.1rem 1.25rem; }
@media (min-width: 40rem) { .card-body { padding-inline: 1.5rem; } }
.card-body-sm { padding-inline: 1.25rem; }
@media (min-width: 40rem) { .card-body-sm { padding-inline: 1.5rem; } }
.section-divider { border-top: 1px solid var(--line); }
.pt-10 { padding-top: 1.5rem; }
.mt-4 { margin-top: 0.9rem; }
.text-center { text-align: center; }
.font-mono { font-family: var(--font-mono); }

/* --- 区块标题：── ORIGIN ─────────── --- */
.dl-head { margin-bottom: 0.8rem; }
.card .badge {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
/* 标题右侧补一条横线拉到底，像 TUI 的分节符 */
.card .badge::after {
  content: "";
  flex: 1;
  height: 1px;
  margin-left: 0.35rem;
  background: var(--line);
}
.card .badge svg { width: 0.9rem; height: 0.9rem; flex: none; }

/* --- IP 主显示：终端里最亮的一行 --- */
.ip-display {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  overflow-wrap: break-word;
}
@media (min-width: 40rem) { .ip-display { font-size: 1.95rem; } }

/* IPv6 副地址行 */
.ip-display-v6 {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-soft);
}
@media (min-width: 40rem) { .ip-display-v6 { font-size: 1.05rem; } }

/* --- 键值列表：dt 淡色 + 前缀点，dd 暖米色 --- */
.dl { display: flex; flex-direction: column; gap: 0.4rem; }
.dl-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}
.dl dt {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
/* 行首标记，模仿 TUI 列表项 */
.dl dt::before {
  content: "- ";
  color: var(--line);
}
.dl dd {
  min-width: 0;
  text-align: end;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink);
  /* anywhere（而不是 break-word）：User-Agent 里的长 token 如
     AppleWebKit/537.36 内部没空格，break-word 断不开，会把卡片撑宽。
     anywhere 允许任意处断行，这样 UA 才能和其他行一样待在右列，
     不用单独占一整行。 */
  overflow-wrap: anywhere;
  /* balance 对长串会排得难看（末行忽长忽短），统一 normal */
  text-wrap: normal;
}

/* 窄屏（手机）：每行改上下布局，避免长内容（指纹/分辨率）挤压溢出 */
@media (max-width: 560px) {
  .dl-row { flex-direction: column; align-items: flex-start; gap: 0.05rem; }
  .dl dd { text-align: start; width: 100%; }
}

/* User-Agent 行：行结构和其他行一样（标签左 / 值右列），
   旧版把它改成 dt 单行 + dd 占整行，和 Platform / Screen / Fingerprint
   长得不一样，列表不整齐，已去掉。

   但值单独改成左对齐：UA 在桌面宽也要折 5 行，跟着 .dl dd 的
   text-align:end 会让左边缘参差不齐，没法扫读。其他行都是单行，
   右对齐无影响；只有多行的这一行需要干净的左边缘。
   （窄屏下 max-width:560px 规则已统一改成 start，这里只补桌面） */
.dl-row-wide dd {
  text-align: start;
  line-height: 1.6;
}

.hint {
  cursor: help;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}
.muted { color: var(--ink-soft); }

/* --- 页脚：做成 TUI 底部状态栏 --- */
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem 1.5rem;
  border-top: 1px solid var(--line);
  padding: 0.9rem 1.25rem;
  text-align: center;
  /* ⚠ 不能用 --ink-soft：状态栏底色是 --panel-head，比页面底色亮，
     #4e9f74 在它上面只有 3.3:1，小字不达标。改用 TUI 的 systemText（5.3:1）。 */
  color: var(--ink-soft);
  font-size: 0.75rem;
  background: var(--panel-head);
}
/* 同理，页脚里的 .muted 也要抬亮，否则比正文更糊 */
footer .muted { color: var(--ink-soft); }
@media (min-width: 40rem) {
  footer { padding-inline: 1.5rem; justify-content: space-between; text-align: start; }
}
footer .select-all {
  -webkit-user-select: text;
  user-select: text;
  color: var(--link);
}
footer .prompt {
  -webkit-user-select: none;
  user-select: none;
  color: var(--accent-soft);
}

/* --- Skeleton loading：终端里用暗块占位 --- */
.skeleton {
  display: inline-block;
  height: 0.8rem;
  border-radius: 0;
  background-color: var(--panel-alt);
  border: 1px solid var(--line);
  vertical-align: middle;
  animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
.skeleton.w-\[10ch\] { width: 10ch; }
.skeleton.w-\[14ch\] { width: 14ch; }
.skeleton.w-\[16ch\] { width: 16ch; }
.skeleton.w-\[18ch\] { width: 18ch; }
.skeleton.w-\[20ch\] { width: 20ch; }
.skeleton.w-\[22ch\] { width: 22ch; }
.skeleton.w-\[24ch\] { width: 24ch; }
.skeleton.w-\[30ch\] { width: 30ch; }
@keyframes pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: no-preference) {
  .motion-pulse { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
}

a.hover-underline:hover { text-decoration: underline; }