/* ══════════════════════════════════════════════════════════════
   Sprivio 全站打磨：小图标 + 轻动效（2026-09-26）
   龙哥：「检查全站 改加东西的加点那种小图标啥的 就像是这种各个链的图标
          还有效果啥的 不要让网站太素了」
   ──────────────────────────────────────────────────────────────
   动效只用三种（多了就是噪音）：
     · 入场：卡片滚进视野时淡入上移 10px，420ms，强 ease-out，同屏依次错开 40ms
     · 实时：「现读链上」的地方一颗呼吸的小绿点，2s 一次
     · 交互：可点的卡片和按钮悬停浮起 1–2px（只在有鼠标的设备上）；按下缩到 .97，160ms
   🔴 全部只动 transform / opacity —— 这站在 3440 宽屏上被毛玻璃 + 视频拖死过（见 quiet.css 顶部）
   🔴 prefers-reduced-motion：位移全部关掉，入场只留 200ms 淡入
   🔴 图标全是 CSS 遮罩（mask），颜色跟着文字走；JS 改按钮文字也冲不掉（伪元素不在文字里）
   图标来源：/icons/NOTICE.txt（Lucide ISC、Simple Icons CC0），链 logo 见 /chain-logos/NOTICE.txt
   ══════════════════════════════════════════════════════════════ */

:root {
  --sp-ink: #16323f;
  --sp-muted: #5b7a8b;
  --sp-accent: #2f6f86;
  --sp-accent-soft: #e6f1f6;
  --sp-line: #dde8ee;
  --sp-green: #1f9d68;
  --sp-ease: cubic-bezier(.23, 1, .32, 1);      /* 强 ease-out：进场和交互反馈都用它 */
}

/* ── 图标元素（polish.js 插入的 <i class="sp-i" style="--i:url(...)">） ── */
.sp-i {
  display: inline-block;
  width: 1.1em; height: 1.1em;
  flex: none;
  vertical-align: -0.18em;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.sp-logo { width: 1.15em; height: 1.15em; border-radius: 50%; object-fit: contain; vertical-align: -0.22em; flex: none; }

/* ── 顶部导航：每一项前面一个小图标 ── */
.workspace-nav a { display: inline-flex; align-items: center; gap: .4em; transition: color .18s var(--sp-ease), opacity .18s var(--sp-ease); }
.workspace-nav a::before {
  content: ""; display: none;
  width: 15px; height: 15px; flex: none;
  background: currentColor; opacity: .75;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
  transition: transform .2s var(--sp-ease), opacity .2s var(--sp-ease);
}
.workspace-nav a[href="/"]::before,
.workspace-nav a[href^="/launch"]::before { display: inline-block; --i: url(/icons/rocket.svg); }
.workspace-nav a[href^="/stocks"]::before { display: inline-block; --i: url(/icons/chart-candlestick.svg); }
.workspace-nav a[href^="/tokens"]::before { display: inline-block; --i: url(/icons/layers.svg); }
.workspace-nav a[href^="/bot"]::before { display: inline-block; --i: url(/icons/bot.svg); }
.workspace-nav a[href^="/bridge"]::before { display: inline-block; --i: url(/icons/arrow-left-right.svg); }
.workspace-nav a[href^="/docs"]::before { display: inline-block; --i: url(/icons/book-open.svg); }
.workspace-nav a[aria-current="page"]::before { opacity: 1; }

/* ── 按钮：常用动作带图标（伪元素，文字被 JS 改了也还在） ── */
#connect::before, #forward-connect::before, #sk-connect::before, #wallet-connect::before,
#launch::before, #refresh-tokens::before, .bot-cta::before {
  content: ""; display: inline-block;
  width: 1.05em; height: 1.05em; margin-right: .5em;
  vertical-align: -0.17em;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
#connect::before, #forward-connect::before, #sk-connect::before, #wallet-connect::before { --i: url(/icons/wallet.svg); }
#launch::before { --i: url(/icons/rocket.svg); }
#refresh-tokens::before { --i: url(/icons/refresh-cw.svg); }
.bot-cta::before { --i: url(/icons/brand-telegram.svg); }

button, .bot-cta, a.primary {
  transition: transform 160ms var(--sp-ease), box-shadow 200ms var(--sp-ease), background-color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  button.primary:not(:disabled):hover, #launch:not(:disabled):hover, .bot-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(22, 60, 78, .18);
  }
  #refresh-tokens:not(:disabled):hover::before { animation: sp-spin .6s var(--sp-ease); }
}
/* 按下的反馈：所有可按的东西都缩一点点（160ms，ease-out） */
button:not(:disabled):active, .bot-cta:active, .chain-cell:active, .token-card:active, #token-grid > a:active {
  transform: scale(.97); box-shadow: none;
}

