/* ══════════════════════════════════════════════════════════════════════
   闪念(星系页 + 写闪念 + 全部闪念时间轴)
   2026-10-09 新增。整块是「深空夜色」风格 —— 它本来就是看星星的地方,
   所以刻意不跟浅色主题走(其余页面保持原样,不受影响)。
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- ① 星系页容器(铺满视口,底部导航浮在上面) ---------- */
#tab-thought{
  position:fixed;inset:0;left:0;right:0;margin:0 auto;max-width:480px;
  background:#03070b;overflow:hidden;z-index:1;
  touch-action:none;                 /* 拖拽转星系,不要让页面跟着滚 */
  -webkit-tap-highlight-color:transparent;
}
.gx-root{position:absolute;inset:0;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#e8f1ff}
.gx-layer{position:absolute;inset:0;overflow:hidden;transform-origin:50% 52%;cursor:grab}
.gx-layer:active{cursor:grabbing}
.gx-canvas{display:block;width:100%;height:100%}
.gx-fallback{position:absolute;inset:0;overflow:hidden}
.gx-dust{position:absolute;inset:-20%;
  background:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 12%, #cfe0ff, transparent 60%),
    radial-gradient(1.6px 1.6px at 34% 68%, #fff, transparent 60%),
    radial-gradient(1.1px 1.1px at 62% 82%, #b7c8ff, transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 62%, #fff, transparent 60%),
    radial-gradient(1px 1px at 48% 34%, #e8f1ff, transparent 60%),
    radial-gradient(1px 1px at 24% 88%, #fff, transparent 60%),
    radial-gradient(1px 1px at 72% 44%, #fff, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(120,150,255,.16), transparent 62%);
  animation:gxDust 26s linear infinite}
@keyframes gxDust{from{transform:rotate(0) scale(1.02)}to{transform:rotate(360deg) scale(1.02)}}

/* ---------- ② 顶部:查看全部 ---------- */
.gx-tools{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:6;display:flex;gap:10px}
.gx-all{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 12px;
  border:1px solid rgba(120,160,230,.3);border-radius:13px;
  background:rgba(10,18,34,.56);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#dbe7ff;font-size:13px;font-weight:600;letter-spacing:.3px;cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s}
.gx-all svg{width:15px;height:15px;opacity:.85}
.gx-all:active{background:rgba(38,64,120,.8);border-color:rgba(150,186,255,.7);transform:scale(.96)}

/* ---------- ③ 顶部引导语(第一次进来知道这是啥) ---------- */
.gx-hint{position:absolute;left:0;right:0;top:calc(62px + env(safe-area-inset-top));z-index:5;
  text-align:center;pointer-events:none;transition:opacity .6s ease}
.gx-hint b{display:block;font-size:15px;font-weight:700;letter-spacing:6px;
  color:rgba(232,241,255,.92);text-shadow:0 2px 14px rgba(90,140,255,.5)}
.gx-hint span{display:block;margin-top:5px;font-size:11.5px;letter-spacing:.6px;color:rgba(160,186,228,.72)}
.gx-hint.gone{opacity:0}

/* ---------- ④ 右下:＋ 写闪念 ---------- */
/* ★ 底部导航高 86px(h5.css:255) → bottom 必须抬到它上面,否则按钮被 tabbar 压住看不见
   (踩过: bottom:24px 时按钮正好藏在导航栏底下, 测试只量坐标所以没报错)
   ★ 2026-10-10:底部栏高度改成变量(--tabbar-h / --tabbar-gap,见 tabbar.css) ——
     悬浮胶囊态底部栏只有 66+12=78px,写死 104px 会让这个按钮飘在半空。
     默认态 86+0+18=104px,和以前一模一样。 */
.gx-plus{
  position:absolute;right:18px;
  bottom:calc(var(--tabbar-h,86px) + var(--tabbar-gap,0px) + 18px + env(safe-area-inset-bottom));
  z-index:7;
  width:58px;height:58px;border-radius:50%;border:1px solid rgba(150,186,255,.42);
  background:linear-gradient(140deg,rgba(74,125,255,.92),rgba(139,92,246,.92));
  color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 30px rgba(74,125,255,.45),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.gx-plus svg{width:24px;height:24px}
.gx-plus:active{transform:scale(.9)}
.gx-plus-ring{position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(150,186,255,.34);animation:gxRing 2.6s ease-out infinite}
@keyframes gxRing{0%{transform:scale(.86);opacity:.85}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}

/* ---------- ⑤ 白点 + 落点涟漪 ---------- */
.gx-dot{position:fixed;left:0;top:0;width:8px;height:8px;border-radius:50%;z-index:8;
  background:#fff;pointer-events:none;will-change:transform,opacity;
  box-shadow:0 0 10px 3px rgba(210,228,255,.95),0 0 26px 9px rgba(110,155,255,.55)}
.gx-ripple{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;z-index:8;
  border:1.5px solid rgba(190,216,255,.9);pointer-events:none;
  animation:gxRipple .78s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes gxRipple{
  0%{transform:scale(.5);opacity:.95;box-shadow:0 0 14px rgba(150,190,255,.7)}
  100%{transform:scale(9);opacity:0}}

/* ══════════════════════════════════════════════════════════
   ⑥ 写闪念(底部弹层) —— 2026-10-09 按负责人设计稿整块重做
   设计稿:①顶部居中「轨道标 + 思维星河 / 让灵感自由生长」
           ②下面一张卡片:标题「记录此刻的想法……」+ 说明「突然想到什么，就把它记下来」
           ③输入框占位「写下你的闪念，不用整理好再记录」
           ④底部左「记录后自动保存日期与时间」, 右胶囊按钮「+ 记录闪念」(空的时候是灰的)
   ══════════════════════════════════════════════════════════ */
/* ★ 关闭态必须同时 pointer-events:none + visibility:hidden。
   只写 opacity:0 的话, 这层全屏 fixed 遮罩照样参与命中测试 → 真机上整页按钮全点不动
   (踩过: 测试用 el.click() 直调 DOM 所以一直 PASS, 掩盖了这个 bug)。 */
.tx-mask{position:fixed;inset:0;z-index:30;background:rgba(3,7,11,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;
  pointer-events:none;visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;left:0;right:0;margin:0 auto;max-width:480px}
.tx-mask.on{opacity:1;pointer-events:auto;visibility:visible}
.tx-sheet{position:absolute;left:0;right:0;bottom:0;
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;border:1px solid rgba(120,160,230,.22);border-bottom:none;
  background:linear-gradient(180deg,rgba(16,24,44,.97),rgba(8,13,24,.99));
  box-shadow:0 -14px 44px rgba(0,0,0,.5);
  max-height:calc(100vh - var(--kb,0px));overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(102%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.tx-mask.on .tx-sheet{transform:translateY(0)}

/* ---------- ★★ 键盘顶起(2026-10-09 修负责人反馈的 bug) ----------
   病象:在闪念输入框里打字时, 弹层"有时候会往下滑、滑到键盘下面一点, 再点一次才弹上来"。
   病根:`.tx-mask` 是 position:fixed;inset:0, 它的定位基准是**布局视口**。iOS 弹键盘时
        布局视口不缩短, 只有视觉视口(vv)变矮 —— 于是弹层还钉在布局视口底边,
        而那截底边正好被键盘盖住。系统把整页往上推(vv.offsetTop>0)时侥幸看得见,
        vv.offsetTop 归零时就整块沉到键盘下面, 这就是"有时候"的由来。
   正解:用 h5.js 已经实测好的 `--kb`(= 布局视口底边到视觉视口底边的距离)把弹层抬起来。
        · iOS 键盘态②(vvOT=0, vvH 变矮)      → --kb=键盘高        → 正好抬到键盘上沿
        · iOS 键盘态①(系统把整页上推 vvOT>0)→ --kb=0             → 本来就看得见, 不重复抬
        · iOS 打字时系统为了露出光标平移可视区 → --kb 自动跟着变小 → 不会越抬越高
        · 安卓(布局视口被顶小)                → --kb=0, 遮罩跟着缩 → 天然就在键盘上方
   ⚠ 不能再走 transform:`.tx-sheet` 的 transform 被"滑入动画"占着(translateY 102%→0),
     再叠一个 transform 会跟动画打架。必须用 bottom。
   ⚠ 也别用给 `.tx-mask` 加 padding-bottom 的写法(那是给 flex 布局的 .hw-mask 用的):
     绝对定位子元素的包含块是"padding 盒", padding 撑出来那截照样算在里面, bottom:0 不会上移。
   ⚠ max-height 同理:键盘态①算出来偏大不要紧(弹层本身只有 ~330px 高),
     真正会撑爆的是键盘态②, 那里 100vh-var(--kb) 正好等于可视区高。 */
.tx-mask.on .tx-sheet{bottom:var(--kb,0px)}
/* 键盘把底部 home 指示条那一截盖住了, 不用再留安全区留白 */
body.kb-open .tx-sheet{padding-bottom:16px}

/* ---------- 顶部品牌区(居中) ---------- */
.tx-brand{display:flex;flex-direction:column;align-items:center;padding:2px 0 14px}
.tx-brand-ic{width:30px;height:30px;color:#a6b6f2;margin-bottom:9px;
  filter:drop-shadow(0 0 10px rgba(140,170,255,.45))}
.tx-brand-ic svg{width:100%;height:100%;display:block}
.tx-brand b{font-size:15.5px;font-weight:800;color:#eef3ff;letter-spacing:2px;padding-left:2px}
.tx-brand em{font-style:normal;margin-top:5px;font-size:11.5px;letter-spacing:.5px;
  color:rgba(158,180,222,.72)}

/* ---------- 卡片 ---------- */
.tx-card{padding:14px 14px 13px;border-radius:18px;
  border:1px solid rgba(120,160,230,.16);
  background:linear-gradient(165deg,rgba(32,44,78,.55),rgba(14,21,38,.6));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tx-card-hd b{display:block;font-size:15px;font-weight:700;color:#eaf1ff;letter-spacing:.4px}
.tx-card-hd span{display:block;margin-top:5px;font-size:12px;line-height:1.5;
  color:rgba(158,180,222,.68)}

/* 关闭按钮:设计稿里没有, 但真机上"点暗处关掉"没人知道 → 留一颗很轻的 ✕ 在右上角 */
.tx-x{position:absolute;top:12px;right:12px;z-index:2;
  width:30px;height:30px;border-radius:10px;border:1px solid rgba(120,160,230,.16);
  background:rgba(255,255,255,.035);color:rgba(168,190,228,.78);font-size:13px;line-height:1;
  display:grid;place-items:center;cursor:pointer}
.tx-x:active{background:rgba(255,255,255,.12)}

.tx-ta{width:100%;box-sizing:border-box;min-height:96px;max-height:34vh;resize:none;
  margin-top:11px;padding:12px 13px;border-radius:14px;
  border:1px solid rgba(120,160,230,.24);
  background:rgba(255,255,255,.04);color:#eaf1ff;font-size:14.5px;line-height:1.75;
  font-family:inherit;outline:none;transition:border-color .18s,background .18s}
.tx-ta::placeholder{color:rgba(150,176,214,.55)}
.tx-ta:focus{border-color:rgba(150,186,255,.6);background:rgba(255,255,255,.07)}

.tx-ft{display:flex;align-items:center;gap:12px;margin-top:12px}
/* 这一格两种文案:空的时候是设计稿的提示语, 一开始打字就换成字数(200 字上限还得让人看见) */
.tx-count{font-size:11.5px;line-height:1.4;color:rgba(150,176,214,.62);
  font-variant-numeric:tabular-nums}
.tx-count.warn{color:#ffb066}

.tx-send{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 16px;border-radius:999px;border:1px solid rgba(140,170,255,.24);
  background:linear-gradient(135deg,#6b7cf0,#8f66f2);color:#fff;
  font-size:13.5px;font-weight:700;letter-spacing:.5px;white-space:nowrap;cursor:pointer;
  box-shadow:0 8px 20px rgba(91,141,239,.35);
  transition:transform .18s,opacity .18s,background .18s,color .18s,box-shadow .18s}
.tx-send-ic{width:14px;height:14px;flex:0 0 auto}
.tx-send:active{transform:scale(.96)}
/* 空输入:设计稿里这颗按钮就是"灰的"。
   ⚠ 刻意不用 :disabled —— 点下去还有 h5Toast 提示「写点什么再记下来吧」, 用 disabled 就没反馈了 */
.tx-send.is-off{background:rgba(255,255,255,.06);color:rgba(158,180,222,.5);
  border-color:rgba(120,160,230,.14);box-shadow:none}
.tx-send.is-busy{opacity:.6;pointer-events:none}
.tx-send[disabled]{opacity:.6;box-shadow:none}

/* ══════════════════════════════════════════════════════════
   ⑦ 全部闪念(时间轴)
   ══════════════════════════════════════════════════════════ */
.tx-tl{position:fixed;inset:0;left:0;right:0;margin:0 auto;max-width:480px;z-index:40;
  background:radial-gradient(120% 60% at 50% 0%,#0d1730 0%,#05080f 62%,#03070b 100%);
  display:flex;flex-direction:column;visibility:hidden;
  transform:translateY(100%);transition:transform .32s cubic-bezier(.22,1,.36,1),visibility .32s}
.tx-tl.on{transform:translateY(0);visibility:visible}
.tx-tl-hd{flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 12px;
  border-bottom:1px solid rgba(120,160,230,.14)}
.tx-tl-hd .bk{width:36px;height:36px;border-radius:12px;border:1px solid rgba(120,160,230,.26);
  background:rgba(255,255,255,.05);color:#cfdff8;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.tx-tl-hd .bk svg{width:17px;height:17px}
.tx-tl-hd .bk:active{background:rgba(255,255,255,.13)}
.tx-tl-hd b{font-size:16px;font-weight:700;color:#eaf1ff;letter-spacing:.5px}
.tx-tl-hd .n{margin-left:auto;font-size:11.5px;color:rgba(150,176,214,.7);
  border:1px solid rgba(120,160,230,.22);border-radius:999px;padding:3px 10px;white-space:nowrap}
.tx-tl-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 16px calc(26px + env(safe-area-inset-bottom))}

/* 时间轴:一条竖线 + 每天一个节点 */
.tx-day{position:relative;padding-left:30px}
.tx-day:before{content:"";position:absolute;left:8px;top:6px;bottom:-2px;width:1.5px;
  background:linear-gradient(180deg,rgba(122,167,255,.55),rgba(122,167,255,.12))}
.tx-day:last-child:before{bottom:auto;height:22px}
.tx-node{position:absolute;left:0;top:4px;width:17px;height:17px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(10,18,34,.9);border:1.5px solid rgba(139,167,255,.6);
  box-shadow:0 0 12px rgba(110,155,255,.5);transition:transform .2s,border-color .2s}
.tx-node i{width:6px;height:6px;border-radius:50%;background:#9dc0ff;
  box-shadow:0 0 8px 2px rgba(157,192,255,.85)}
.tx-day.open .tx-node{border-color:rgba(190,216,255,.95);transform:scale(1.1)}
.tx-day.open .tx-node i{background:#fff;box-shadow:0 0 12px 4px rgba(220,236,255,.95)}

.tx-day-hd{display:flex;align-items:center;gap:9px;padding:2px 0 10px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.tx-day-lbl{font-size:15px;font-weight:700;color:#e7efff;letter-spacing:.6px;font-variant-numeric:tabular-nums}
.tx-day-lbl em{font-style:normal;font-size:11.5px;font-weight:600;color:rgba(160,186,228,.72);margin-left:6px}
.tx-day-cnt{font-size:11px;color:rgba(160,186,228,.78);border:1px solid rgba(120,160,230,.24);
  border-radius:999px;padding:1.5px 8px}
.tx-caret{margin-left:auto;color:rgba(160,186,228,.7);font-size:12px;transition:transform .24s ease}
.tx-day.open .tx-caret{transform:rotate(90deg)}

.tx-items{display:none;padding-bottom:20px}
.tx-day.open .tx-items{display:block;animation:txIn .26s ease}
@keyframes txIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.tx-item{position:relative;display:flex;gap:11px;padding:11px 12px;margin-bottom:9px;
  border-radius:15px;border:1px solid rgba(120,160,230,.16);
  background:linear-gradient(150deg,rgba(30,42,74,.62),rgba(14,21,38,.62));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tx-time{flex:0 0 auto;font-size:11.5px;font-weight:700;color:#8fb2f0;
  font-variant-numeric:tabular-nums;padding-top:2px;letter-spacing:.3px}
.tx-text{flex:1;min-width:0;font-size:14.5px;line-height:1.72;color:#e6eefc;
  white-space:pre-wrap;word-break:break-word}
.tx-del{flex:0 0 auto;width:24px;height:24px;border-radius:8px;border:none;
  background:rgba(255,255,255,.05);color:rgba(160,186,228,.6);font-size:13px;line-height:1;
  display:grid;place-items:center;cursor:pointer;align-self:flex-start}
.tx-del:active{background:rgba(255,90,120,.22);color:#ffb3c2}

/* ---------- ⑧ 每条右侧操作:转目标 / 编辑 / 删除 ---------- */
.tx-acts{flex:0 0 auto;display:flex;align-items:center;gap:4px;align-self:flex-start}
.tx-acts button{width:24px;height:24px;border-radius:8px;border:none;
  background:rgba(255,255,255,.05);color:rgba(160,186,228,.72);font-size:13px;line-height:1;
  display:grid;place-items:center;cursor:pointer;transition:background .16s,color .16s}
.tx-acts button:active{transform:scale(.92)}
.tx-to-goal{font-size:13px !important}
.tx-to-goal:active{background:rgba(120,170,255,.3) !important;color:#dbe9ff !important}
.tx-edit:active{background:rgba(255,255,255,.18) !important;color:#eaf1ff !important}
/* 已经转成目标了:给个安静的标记,不再可点 */
.tx-goaled{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  font-size:12px;background:rgba(120,170,255,.18);opacity:.9}
.tx-empty-2{margin-top:2px}

/* ---------- ⑨ 全部闪念:搜索 ---------- */
.tx-tl-search{flex:0 0 auto;padding:0 16px 10px}
.tx-q{width:100%;box-sizing:border-box;border:1px solid rgba(120,160,230,.22);
  border-radius:13px;padding:10px 14px;font-size:13.5px;
  background:rgba(255,255,255,.05);color:#e6eefc;font-family:inherit;outline:none;
  transition:border-color .18s,background .18s}
.tx-q::placeholder{color:rgba(150,176,214,.55)}
.tx-q:focus{border-color:rgba(150,186,255,.55);background:rgba(255,255,255,.09)}
.tx-q::-webkit-search-cancel-button{-webkit-appearance:none}

.tx-empty{text-align:center;padding:56px 20px;color:rgba(150,176,214,.7);font-size:13.5px;line-height:2}
.tx-empty .big{font-size:34px;display:block;margin-bottom:10px;opacity:.85}

/* 手机窄屏微调 */
@media (max-width:360px){
  .tx-tl-hd b{font-size:15px}
  .tx-text{font-size:14px}
  .gx-hint b{letter-spacing:4px}
  /* 写闪念弹层:窄屏上(360px 及以下)压缩一下, 免得弹层顶到键盘之外 */
  .tx-brand{padding-bottom:11px}
  .tx-brand b{font-size:15px;letter-spacing:1px;padding-left:1px}
  .tx-ta{min-height:84px;font-size:14px}
  .tx-send{height:34px;padding:0 13px;font-size:13px;gap:5px}
  .tx-count{font-size:11px}
}

/* ---------- ⑩ 星系库按需加载时的等待态 ----------
   three.min.js(594KB)+galaxy.js 已从 index.html 挪走,改成第一次进「闪念」时才下。
   下载这 1~2 秒里这块顶在页面上,别让主播对着黑屏发愣。 */
.tx-lib{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(120% 80% at 50% 20%,#0b1a2e 0%,#03070b 70%);z-index:5}
.tx-lib-spin{width:34px;height:34px;border-radius:50%;
  border:2.5px solid rgba(140,180,255,.22);border-top-color:#8fb6ff;
  animation:txLibSpin .85s linear infinite}
.tx-lib-spin.err{border:none;display:grid;place-items:center;font-size:22px;
  font-weight:700;color:#ffb4b4;animation:none}
@keyframes txLibSpin{to{transform:rotate(360deg)}}
.tx-lib-t{font-size:14.5px;font-weight:600;color:#dbe9ff;letter-spacing:.5px}
.tx-lib-s{font-size:12px;color:rgba(160,186,228,.72)}
.tx-lib-btn{margin-top:4px;border:1px solid rgba(140,180,255,.4);border-radius:14px;
  padding:9px 22px;font-size:13.5px;font-weight:600;color:#dbe9ff;
  background:rgba(140,180,255,.14);font-family:inherit;cursor:pointer}
.tx-lib-btn:active{transform:scale(.96);background:rgba(140,180,255,.26)}

/* ══════════════════════════════════════════════════════════
   ⑪ 顶部轻提示(一行小字)  —— 2026-10-09
   负责人反馈:发完闪念弹出来的那个白卡片(全屏遮罩 + 「好的」按钮)把白点飞入的效果挡住了,
   而且还得手动点一下。改成**顶部一行小字**:自己淡入 → 停 2 秒 → 自己淡淡消失,全程不挡操作。
   ── 配色(负责人要求:暗色系、不要紫/粉、字要白、背景框让我想) ──
     底色 = **近黑墨蓝玻璃**(不是紫、也不是粉),字 = 近白 #eef6ff,再加淡淡一层文字投影
     (星星很亮的地方也压得住)。唯一一点彩色只用在最左边那条 3px 光条上:
     **青绿色(teal #67e8d5→#22c3d6)**,冷色、和星空同族、又跟页面已有的蓝紫拉开区别。
     报错文案换成**琥珀金**光条(warn),一眼能区分"成了"还是"没成"。
     想换主色只改 `.gx-toast i` 那一行的 gradient 即可。
   ── 时长 ──
     淡入 .26s → 停留 2s → 淡出 .52s,合计约 2.8s。负责人问"几秒合适":再短来不及看清,
     再长就挡住看星星了。想调改 thought.js 顶部的 TOAST_HOLD 一个常量。
   ⚠ 关闭态必须 pointer-events:none —— 它是浮在最上层的一行字,绝不能挡住「＋」和「查看全部」
     (老坑:.tx-mask 当初只写 opacity:0 没写这个,真机上整页按钮全点不动)。
   ══════════════════════════════════════════════════════════ */
.gx-toast{
  position:fixed;z-index:25;
  /* 顶部居中:靠 left:0/right:0 + margin auto 居中,这样 transform 可以专心做位移动画 */
  left:0;right:0;margin:0 auto;width:max-content;
  max-width:min(340px,calc(100% - 28px));
  top:calc(58px + env(safe-area-inset-top));   /* 正好落在「查看全部」下面一行,不打架 */
  display:flex;align-items:center;gap:9px;
  padding:10px 14px 10px 13px;border-radius:14px;
  background:linear-gradient(135deg,rgba(13,22,34,.94),rgba(7,12,20,.96));
  border:1px solid rgba(120,190,190,.2);
  box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  color:#eef6ff;font-size:13.5px;font-weight:500;line-height:1.45;letter-spacing:.3px;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .52s cubic-bezier(.22,1,.36,1),transform .52s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.gx-toast.on{opacity:1;transform:none;transition-duration:.26s}
.gx-toast i{flex:0 0 auto;align-self:stretch;width:3px;min-height:17px;border-radius:2px;
  background:linear-gradient(180deg,#67e8d5,#22c3d6);
  box-shadow:0 0 10px rgba(45,212,191,.65)}
.gx-toast span{flex:1;min-width:0}
/* 没成 / 提醒:琥珀金光条 */
.gx-toast.warn{border-color:rgba(240,190,120,.22);color:#fff4e2}
.gx-toast.warn i{background:linear-gradient(180deg,#ffd479,#f5a524);
  box-shadow:0 0 10px rgba(245,180,60,.6)}

/* 手机窄屏:字小一号,别撑成两行 */
@media (max-width:360px){
  .gx-toast{font-size:13px;padding:9px 12px 9px 11px;gap:8px}
}