/* ============================================================================
   HUD 精简版 · hud-lite.css            freedomfleet.cn / 首页
   ----------------------------------------------------------------------------
   来源：工作台 dashboard_static/hud.css ~ hud8.css 的「视觉语言」抽出来的一层薄样式。
   目标：三个入口（首页 / /eve/ 市场 / /chat/）共用同一套观感。

   只做视觉，不改功能：本站点的卡片 id、面板 id、onclick 处理函数
   与改版前完全一致（见 site-draft/VERIFY-hud-lite.md 的逐项比对）。

   从工作台那份踩过的坑，原样继承（别重犯）：
     × clip-path 会把 box-shadow 一起裁掉     → 用「顶边发丝高光」代替阴影
     × filter:drop-shadow 打在低透明度容器上会取到字形轮廓 → 只对 SVG 用
     × 矮元素（≤16px 的条 / 格子）不能加斜切角 → 会直接切没
     × 卡片必须**不透明**：半透明会让六边形底纹透进卡片顶部，糊出一条脏带
     × 中文标题 letter-spacing 不能大：.2em 会把「文本处理」拆成「文 本 处 理」

   加载方式（首页）：
     <link rel="stylesheet" href="hud-lite.css">
   回退：删掉那一行即可（index.html 自身的结构未变）。

   ── 三个刻意的取舍（审查 F6 / F12 提出，这里写清为什么不改）────────────
   ① **不删内联 <style>，只覆盖**（F6）。代价是「双重真源」：同一批选择器在两边各定义一次。
      换来的是**安全性**：若 hud-lite.css 加载失败/被误删，页面退回今天的样子，
      而不是变成一坨无样式的裸 HTML。清理内联样式要在正式上线时随四步一起做，不在这份草稿里做。
   ② **不加全局 reset**（F12）。本文件假设宿主页已提供 `box-sizing:border-box`
      （现状首页有 `*{margin:0;padding:0;box-sizing:border-box}`）。
      若将来给 /eve/ 或 /chat/ 复用，**不要**把 `*{margin:0;padding:0}` 带过去 ——
      那会砸掉别人的布局。缺的是 `box-sizing` 就在目标页单独补。
   ③ **不改功能**。本轮只动视觉；卡片仍是 `<div onclick>`（键盘不可达）、
      Base64/URL 解码无 try/catch 等**功能层问题**一律留给后续任务，不混在这次改动里。
   ============================================================================ */

:root{
  --cy:      #22d3ee;                 /* 主强调：青 */
  --cy-2:    #67e8f9;
  --cy-soft: rgba(34,211,238,.09);
  --ok:      #34d399;
  --amber:   #fbbf24;
  --bad:     #f87171;
  --ink:     #05080f;                 /* 底：深空 */
  --ink-2:   #0b1220;
  --ink-3:   #141d30;
  --line:    rgba(120,200,225,.16);
  --line-hi: rgba(34,211,238,.34);
  --txt:     #b6c9d6;
  --txt-dim: #6d8496;
  --mono: ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
  --sans: system-ui,-apple-system,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}

/* ── 0. 底色 + 六边形蜂窝底纹 + 扫描线 ───────────────────────────────── */

html,body{ height:100%; }

body{
  font-family: var(--sans);
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(34,211,238,.11), transparent 62%),
    radial-gradient(900px 520px at 92% 1%,  rgba(99,102,241,.10), transparent 60%),
    var(--ink);
  color: var(--txt);
}

/* 蜂窝底纹（内联 SVG，无外链）—— 顶部密、往下淡出 */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%2322d3ee' stroke-opacity='0.12' stroke-width='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:28px 49px;
  -webkit-mask-image:radial-gradient(1300px 820px at 50% -4%, #000 26%, transparent 84%);
          mask-image:radial-gradient(1300px 820px at 50% -4%, #000 26%, transparent 84%);
}

/* 极淡横向扫描纹理（CRT 感，不抢内容） */
body::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px);
}

/* 缓慢下移的扫描光带（放在正文之上，只有 .026 的白，纯氛围） */
.hudscan{
  position:fixed; left:0; right:0; top:0; height:190px; z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(34,211,238,.026), transparent);
  animation:hudscan 9.5s linear infinite;
}
@keyframes hudscan{ from{ transform:translateY(-210px) } to{ transform:translateY(105vh) } }