/* ── 可点的卡片：悬停浮起 ── */
.token-card, .chain-cell, .sk-stock, .stock-card, #token-grid > a {
  transition: transform .2s var(--sp-ease), box-shadow .2s var(--sp-ease), border-color .2s var(--sp-ease);
}
@media (hover: hover) and (pointer: fine) {
  .token-card:hover, .chain-cell:hover, .sk-stock:hover, .stock-card:hover, #token-grid > a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(22, 60, 78, .12);
    border-color: #c4d9e3;
  }
  .chain-cell:hover .chain-cell-logo { transform: scale(1.1); }
  .legal-page .legal-card:hover { box-shadow: 0 10px 28px rgba(22, 60, 78, .08); }
  .sp-chain-rail li:hover { transform: translateY(-1px); border-color: #bcd3de; }
  .workspace-nav a:hover::before { opacity: 1; transform: translateY(-1px); }
}
.chain-cell .chain-cell-logo { transition: transform 200ms var(--sp-ease); }

/* ── 说明类页面（docs / bot / security / community / legal …）── */
.legal-page .legal-card { transition: box-shadow .25s var(--sp-ease), border-color .25s var(--sp-ease); }
.legal-page .legal-card > h2 { display: flex; align-items: center; gap: .55em; }
.legal-page .legal-card > h2 > .sp-h-ico {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  background: var(--sp-accent-soft); color: var(--sp-accent);
}
.legal-page .legal-card > h2 > .sp-h-ico .sp-i { width: 17px; height: 17px; vertical-align: 0; }

/* 页面大标题前的图标徽章 */
.legal-hero h1 { display: flex; align-items: center; gap: 14px; }
.legal-hero h1 > .sp-hero-ico {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 14px;
  background: linear-gradient(145deg, #eef6f9, #dcebf2);
  color: var(--sp-accent);
  box-shadow: inset 0 0 0 1px #d3e4ec, 0 6px 16px rgba(22, 60, 78, .08);
}
.legal-hero h1 > .sp-hero-ico .sp-i { width: 24px; height: 24px; vertical-align: 0; }

/* 🔴 修：.legal-hero p 这条规则是给小标题（NOTHING HERE ASKS YOU TO TRUST US）的 ——
   11px + 字距 2px。说明段落 .legal-lede 也吃到了它，读起来像被拉开的密码。 */
.legal-hero .legal-lede {
  margin-top: 14px; max-width: 64ch;
  font-size: 15.5px; line-height: 1.65; letter-spacing: 0; font-weight: 400;
  color: #3d525e;
}

/* 🔴 修：安全页顶上那排数字（#sec-strip.paper-strip）—— .paper-strip 的样式在 paper.css，
   安全页只加载 legal.css，于是「Robinhood ChainNETWORK」「4663CHAIN ID」挤成一行。
   这里给说明类页面单独补一份，做成四格小卡。 */
.legal-page .paper-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 18px 0 8px;
}
.legal-page .paper-strip > div {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 12px;
  background: #fff; border: 1px solid var(--sp-line);
}
.legal-page .paper-strip b { font-size: 1.15rem; font-weight: 650; color: #1e3a4a; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: .4em; }
.legal-page .paper-strip span { font-size: .68rem; letter-spacing: .08em; color: var(--sp-muted); }

/* 带要点的列表：每条前面一个圆底小图标（polish.js 按内容挑） */
.legal-card ul.sp-feature-list { list-style: none; padding-left: 0; }
.legal-card ul.sp-feature-list > li { position: relative; padding-left: 38px; margin: 12px 0; }
.legal-card ul.sp-feature-list > li > .sp-li-ico {
  position: absolute; left: 0; top: .05em;
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--sp-accent-soft); color: var(--sp-accent);
}
.legal-card ul.sp-feature-list > li > .sp-li-ico .sp-i { width: 15px; height: 15px; vertical-align: 0; }

