/* FlowNode 品牌注入样式：由 nginx 注入 <link> 到 sub2api 宿主页。
   与 dev/nginx-real.conf 的注入段配套；参数体积不受 nginx 限制。
   「充值/订阅」页的套餐/卡网内嵌布局走 sub2api 原生（billing:/recharge:
   custom_menu_items + recharge-grid 3:2），这里不再有接管样式。 */
@font-face{font-family:FlowNodeBrand;src:url(data:font/woff2;base64,d09GMgABAAAAAASIAA8AAAAACKwAAAQvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgSQcKAZgP1NUQVQqAGQRCAqFRIRJCxQAATYCJAMkBCAFhDoHIBsYB8gEHvh30z83SS0BysxTM8pEax6YC1DVicK2Z/BMJX2uyFP7U8vfj6u66+nrzhDi1/Kt/BY8WPHihXoJbkZIUinxHrAbVruFngjAhjBcQiCTiih5nEo2C5DqG70bcPT6RvtxoDRx/hVdetqG+0kNuY0KUjdCosQyUMs6akmCU375/zGc+aT179R+aTBUSMIg8DBfk4IC2H4Zny6XXOVExjgx8thOKpNMkkZIYWkL4PHXELtYILLQeK5j6tagH0qHGz30wGvR2Se///HxBDlqMjWEReUl8S3kkmBjoGtlyGBye6Y2Uj7OjpHxWqYAArQiZqB/DI4rbCGRyfOsqN1GllFG70MsA+7yKlar7G+sEzrIeta63LrUuu8gScb3QXCskin5Gk4EXbE/TkZFxnNgoor9lfs+r8nnE5btmqb5piZokx0OH3huEgKJTR7JIYSjKp+e+Q9IYfeVW3ht5GC72wOPylCT2mRcYLmJhG6J2/aLXeI0JNq2ARVhBIJLRJ7BoL3Ppo9+cJLQUuyY8OOTdKStJ1akqaou1TFF47HhQglElrklcdmaLKmqEK9NbopkhAiFFfDUQjGfOF4XIj+JLEH2K6LaZG3Zm289O3oNu3qd9Xw28xSSoMVgtFoD920bdpWbbt99xZ1m7pFD23tbPPn+jvbtnrDExbv1ssGyv8vHyjj2l6KzK6dbf2p55qpmeP/PvjxPzNmXZuV/XOmc9tkl6tmVZbb7ckcL5Tz3v30wIM3BNPTqTUf3b/ottn7Z2dRa/4T9k30H5feDru9rH1FxdBa59qKobYV5SXP7z5vYtJR83D5RK2xZE7fipVGs9rsNcr4r19pkGc3Bisrh1fZVlUMD1QaLT3VZcPeoq6JTVWLFs95rX3xB97NhWbl9yuem7/wARrNoybz7cZYWd3QGueauiFikZE4rmVghcdoVBsNo4w812PQ3/DDkaLLJ1Zd/mrV5RMJ05GGH96JVV1+TXziyh56qnPlrt3p5b+lyvL3RdWPrsy8zL/irIB11/8fK3GlH0Hy9eYdxIPZdxLWXf+5lfg1fZ00+Wx28z9IU6mVrqZWOopLqsElVBqlVlyyk3yqexo7SMX/GUwyQJ4mo3L0IXmVi557nj9ji2Amn7LvxB8nLTKLuL6gkN3NksRMWi3JZFJrdrAEm098koICZbijNtNGFx10MmoPHmWQEVZQyh00QoBhuhhklPa4VEI+Ry8uBhimg1JW04iX9QziI0AbTQwzwCj3lBF6KKGWAXppZRNtDHc8aoB+dBbgwm1OUJbSebU+Abi1ZTTioWwyJz3DoT11HA5yYG1i5QwTuO1mnQ10wmeMDdakpd0Q6Ig1jO0f2xnPCL10/l5iB121ncfw4yJAN/dRSvunyDB4fBT24OvKpoD+/XdO7imhJ5FQ8NVScTXrShZgAAA=) format(woff2);font-weight:700;font-display:swap}
.sidebar-brand-title{display:inline-block!important;
  font-family:FlowNodeBrand,system-ui,sans-serif!important;
  font-weight:700!important;font-size:17.5px!important;letter-spacing:-.015em!important;
  background:linear-gradient(92deg,#4C7BD9,#6D97E8 30%,#8FB3F2 48.5%,#111827 48.5%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
html.dark .sidebar-brand-title,[data-theme=dark] .sidebar-brand-title{
  background:linear-gradient(92deg,#5F8DE5,#84A9EE 30%,#A8C4F6 48.5%,#EDF2FB 48.5%);
  -webkit-background-clip:text;background-clip:text}
.sidebar-brand{display:flex!important;align-items:center;gap:8px;max-width:14rem!important}
.sidebar-brand>.relative{flex:none}

/* billing:/recharge: 前缀项只是「充值/订阅」页的内嵌配置——不进侧边栏 */
a[href^="/custom/billing"],a[href^="/custom/recharge"]{display:none!important}

/* ── 生产接管：/subscriptions → 充值 | 订阅 合并页 ─────────── */
#fn-billing{display:flex;flex-direction:column;gap:20px}
.fn-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fn-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:.625rem;background:rgb(148 163 184 / .14)}
html.dark .fn-tabs{background:rgb(15 23 42 / .6)}
.fn-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:0;
  border-radius:calc(.625rem - 3px);background:none;color:rgb(100 116 139);
  font-size:13.5px;font-weight:500;white-space:nowrap;cursor:pointer;font-family:inherit;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.fn-tab:hover:not(.fn-tab-active){color:rgb(51 65 85)}
html.dark .fn-tab{color:rgb(148 163 184)}
html.dark .fn-tab:hover:not(.fn-tab-active){color:rgb(226 232 240)}
.fn-tab-active{background:#fff;color:#4C7BD9;box-shadow:0 1px 2px rgb(15 23 42 / .1)}
html.dark .fn-tab-active{background:rgb(30 41 59);color:#84A9EE}
.fn-subtabs{display:inline-flex;gap:4px;margin-left:2px;padding:4px;border-radius:.625rem;background:rgb(148 163 184 / .12)}
html.dark .fn-subtabs{background:rgb(15 23 42 / .5)}
.fn-subtab{border:0;cursor:pointer;background:none;color:rgb(100 116 139);font-size:12.5px;
  padding:5px 12px;border-radius:.45rem;font-family:inherit;
  transition:background-color .15s,color .15s}
.fn-subtab:hover:not(.fn-subtab-active){color:rgb(51 65 85);background:rgb(148 163 184 / .18)}
html.dark .fn-subtab{color:rgb(148 163 184)}
html.dark .fn-subtab:hover:not(.fn-subtab-active){color:rgb(226 232 240)}
.fn-subtab-active{background:rgb(76 123 217 / .14);color:#4C7BD9}
html.dark .fn-subtab-active{color:#84A9EE}
#fn-panel-recharge{display:grid;grid-template-columns:3fr 2fr;gap:18px;align-items:start}
.fn-shop-card{grid-column:1;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgb(226 232 240);border-radius:.875rem;background:#fff;
  box-shadow:0 1px 2px rgb(15 23 42 / .06)}
html.dark .fn-shop-card{border-color:rgb(51 65 85);background:rgb(15 23 42)}
.fn-shop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;border-bottom:1px solid rgb(226 232 240)}
html.dark .fn-shop-head{border-color:rgb(51 65 85)}
.fn-shop-title{font-size:14px;font-weight:600;color:rgb(15 23 42)}
html.dark .fn-shop-title{color:rgb(241 245 249)}
.fn-shop-hint{margin-top:2px;font-size:12px;color:rgb(100 116 139)}
.fn-shop-open{display:inline-flex;flex:none;align-items:center;gap:5px;padding:6px 12px;
  border-radius:999px;background:rgb(76 123 217 / .12);color:#4C7BD9;font-size:12.5px;
  font-weight:500;text-decoration:none;transition:background-color .18s ease}
.fn-shop-open:hover{background:rgb(76 123 217 / .2)}
html.dark .fn-shop-open{color:#84A9EE}
#fn-shop-frame{display:block;width:100%;height:calc(100vh - 15rem);min-height:30rem;border:0;background:#fff}
#fn-redeem-frame{grid-column:2;width:100%;height:calc(100vh - 12rem);min-height:32rem;border:0;
  border-radius:.875rem;background:transparent}
#fn-panel-sub{display:block}
#fn-sub-frame{width:100%;border:0;display:block;min-height:calc(100vh - 12rem)}
@media (max-width:900px){
  #fn-panel-recharge{display:block}
  .fn-shop-card{margin-bottom:16px}
}

/* 条款全文弹层 */
#fn-term-doc{position:fixed;inset:0;z-index:2147482000;background:rgb(15 23 42 / .5);
  display:flex;align-items:center;justify-content:center;padding:20px}
.fn-term-doc-card{width:min(560px,94vw);max-height:78vh;display:flex;flex-direction:column;
  background:#fff;border-radius:14px;box-shadow:0 24px 60px rgb(2 8 20 / .4);overflow:hidden}
html.dark .fn-term-doc-card{background:rgb(15 23 42);border:1px solid rgb(51 65 85)}
.fn-term-doc-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid rgb(226 232 240);font-size:15px;font-weight:600;color:rgb(15 23 42)}
html.dark .fn-term-doc-head{border-color:rgb(51 65 85);color:rgb(241 245 249)}
.fn-term-doc-x{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:rgb(100 116 139);padding:2px 6px}
.fn-term-doc-body{padding:16px 20px 20px;overflow-y:auto;font-size:13px;line-height:1.8;color:rgb(71 85 105)}
html.dark .fn-term-doc-body{color:rgb(180 190 205)}
.fn-term-doc-body p{margin:0 0 8px}

/* 条款未勾齐时的反馈 */
@keyframes fn-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.fn-terms-shake{animation:fn-shake .38s ease}
.fn-term-missing{color:rgb(185 28 28)}
html.dark .fn-term-missing{color:rgb(248 113 113)}
.fn-term-missing input{outline:2px solid rgb(185 28 28 / .6);outline-offset:1px;border-radius:3px}

/* ── 登录条款：四条独立勾选 ─────────────────────────────── */
#fn-terms{display:flex;flex-direction:column;gap:7px;padding:2px}
.fn-terms-head{font-size:12px;color:rgb(107 114 128);margin-bottom:2px}
html.dark .fn-terms-head{color:rgb(148 163 184)}
.fn-term{display:flex;align-items:flex-start;gap:8px;cursor:pointer;font-size:13px;line-height:1.45;color:rgb(75 85 99)}
html.dark .fn-term{color:rgb(203 213 225)}
.fn-term input{margin-top:2px;width:15px;height:15px;flex:none;accent-color:#4C7BD9;cursor:pointer}
.fn-term a{color:#4C7BD9;text-decoration:none}
.fn-term a:hover{text-decoration:underline}
html.dark .fn-term a{color:#84A9EE}

/* 实拍天空欢迎页；所有选择器限定在欢迎层，避免污染控制台。 */
html.fn-splash-open, html.fn-splash-open body { overflow: hidden !important; }
#fn-splash {
  --fn-ink: #172a36;
  position: fixed; inset: 0; z-index: 2147483000;
  overflow: hidden; min-height: 320px; color: var(--fn-ink);
  background: #b7d6ed; isolation: isolate;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.65,.25,1);
}
#fn-splash, #fn-splash * { box-sizing: border-box; }
#fn-splash button, #fn-splash a { -webkit-tap-highlight-color: transparent; }
#fn-splash button { font: inherit; cursor: pointer; }
#fn-splash a { color: inherit; text-decoration: none; }
#fn-splash button:focus-visible, #fn-splash a:focus-visible { outline: 2px solid #172a36; outline-offset: 6px; }
#fn-splash.fn-splash-out { opacity: 0; transform: scale(1.025); pointer-events: none; }
#fn-splash .fn-cloud-scene {
  position: absolute; inset: 0; z-index: -3;
  background: #b7d6ed url('/assets/fn-clouds-poster-20260911-color.webp') center center / cover no-repeat;
}
#fn-splash .fn-cloud-video { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1s ease; }
#fn-splash.fn-cloud-video-ready .fn-cloud-video { opacity: 1; }
#fn-splash .fn-cloud-wash {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg,rgba(244,250,255,.12),rgba(244,250,255,.08) 45%,rgba(244,250,255,.03) 75%,rgba(244,250,255,.1));
}
#fn-splash .fn-cloud-wash::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 5% 8%,rgba(255,220,155,.26),transparent 52%),
    radial-gradient(ellipse at 96% 58%,rgba(210,165,255,.17),transparent 55%),
    radial-gradient(ellipse at 8% 92%,rgba(125,246,245,.18),transparent 52%);
}
#fn-splash .fn-cloud-nav {
  position: absolute; inset: max(32px,env(safe-area-inset-top)) 44px auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
#fn-splash .fn-cloud-wordmark { display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 600; letter-spacing: -.8px; }
#fn-splash .fn-cloud-wordmark svg { width: 34px; height: 26px; }
#fn-splash .fn-cloud-nav nav { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 500; }
#fn-splash .fn-cloud-nav a { padding: 12px 0; }
#fn-splash .fn-cloud-nav a span { margin-left: 5px; }
#fn-splash .fn-cloud-login { background: rgba(247,251,253,.32); border: 1px solid rgba(23,42,54,.25); border-radius: 100px; padding: 10px 18px; color: inherit; }
#fn-splash .fn-cloud-login span { margin-left: 12px; }
#fn-splash .fn-cloud-content {
  position: absolute; left: 0; top: 45%; width: 100%; transform: translateY(-50%);
  padding: 40px 24px; text-align: center;
  animation: fn-cloud-arrive 1.2s cubic-bezier(.16,1,.3,1) both;
}
#fn-splash .fn-cloud-eyebrow { margin: 0 0 23px; font-size: 13px; font-weight: 450; letter-spacing: .26em; padding-left: .26em; }
#fn-splash h1 { margin: 0; font-size: clamp(76px,8.5vw,132px); line-height: 1.03; font-weight: 550; letter-spacing: -.075em; }
#fn-splash .fn-cloud-period { margin-left: .025em; }
#fn-splash .fn-cloud-tagline { font-size: clamp(24px,2.35vw,36px); line-height: 1.5; margin: 23px 0 0; font-weight: 400; letter-spacing: .02em; }
#fn-splash #fn-cloud-description { font-size: 14px; line-height: 1.7; margin: 12px 0 0; color: #364f60; letter-spacing: .08em; }
#fn-splash .fn-cloud-actions { display: flex; flex-direction: column; align-items: center; gap: 19px; margin-top: 32px; }
#fn-splash .fn-cloud-start { display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 16px 25px; border-radius: 100px; border: 1px solid #172a36; background: #172a36; color: #fff; font-size: 14px; line-height: 20px; transition: transform .25s,background .25s,box-shadow .25s; }
#fn-splash .fn-cloud-start svg { width: 19px; height: 19px; transition: transform .25s; }
#fn-splash .fn-cloud-register { font-size: 12px; padding: 4px 6px; }
#fn-splash .fn-cloud-register span { margin-left: 5px; }
#fn-splash .fn-cloud-footer { position: absolute; inset: auto 44px max(27px,env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
#fn-splash .fn-cloud-footer p { margin: 0; font-size: 12px; font-weight: 450; letter-spacing: .04em; }
#fn-splash .fn-cloud-footer p span { margin: 0 10px; }
#fn-splash .fn-cloud-motion { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(23,42,54,.28); border-radius: 50%; color: inherit; background: rgba(248,252,255,.28); }
#fn-splash .fn-cloud-motion svg { width: 16px; height: 16px; }
#fn-splash .fn-cloud-motion .fn-cloud-play, #fn-splash .fn-cloud-motion.is-paused .fn-cloud-pause { display: none; }
#fn-splash .fn-cloud-motion.is-paused .fn-cloud-play { display: block; }
@keyframes fn-cloud-arrive { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@media (hover:hover) {
  #fn-splash .fn-cloud-start:hover { transform: translateY(-2px); background: #263e4d; box-shadow: 0 8px 24px rgba(30,59,82,.15); }
  #fn-splash .fn-cloud-start:hover svg { transform: translateX(3px); }
  #fn-splash .fn-cloud-register:hover, #fn-splash .fn-cloud-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
  #fn-splash .fn-cloud-login:hover, #fn-splash .fn-cloud-motion:hover { background: rgba(255,255,255,.6); }
}
@media (max-width:640px) {
  #fn-splash .fn-cloud-nav { inset: max(24px,env(safe-area-inset-top)) 22px auto; gap: 12px; }
  #fn-splash .fn-cloud-wordmark { font-size: 18px; gap: 8px; }
  #fn-splash .fn-cloud-wordmark svg { width: 27px; }
  #fn-splash .fn-cloud-nav nav { gap: 18px; font-size: 12px; }
  #fn-splash .fn-cloud-login { padding: 9px 13px; }
  #fn-splash .fn-cloud-login span { display: none; }
  #fn-splash .fn-cloud-content { top: 46%; padding: 24px 18px; }
  #fn-splash h1 { font-size: clamp(62px,16.5vw,106px); }
  #fn-splash .fn-cloud-eyebrow { font-size: 11px; margin-bottom: 26px; }
  #fn-splash .fn-cloud-tagline { font-size: clamp(20px,5.6vw,28px); margin-top: 24px; }
  #fn-splash #fn-cloud-description { font-size: 12px; margin-top: 13px; }
  #fn-splash .fn-cloud-actions { margin-top: 32px; gap: 20px; }
  #fn-splash .fn-cloud-start { padding: 15px 25px; }
  #fn-splash .fn-cloud-footer { left: 22px; right: 22px; bottom: max(22px,env(safe-area-inset-bottom)); }
  #fn-splash .fn-cloud-footer p { font-size: 10px; }
  #fn-splash .fn-cloud-footer p span { margin: 0 6px; }
  #fn-splash .fn-cloud-wash { background: linear-gradient(180deg,rgba(244,250,255,.14),rgba(244,250,255,.1) 60%,rgba(244,250,255,.04)); }
}
@media (max-height:620px) and (min-width:641px), (max-height:650px) and (max-width:640px) {
  #fn-splash .fn-cloud-nav { top: 20px; }
  #fn-splash .fn-cloud-content { top: 49%; padding-top: 15px; padding-bottom: 15px; }
  #fn-splash h1 { font-size: clamp(55px,8vw,90px); }
  #fn-splash .fn-cloud-eyebrow { margin-bottom: 12px; font-size: 10px; }
  #fn-splash .fn-cloud-tagline { margin-top: 12px; font-size: 22px; }
  #fn-splash #fn-cloud-description { margin-top: 6px; }
  #fn-splash .fn-cloud-actions { margin-top: 20px; gap: 10px; }
  #fn-splash .fn-cloud-start { padding: 11px 23px; }
  #fn-splash .fn-cloud-footer { bottom: 17px; }
}
@media (max-height:440px) {
  #fn-splash .fn-cloud-content { top: 54%; }
  #fn-splash .fn-cloud-eyebrow, #fn-splash #fn-cloud-description, #fn-splash .fn-cloud-register { display: none; }
  #fn-splash h1 { font-size: 55px; }
  #fn-splash .fn-cloud-tagline { font-size: 19px; margin-top: 10px; }
  #fn-splash .fn-cloud-actions { margin-top: 14px; }
}
@media (prefers-reduced-motion:reduce) {
  #fn-splash, #fn-splash * { animation: none !important; transition: none !important; }
}

/* 登录 / 注册与欢迎页统一为同一套「天空玻璃」视觉。宿主路由仍负责
   表单校验和协议逻辑，这里只调整外壳，避免切页时突然回到旧网格背景。 */
#app > div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 {
  position: relative; isolation: isolate; min-height: 100dvh;
  padding: clamp(28px, 6vh, 72px) 16px !important;
  align-items: flex-start !important;
  background: #d9eaf5 !important;
}
#app > div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(135deg, rgba(248,252,255,.38), rgba(225,244,255,.18) 55%, rgba(228,238,255,.24)),
    url('/assets/fn-clouds-poster-20260911-color.webp') center / cover no-repeat;
  transform: scale(1.02);
}
#app > div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 5% 8%,rgba(255,220,155,.26),transparent 52%),
    radial-gradient(ellipse at 96% 58%,rgba(210,165,255,.17),transparent 55%),
    radial-gradient(ellipse at 8% 92%,rgba(125,246,245,.18),transparent 52%);
}
#app > div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 > .absolute { display: none !important; }
#app > div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 > .relative.z-10 {
  width: min(100%, 430px) !important; max-width: 430px !important; z-index: 1;
}
#app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .card-glass {
  border: 1px solid rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 24px 70px rgba(53,91,116,.16), 0 2px 10px rgba(255,255,255,.28) inset !important;
  backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
#app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .text-gradient {
  background: linear-gradient(95deg,#24455d,#4c81a6 55%,#28455b) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}
#app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .input { border-color: rgba(127,159,180,.34) !important; background: rgba(247,251,253,.76) !important; }
#app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .input:focus { border-color: #5188ae !important; --tw-ring-color: rgba(81,136,174,.22) !important; }
#app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .btn-primary { background: #1e3d51 !important; background-image: none !important; box-shadow: 0 8px 20px rgba(30,61,81,.2) !important; }
#app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .btn-primary:hover { background: #294f66 !important; }
#app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .input-label, #app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .card-glass h2 { color: #20394a !important; }
#app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .card-glass p, #app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .card-glass label { color: #536b7b !important; }
#app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) a { color: #3b7095; }
#app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .mb-8.text-center img { box-shadow: 0 10px 24px rgba(51,111,160,.2) !important; }
html.dark #app > div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 { background: #102b3a !important; }
html.dark #app > div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::before { filter: brightness(.86); }
html.dark #app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .card-glass { border-color: rgba(178,216,235,.15) !important; background: rgba(12,35,49,.7) !important; }
html.dark #app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .input { background: rgba(19,47,63,.8) !important; border-color: rgba(161,199,217,.22) !important; color: #e8f3f8 !important; }
html.dark #app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .text-gradient { background: linear-gradient(95deg,#b8d8ea,#74afd1 55%,#d5ebf5) !important; -webkit-background-clip: text !important; background-clip: text !important; }
html.dark #app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .input-label, html.dark #app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .card-glass h2 { color: #e2f0f6 !important; }
html.dark #app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .card-glass p, html.dark #app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .card-glass label { color: #a9c2cf !important; }
html.dark #app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) a { color: #8fc4df; }
@media (max-width: 640px) {
  #app > div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 { padding: 22px 14px 34px !important; }
  #app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .card-glass { padding: 22px !important; border-radius: 22px !important; }
  #app > :where(div.relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4) .mb-8.text-center { margin-bottom: 22px !important; }
}


/* ── 手机端适配（桌面样式一律不受影响）───────────────────── */
/* 小屏视口修正（桌面 ≥1024px 不受影响）：
   1. 宿主 body(2,6,23) 与 app-shell(7,12,22) 是两种深色，真机动态地址栏
      伸缩时 100vh 的 shell 罩不满可视区，底部露出色差=「没铺满窗口」——
      html/body 统一成 canvas 色，shell 改用动态视口高度
   2. 个别页面（如邀请返利）有布局横向溢出，一律裁掉防横滑 */
@media (max-width:1023.5px){
  html,body{background:rgb(247 249 252)!important;overflow-x:hidden;max-width:100vw}
  html.dark,html.dark body{background:rgb(7 12 22)!important}
  .app-shell{min-height:100dvh!important}
  /* 侧栏底部的「展开/收起」键在抽屉模式下无意义，且会污染桌面端的
     展开偏好——小屏藏掉（中英文 aria 都盖住） */
  aside.sidebar button[aria-label="展开"],
  aside.sidebar button[aria-label="收起"],
  aside.sidebar button[aria-label="Expand"],
  aside.sidebar button[aria-label="Collapse"]{display:none!important}

}

/* 注入组件的触屏目标放大 */
@media (max-width:640px){
  .fn-term{font-size:14px;padding:8px 0;gap:10px;align-items:center}
  .fn-term input{width:18px;height:18px;margin-top:0}
  .fn-terms-head{font-size:13px}
  #fn-terms{gap:2px}
  .fn-tab{padding:10px 18px;font-size:14px}
  .fn-subtab{padding:9px 14px;font-size:13px}
  .fn-shop-open{padding:9px 14px}
  .fn-term-doc-body{font-size:13.5px;line-height:1.85}
}

/* ── 顶栏「使用教程」入口 ───────────────────────────────────
   brand.js 把它插进 .app-header-inner 右侧控件簇的最前面。
   宿主是 Tailwind + 深浅双主题，这里只用自有类名，不覆盖宿主样式。 */
/* 教程按钮：低调的次要入口 */
#fn-docs-entry{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  height:34px;padding:0 12px;border-radius:.625rem;
  background:rgb(76 123 217 / .12);color:#4C7BD9;
  font-size:13px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;
  transition:background-color .18s ease,color .18s ease;
}
#fn-docs-entry:hover{background:rgb(76 123 217 / .2);color:#3A66C0;text-decoration:none}
#fn-docs-entry svg{width:16px;height:16px;flex:none}
html.dark #fn-docs-entry,[data-theme=dark] #fn-docs-entry{background:rgb(95 141 229 / .18);color:#93B4F0}
html.dark #fn-docs-entry:hover,[data-theme=dark] #fn-docs-entry:hover{background:rgb(95 141 229 / .28);color:#B7CDF7}

/* 无限画布：主打入口，渐变胶囊 + 流光扫过，一眼可辨 */
#fn-canvas-entry{
  position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;
  height:34px;padding:0 14px;border-radius:.7rem;
  color:#fff;font-size:13px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;
  background:linear-gradient(120deg,#4C7BD9 0%,#6E5CE0 48%,#B14FD8 100%);
  background-size:180% 100%;
  box-shadow:0 2px 10px rgb(94 76 224 / .35),inset 0 1px 0 rgb(255 255 255 / .25);
  overflow:hidden;isolation:isolate;
  transition:transform .18s ease,box-shadow .18s ease,background-position .6s ease;
  animation:fnCanvasGradient 6s ease-in-out infinite alternate;
}
/* 流光：一道高光斜扫而过 */
#fn-canvas-entry::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / .55) 48%,transparent 66%);
  transform:translateX(-120%);
}
#fn-canvas-entry:hover{transform:translateY(-1px);color:#fff;text-decoration:none;box-shadow:0 5px 18px rgb(94 76 224 / .5),inset 0 1px 0 rgb(255 255 255 / .3)}
#fn-canvas-entry:hover::before{animation:fnCanvasSheen 1.05s ease}
#fn-canvas-entry svg{width:16px;height:16px;flex:none;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .2))}
#fn-canvas-entry .fn-canvas-badge{
  margin-left:1px;padding:1px 5px;border-radius:5px;font-size:9.5px;font-weight:700;letter-spacing:.02em;
  background:rgb(255 255 255 / .22);color:#fff;line-height:1.35;text-transform:uppercase;
}
@keyframes fnCanvasGradient{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes fnCanvasSheen{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){
  #fn-canvas-entry{animation:none}
  #fn-canvas-entry:hover::before{animation:none}
}

/* 窄屏只留图标，别把余额和头像挤出去 */
@media(max-width:900px){
  #fn-docs-entry,#fn-canvas-entry{padding:0;width:34px;justify-content:center}
  #fn-docs-entry .fn-docs-label,#fn-canvas-entry .fn-docs-label{display:none}
  #fn-canvas-entry .fn-canvas-badge{display:none}
}
@media(max-width:640px){
  #fn-docs-entry,#fn-canvas-entry{height:36px;width:36px}
}