/* =============================================================
   Fish-Web 基础层
   -------------------------------------------------------------
   1. 字体：Sora（西文/标题）+ MiSans VF（中文，150–700 可变字重）
           + IBM Plex Mono（代码）
   2. 图标：SVG <symbol> 雪碧图（定义见 includes/icons.php）
   3. 品牌标记：鱼形 SVG
   全站页面在自身样式表之前引入本文件。
   ============================================================= */

:root {
  /* 西文字形优先 Sora，中文字形交给 MiSans VF；两者字面高度接近，混排不跳 */
  --font-sans: "Sora", "MiSans VF", "MiSans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               system-ui, sans-serif;
  --font-display: "Sora", "MiSans VF", "MiSans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, "Liberation Mono", monospace;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 全局套用字体（各页面 body 里的 font 简写仍会写死族名，这里用变量优先级覆盖） */
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6,
.display {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

code, pre, kbd, samp, .mono,
.mono-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* 数字用等宽（表格、余额、token 统计） */
.num,
.points,
table td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------
   图标
   ------------------------------------------------------------- */

/* 雪碧图容器：不可见但不使用 display:none，避免部分浏览器拒绝 <use> 引用 */
.ico-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ico {
  width: 18px;
  height: 18px;
  flex: none;
  display: inline-block;
  vertical-align: -0.16em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico.xs { width: 14px; height: 14px; }
.ico.sm { width: 16px; height: 16px; }
.ico.md { width: 18px; height: 18px; }
.ico.lg { width: 22px; height: 22px; }
.ico.xl { width: 28px; height: 28px; }
.ico.xxl { width: 34px; height: 34px; }

/* 细描边（导航、表头等密集场景） */
.ico.thin { stroke-width: 1.5; }
/* 粗描边（强调按钮） */
.ico.bold { stroke-width: 2; }

/* 图标 + 文字的横向组合 */
.ico-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* -------------------------------------------------------------
   品牌标记（鱼形）
   ------------------------------------------------------------- */

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* .mark 是鱼形图标容器。鱼形为线描稿，尺寸需 >= 26px 才看得清，
   因此各页面直接用 26–36px 展示图形本身，不再塞进小色块 */
.mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.mark .ico {
  width: 100%;
  height: 100%;
  vertical-align: 0;
}

/* -------------------------------------------------------------
   提示行（对话中的错误 / 警告）
   ------------------------------------------------------------- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  background: rgba(242, 85, 122, .10);
  border: 1px solid rgba(242, 85, 122, .28);
  color: #ffb3c4;
}
.notice .ico { color: #f2557a; margin-top: 2px; }
.notice.warn {
  background: rgba(240, 180, 41, .10);
  border-color: rgba(240, 180, 41, .30);
  color: #f3d08a;
}
.notice.warn .ico { color: #f0b429; }

/* 安装引导页的品牌标记 */
.install-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  color: #4c6ef5;
}
.install-mark .mark { width: 56px; height: 56px; color: #4c6ef5; }

/* -------------------------------------------------------------
   轻提示（全站共用，玻璃质感）
   ------------------------------------------------------------- */
#fwToast {
  position: fixed;
  right: 18px;
  bottom: 44px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}
.fw-toast {
  max-width: 320px;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #e7eaf0;
  background: rgba(30, 36, 47, .82);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 16px 40px -18px rgba(0, 0, 0, .95);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  animation: fw-toast-in .2s ease-out;
  transition: opacity .22s, transform .22s;
}
.fw-toast.error { border-color: rgba(242, 85, 122, .45); color: #ffc2d0; }
.fw-toast.ok { border-color: rgba(62, 207, 142, .45); color: #b7f0d6; }
.fw-toast.out { opacity: 0; transform: translateY(4px); }

@keyframes fw-toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}