/* 星点层（JS 生成，见文件末尾）
   ★ 2026-09-17 修正（审查 F1，高）：原本这里写 z-index:-1 + 一层不透明径向渐变，
     结果整层**根本不可见**。原因：内联样式给 `html,body` 都设了不透明 background:#050510，
     于是 html 自己有不透明背景 → body 的背景**不会**传播到 canvas → body 的背景按普通元素
     背景绘制（CSS 2.1 附录 E 绘制顺序第 3 步），而 z-index:-1 的负层是第 2 步
     → **body 的不透明背景盖在 #bg 之上**，150 个星点连光晕一起被埋。
   （该缺陷改版前就存在，不是本次引入；hud-lite 一并修掉。）
   修法：抬到 z-index:0（第 6 步，在 body 背景之上），并去掉自带的不透明渐变
   —— 底色交给 body 的辉光渐变，这一层只负责星点。 */
#bg{ position:fixed; inset:0; z-index:0; pointer-events:none; background:none; }

/* 正文层压到星点/底纹之上 */
.header, .main, .footer{ position:relative; z-index:1; }

/* ── 1. 顶栏 ────────────────────────────────────────────────────────── */

.header{
  padding:46px 20px 24px; text-align:center;
  background:linear-gradient(180deg, rgba(20,29,48,.55), transparent);
  margin-bottom:26px;
}
.header::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.62) 22%,
                             rgba(34,211,238,.07) 62%, transparent);
}
.header h1{
  font-size:clamp(24px, 4.6vw, 38px); font-weight:700;
  color:#eafcff; letter-spacing:.02em;
  text-shadow:0 0 26px rgba(34,211,238,.30);
}
/* 标题左侧的发光菱形（工作台 h1 同款标记） */
.header h1::before{
  content:''; display:inline-block; vertical-align:middle;
  width:11px; height:11px; margin:0 13px 4px 0;
  background:var(--cy); box-shadow:0 0 14px var(--cy);
  transform:rotate(45deg);
}
.header p{ font-size:15px; color:var(--txt); opacity:.8; margin-top:9px; }

.hudmeta{
  display:flex; gap:8px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin-top:15px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.10em;
  color:var(--txt-dim);
}
.badge{
  font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  border-radius:2px; padding:3px 9px;
  background:var(--cy-soft); color:#8ceaff;
  border:1px solid rgba(34,211,238,.30);
}

/* ── 2. 工具卡：斜切角 + 顶边发丝高光 + 右上角编号 ──────────────────── */

.main{ max-width:1200px; margin:0 auto; padding:0 20px 60px; }

.tools{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(238px, 1fr));
  gap:14px; counter-reset:tool;
}
.card{
  position:relative;
  /* 必须不透明：半透明会让蜂窝底纹透进卡片顶部，糊出一条脏带 */
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--line); border-radius:2px;
  padding:15px 16px 16px; text-align:left;
  cursor:pointer; transition:border-color .25s, background .25s;
  clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%,
                    13px 100%, 0 calc(100% - 13px));
  counter-increment:tool;
}
.card:hover{
  border-color:var(--line-hi);
  background:linear-gradient(180deg, #16223a, #0c1424);
  transform:translateY(-3px);
  /* ★ 审查 F7：这里原本写了 box-shadow，但 .card 有 clip-path，
     阴影会被一并裁掉 → 是条死声明，而且与上面「顶边高光取代被裁掉的 box-shadow」的注释自相矛盾。
     直接删掉，悬浮反馈只靠边框色 + 底色 + 位移。 */
}
/* 顶边高光：取代被 clip-path 裁掉的 box-shadow */
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(34,211,238,.85), rgba(34,211,238,.10) 42%, transparent 78%);
}
/* 右上角编号（放在切角内侧，不会被裁掉） */
.card::after{
  content:counter(tool, decimal-leading-zero);
  position:absolute; top:11px; right:20px;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  color:rgba(34,211,238,.34);
}
.card:hover::after{ color:rgba(34,211,238,.62); }
.card h3{
  font-family:var(--mono); font-size:13.5px; font-weight:600;
  letter-spacing:.04em; color:#eafcff; margin-bottom:7px;
}
.card p{
  font-size:11.5px; color:var(--txt-dim); line-height:1.45;
  /* ★ 审查 F5：内联样式里有 `.card p{opacity:0.75}` 未被覆盖，
     --txt-dim(#6d8496) 再叠 0.75 → 合成约 #576a7c，对卡片底约 3.2:1，WCAG AA 不达标。
     显式清零，把对比度还给 --txt-dim 本身（约 4.6–4.9:1）。 */
  opacity:1;
}