/* 链 logo 一排（polish.js 放在提到「支持哪些链」的地方） */
.sp-chain-rail { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; padding: 0; list-style: none; }
.sp-chain-rail li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px; border-radius: 999px;
  background: #fff; border: 1px solid var(--sp-line);
  font-size: 12.5px; color: #2b4a5b; line-height: 1;
  transition: transform .2s var(--sp-ease), border-color .2s var(--sp-ease);
}
.sp-chain-rail img { width: 18px; height: 18px; border-radius: 50%; }
.sp-chain-rail li.is-home { border-color: #b9dccb; background: #f1faf5; font-weight: 600; }

/* ── 实时小绿点 ── */
.sp-live-dot {
  display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: var(--sp-green);
  vertical-align: .08em;
  box-shadow: 0 0 0 0 rgba(31, 157, 104, .45);
  animation: sp-pulse 2s var(--sp-ease) infinite;
}

/* ── 入场：只在 JS 就位后才藏（没 JS / JS 挂了一律全显示） ── */
html.sp-js .sp-reveal { opacity: 0; transform: translateY(10px); }
html.sp-js .sp-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 420ms var(--sp-ease), transform 420ms var(--sp-ease);
  transition-delay: var(--sp-delay, 0ms);
}

@keyframes sp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(31, 157, 104, .45); }
  70% { box-shadow: 0 0 0 7px rgba(31, 157, 104, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 157, 104, 0); }
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html.sp-js .sp-reveal { transform: none !important; }
  html.sp-js .sp-reveal.is-in { transition: opacity 200ms ease !important; }
  .sp-live-dot { animation: none; }
  .token-card, .chain-cell, .sk-stock, .stock-card, #token-grid > a, button, .bot-cta,
  .sp-chain-rail li, .chain-cell .chain-cell-logo, .workspace-nav a::before { transform: none !important; }
  #refresh-tokens::before { animation: none !important; }
}

/* ── Security 页的 Solana 检查器（sol-security.js，2026-09-26）── */
.legal-page .sol-check { display: flex; gap: 8px; margin: 14px 0 6px; }
.legal-page .sol-check input {
  flex: 1; min-width: 0; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--sp-line); background: #fff; color: var(--sp-ink);
  font: 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.legal-page .sol-check input:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 1px; }
.legal-page .sol-check button {
  padding: 0 18px; border-radius: 10px; border: 1px solid #2f6f86; background: #2f6f86; color: #fff;
  font-weight: 600; cursor: pointer;
}
.legal-page #sol-check-out .sec-facts dd small { display: block; margin-top: 3px; color: var(--sp-muted); font-size: .82em; line-height: 1.5; }
.legal-page #sol-check-out .sec-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.legal-page .sec-legacy { margin: 42px 0 6px; font-size: 1.15rem; color: var(--sp-ink); padding-top: 22px; border-top: 1px solid var(--sp-line); }
.legal-page .sec-legacy-note { margin: 0 0 8px; max-width: 70ch; color: #4b6573; font-size: 14px; line-height: 1.6; }
@media (max-width: 560px) { .legal-page .sol-check { flex-direction: column; } .legal-page .sol-check button { padding: 11px; } }