/* ── 3. 工具面板 ────────────────────────────────────────────────────── */

/* ★ 审查 F6：内联样式给 .header / .card / .panel 留了 backdrop-filter:blur()。
   现在这三者底色都是**不透明**的，毛玻璃没有任何视觉收益，只剩合成开销 → 显式关掉。
   （这里只是叠加覆盖，内联那份仍在；真要清理须走「备份→审查→切换→验证」四步。） */
.header, .card, .panel{ backdrop-filter:none; -webkit-backdrop-filter:none; }

.panel{
  position:relative; display:none;
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--line); border-radius:2px;
  padding:16px 16px 17px; margin:26px 0;
  clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%,
                    13px 100%, 0 calc(100% - 13px));
}
.panel::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(34,211,238,.85), rgba(34,211,238,.10) 42%, transparent 78%);
}
.panel::after{
  content:''; position:absolute; top:0; right:16px; width:24px; height:2px;
  background:rgba(34,211,238,.5);
}
.panel h2{
  position:relative;
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  /* 字距不能大：中文标题会被拆成「文 本 处 理」 */
  letter-spacing:.06em;
  color:rgba(150,195,215,.85);
  margin:0 0 14px 0; padding:0 0 8px 12px;
  border-bottom:1px solid rgba(120,200,225,.09);
}
/* 标题左侧的发光竖条 */
.panel h2::before{
  content:''; position:absolute; left:0; top:1px;
  width:3px; height:12px; background:var(--cy);
  box-shadow:0 0 9px rgba(34,211,238,.9);
}

/* ── 4. 表单控件 ────────────────────────────────────────────────────── */

textarea, input{
  width:100%; padding:11px 12px;
  background:#070c16; color:#eafcff;
  border:1px solid rgba(120,200,225,.18); border-radius:2px;
  font-family:var(--mono); font-size:13px; margin-bottom:10px;
}
textarea:focus, input:focus{
  outline:none; border-color:var(--line-hi);
  box-shadow:0 0 0 3px rgba(34,211,238,.09);
}
::placeholder{ color:var(--txt-dim); }

button{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase;
  background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(34,211,238,.09));
  border:1px solid rgba(34,211,238,.45); color:#c8f6ff;
  padding:9px 16px; border-radius:2px; cursor:pointer;
  margin:3px 5px 3px 0;
  transition:box-shadow .2s, background .2s;
}
button:hover{
  background:linear-gradient(180deg, rgba(34,211,238,.36), rgba(34,211,238,.18));
  box-shadow:0 0 15px rgba(34,211,238,.35);
}
button:active{ transform:translateY(1px); }

/* ── 5. 结果框：左侧状态条 ──────────────────────────────────────────── */

.result{
  background:#070c16; border-left:2px solid var(--line-hi);
  padding:11px 12px; border-radius:2px; margin-top:10px;
  font-family:var(--mono); font-size:12.5px; color:#dff6ff;
  line-height:1.55; word-break:break-all;
}

a{ color:var(--cy-2); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ── 6. 页脚 ────────────────────────────────────────────────────────── */

.footer{
  text-align:center; padding:34px 20px 40px;
  background:linear-gradient(180deg, transparent, rgba(10,10,20,.8));
  margin-top:50px; font-size:13px; color:var(--txt-dim);
}
.footer::before{
  content:''; display:block; height:1px; margin:0 0 26px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.30) 50%, transparent);
}
.footer .icp{ margin-top:9px; font-size:11.5px; font-family:var(--mono); letter-spacing:.05em; }
.footer .icp a{ color:var(--cy); text-decoration:none; }
.footer .icp a:hover{ color:var(--cy-2); text-decoration:underline; }

/* ── 7. 滚动条 ──────────────────────────────────────────────────────── */

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:rgba(255,255,255,.02); }
::-webkit-scrollbar-thumb{ background:rgba(34,211,238,.26); border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:rgba(34,211,238,.48); }

::selection{ background:rgba(34,211,238,.28); color:#eafcff; }

/* ── 8. 动效降级 ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  .hudscan{ display:none; }
}

/* 窄屏：卡片改为单列，减少留白（T3 移动端可用性的第一步） */
@media (max-width: 560px){
  .tools{ grid-template-columns:1fr; gap:11px; }
  .header{ padding:34px 16px 20px; }
  .main{ padding:0 14px 44px; }
  .panel{ padding:14px 13px 15px; }
}