/* ============================================================ candy-ios.css — candyio · Liquid Glass (iOS 26) 浅色主题覆盖 Bootstrap，提供统一 token + 组件。后端无需改动结构，只依赖既有 class/id；样式全部在此层重绘。 ============================================================ */ :root { /* ---- 字体 ---- */ --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", system-ui, sans-serif; --font-round: ui-rounded, "SF Pro Rounded", -apple-system, "PingFang SC", system-ui, sans-serif; --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; /* ---- 品牌渐变（仅 logo / 关键 CTA） ---- */ --grad-candy: linear-gradient(118deg, #ff4d9d 0%, #c054ff 46%, #5b8def 100%); --grad-candy-soft: linear-gradient(118deg, #ff6fb0 0%, #c574ff 46%, #7ba2f2 100%); --grad-candy-warm: linear-gradient(118deg, #ff7d57 0%, #ff4d9d 34%, #c054ff 70%, #5b8def 100%); /* ---- iOS 系统语义色（浅色） ---- */ --c-blue: #0a84ff; --c-green: #30c860; --c-red: #ff3b30; --c-orange: #ff9500; --c-purple: #8b5cf6; --accent: #7c6bff; --accent-ring: rgba(124, 107, 255, 0.28); /* ---- 文本（iOS Label 体系） ---- */ --label: #1c1c1e; --label-2: rgba(60, 60, 67, 0.62); --label-3: rgba(60, 60, 67, 0.32); --separator: rgba(60, 60, 67, 0.1); /* ---- Liquid Glass 材质（强度≈6/10） ---- */ --glass-blur: 26px; --glass-sat: 185%; --glass-bg: rgba(255, 255, 255, 0.58); --glass-bg-strong: rgba(255, 255, 255, 0.76); --glass-stroke: rgba(255, 255, 255, 0.65); --glass-hairline: rgba(255, 255, 255, 0.45); --glass-shadow: 0 10px 30px -8px rgba(28, 27, 51, 0.16), 0 2px 8px -2px rgba(28, 27, 51, 0.09); --glass-shadow-lg: 0 24px 56px -12px rgba(28, 27, 51, 0.26), 0 6px 16px -6px rgba(28, 27, 51, 0.13); /* ---- 同心圆角 ---- */ --r-card: 26px; --r-tile: 20px; --r-control: 14px; --r-pill: 999px; /* ---- 弹性缓动 ---- */ --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); } * { -webkit-tap-highlight-color: transparent; } /* ============================================================ 固定尺寸 H5 舞台：始终居中，随屏幕等比缩放，绝不重排 ============================================================ */ html, body { height: 100%; } /* 防止整页切换时的白屏闪烁：页间加载间隙露出应用底色，而不是浏览器默认白 */ html { background: #201e2c; } /* 页面淡入：缓解整页重载的生硬闪现；尊重系统"减少动态效果"偏好 */ @keyframes h5-page-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .h5-stage { animation: none !important; } } /* C. 跨页视图过渡（渐进增强）：Chrome/Edge 126+、iOS Safari 18.2+ 获得原生丝滑跨页过渡；不支持的浏览器（旧版 iOS Safari、部分微信内核等）自动退回上面的 A+B，无副作用、不报错。 */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.30s; animation-timing-function: var(--ease-out, ease); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* 支持跨页视图过渡时（h5-stage.js 给加 .h5-vt），关掉舞台自身淡入，避免两层淡入叠加导致切页中途整屏变暗「闪一下」；不支持的浏览器仍保留上面的淡入兜底 */ .h5-vt .h5-stage { animation: none; } /* 状态栏、底部导航在切页过渡中单独成组：位置不变 → 视觉上固定不动，只有中间内容交叉过渡（类 App） */ .h5-statusbar { view-transition-name: h5-statusbar; } .bottom-nav { view-transition-name: h5-bottom-nav; } ::view-transition-group(h5-statusbar), ::view-transition-group(h5-bottom-nav) { animation-duration: 0.30s; animation-timing-function: var(--ease-out, ease); } body.h5-body { margin: 0; font-family: var(--font-ui); color: var(--label); background: radial-gradient(120% 120% at 18% 0%, #3a3550 0%, transparent 55%), radial-gradient(120% 120% at 100% 100%, #2c3550 0%, transparent 60%), linear-gradient(160deg, #1f1d2b, #2a2740); min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 缩放包裹：缩放比由 h5-stage.js 在中写入 --h5-scale（首帧即正确尺寸）；尺寸固定 390×844 */ .h5-stage { position: relative; width: 390px; height: 844px; flex: none; border-radius: 46px; overflow: hidden; transform-origin: center center; transform: scale(var(--h5-scale, 1)); animation: h5-page-in 0.28s var(--ease-out) both; background: radial-gradient(135% 100% at 0% 0%, #ffe3f1 0%, transparent 42%), radial-gradient(140% 110% at 100% 6%, #e6ecff 0%, transparent 48%), radial-gradient(150% 120% at 100% 100%, #efe2ff 0%, transparent 50%), linear-gradient(168deg, #f6f5fb 0%, #eef0f7 100%); box-shadow: 0 0 0 11px #0c0b14, 0 0 0 12.5px #2a2840, 0 50px 120px -30px rgba(0, 0, 0, 0.7); } /* 只用浅色主题（配合 h5-stage.js 注入的） */ :root { color-scheme: only light; } /* ===== 手机模式（h5-stage.js 在真机上给加 .h5-m）===== 去掉手机模型外框/圆角/阴影、不缩放，按真实屏幕铺满；隐藏模拟状态栏，改用安全区留白。高度用 --h5-vh（首屏高度，键盘弹出时不跟着变小），避免输入时整页被压缩。 */ html.h5-m { background: #f1f1f7; overflow: hidden; } /* 内层滚到头时不把滚动传给整页，防止整页被带着滚走、底部导航移位 */ .h5-m .h5-scroll { overscroll-behavior: contain; } html.h5-m, .h5-m body.h5-body { height: var(--h5-vh, 100dvh); } .h5-m body.h5-body { display: block; min-height: 0; background: #f1f1f7; } .h5-m .h5-stage { width: 100%; height: var(--h5-vh, 100dvh); border-radius: 0; box-shadow: none; transform: none; } .h5-m .h5-statusbar { display: none; } .h5-m .h5-scroll { padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); } .h5-m .h5-scroll.has-nav { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); } .h5-m .bottom-nav { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .h5-m #capsule-toast-container { top: calc(14px + env(safe-area-inset-top, 0px)); } /* 内层滚动区 */ .h5-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 56px 18px 26px; /* 顶部让出状态栏 */ scrollbar-width: none; } .h5-scroll::-webkit-scrollbar { width: 0; height: 0; } .h5-scroll.has-nav { padding-bottom: 104px; } /* 让出悬浮 Tab */ /* ---- iOS 状态栏 ---- */ .h5-statusbar { position: absolute; top: 0; left: 0; right: 0; height: 54px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 15px; color: var(--label); z-index: 40; pointer-events: none; } .h5-statusbar .sb-time { font-variant-numeric: tabular-nums; letter-spacing: 0; } .h5-statusbar .sb-right { display: flex; align-items: center; gap: 7px; font-size: 15px; } .h5-statusbar .sb-right i { font-size: 15px; } /* ============================================================ 品牌 ============================================================ */ .brand-row { display: flex; align-items: center; gap: 10px; } .brand-logo { width: 38px; height: 38px; display: block; } .brand-wordmark { font-family: var(--font-round); font-weight: 700; letter-spacing: -0.02em; background: var(--grad-candy); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .main-title-brand { /* 兼容旧 class */ font-family: var(--font-round); font-weight: 700; background: var(--grad-candy); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* 品牌后缀 -sms：取渐变蓝端做可读的固定后缀，始终清晰可见 */ .brand-wordmark .bsfx, .main-title-brand .bsfx { background: var(--grad-candy); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 700; font-size: 0.75em; /* Candyio 主标题 + sms 副标题：由 0.6em 调大，副标题更清晰 */ opacity: 1; letter-spacing: 0; vertical-align: 1px; } /* 页面大标题 */ .page-title { font-family: var(--font-round); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: #2b2a3a; margin: 4px 0 14px; } .page-sub { color: var(--label-2); font-size: 14px; margin-top: -8px; margin-bottom: 16px; } /* ============================================================ 玻璃卡片 ============================================================ */ .card, .glass { position: relative; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-hairline); border-radius: var(--r-card); box-shadow: var(--glass-shadow); margin-bottom: 16px; color: var(--label); } /* 顶部高光描边——液态玻璃的关键质感 */ .card::before, .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, var(--glass-stroke), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .card-body { padding: 16px; position: relative; } .card-header { background: transparent; border-bottom: 1px solid var(--separator); font-weight: 600; color: var(--label); padding: 13px 16px; border-radius: var(--r-card) var(--r-card) 0 0; } .card-footer { background: transparent; border-top: 1px solid var(--separator); padding: 12px 16px; } /* ============================================================ 按钮 ============================================================ */ .btn { font-family: var(--font-ui); font-weight: 600; border-radius: var(--r-control); padding: 8px 13px; font-size: 14px; /* 显式设定：原走 Bootstrap 默认 16px，比输入框还大；与输入框同高同字号 */ border: none; white-space: nowrap; letter-spacing: -0.01em; transition: transform 0.14s var(--ease-pop), box-shadow 0.2s, filter 0.2s, background 0.2s; } .btn:active { transform: scale(0.955); } .btn-sm { padding: 7px 13px; border-radius: 11px; font-size: 13px; } .btn-lg { padding: 14px 20px; border-radius: 16px; font-size: 17px; } /* 主操作：candy 渐变胶囊 */ .btn-primary { background: var(--grad-candy); color: #fff; box-shadow: 0 8px 20px -6px rgba(192, 84, 255, 0.5); } .btn-primary:hover { color: #fff; filter: brightness(1.04); } .btn-primary:focus, .btn-primary:active { background: var(--grad-candy); color: #fff; box-shadow: 0 6px 16px -6px rgba(192, 84, 255, 0.55); } .btn-primary:disabled, .btn-primary.disabled { opacity: 0.45; box-shadow: none; } .btn-success { background: var(--c-green); color: #fff; box-shadow: 0 6px 16px -7px rgba(48, 200, 96, 0.6); } .btn-success:hover, .btn-success:active, .btn-success:focus { background: #28b657; color: #fff; } .btn-danger { background: var(--c-red); color: #fff; box-shadow: 0 6px 16px -7px rgba(255, 59, 48, 0.55); } .btn-danger:hover, .btn-danger:active, .btn-danger:focus { background: #e8352b; color: #fff; } .btn-warning { background: var(--c-orange); color: #fff; box-shadow: 0 6px 16px -7px rgba(255, 149, 0, 0.5); } .btn-warning:hover, .btn-warning:active, .btn-warning:focus { background: #f08c00; color: #fff; } .btn-info { background: var(--c-blue); color: #fff; } .btn-info:hover, .btn-info:active, .btn-info:focus { background: #0a78e6; color: #fff; } /* 拉黑：封禁动作 → 近黑深色，语义最重 */ .btn-dark { background: linear-gradient(160deg, #3a3a45, #1c1c22); color: #fff; box-shadow: 0 6px 16px -7px rgba(28, 28, 34, 0.6); } .btn-dark:hover, .btn-dark:active, .btn-dark:focus { background: linear-gradient(160deg, #2c2c35, #141418); color: #fff; } /* 统一禁用态：保留各自语义色，仅降低透明度（默认即可辨识动作） */ .btn:disabled, .btn.disabled { opacity: 0.5; box-shadow: none; filter: saturate(0.9); } .btn-primary:disabled { background: var(--grad-candy); color: #fff; } .btn-warning:disabled { background: var(--c-orange); color: #fff; } .btn-dark:disabled { background: linear-gradient(160deg, #3a3a45, #1c1c22); color: #fff; } .btn-danger:disabled { background: var(--c-red); color: #fff; } .btn-success:disabled { background: var(--c-green); color: #fff; } .btn-secondary:disabled { background: var(--glass-bg-strong); color: var(--label); } /* 次级：中性玻璃 */ .btn-secondary, .btn-light { background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); color: var(--label); border: 1px solid var(--separator); box-shadow: var(--glass-shadow); } .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus, .btn-light:hover, .btn-light:active, .btn-light:focus { background: #fff; color: var(--label); } .btn-secondary:disabled { opacity: 0.45; } /* 描边按钮 */ .btn-outline-danger { background: transparent; color: var(--c-red); border: 1.5px solid rgba(255, 59, 48, 0.5); } .btn-outline-danger:hover, .btn-outline-danger:active { background: rgba(255, 59, 48, 0.1); color: var(--c-red); } .btn-outline-light { background: rgba(255,255,255,0.16); color: #fff; border: 1.5px solid rgba(255,255,255,0.4); } /* 按钮内 spinner（保留旧逻辑） */ .btn.loading .spinner-border { display: inline-block !important; } .btn .spinner-border { display: none !important; } .btn.loading > i { display: none; } /* ============================================================ 表单控件 — 玻璃输入框 ============================================================ */ .form-control, .form-select { background: rgba(255, 255, 255, 0.72); border: 1px solid var(--separator); border-radius: var(--r-control); color: var(--label); padding: 8px 13px; font-size: 14px; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .form-control::placeholder { color: var(--label-3); } .form-control:focus, .form-select:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); color: var(--label); } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237c6bff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; } /* 卡片内表单行间距收紧：16px → 10px（Bootstrap 的 .mb-3 自带 !important） */ .h5-stage .card-body > .mb-3, .h5-stage .card-body > .row.mb-3, .h5-stage .card-body > .input-group.mb-3 { margin-bottom: 10px !important; } /* input-group：玻璃整体 */ .input-group { border-radius: var(--r-control); background: rgba(255, 255, 255, 0.72); border: 1px solid var(--separator); overflow: hidden; } .input-group:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); } .input-group > .form-control, .input-group > .form-select, .input-group > .form-control:focus { background: transparent; border: none; box-shadow: none; border-radius: 0; } .input-group-text { background: transparent; border: none; color: var(--label-2); font-size: 13px; font-weight: 500; padding: 8px 11px; white-space: nowrap; } .input-group > .btn { border-radius: 0; margin: 0; box-shadow: none; } /* 浮动标签（登录/注册） */ .form-floating > .form-control, .form-floating > .form-select { border-radius: var(--r-control); background: rgba(255, 255, 255, 0.72); } .form-floating > label { color: var(--label-3); padding: 12px 14px; } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--label-2); } .form-check-input { border-color: var(--label-3); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { box-shadow: 0 0 0 4px var(--accent-ring); border-color: var(--accent); } .form-check-input.is-invalid { border-color: var(--c-red); } /* ============================================================ 悬浮玻璃胶囊底部导航 + 液态高亮 ============================================================ */ .bottom-nav { position: absolute; left: 16px; right: 16px; bottom: 16px; background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); border: 1px solid var(--glass-hairline); border-radius: 28px; box-shadow: var(--glass-shadow-lg); padding: 8px 8px; z-index: 50; overflow: hidden; } .bottom-nav::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(255,255,255,0.85), transparent 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .bottom-nav .row { position: relative; z-index: 1; margin: 0; } .bottom-nav .nav-link { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--label-2); text-decoration: none; padding: 7px 0 5px; border-radius: 20px; position: relative; transition: color 0.25s var(--ease-out); } .bottom-nav .nav-link i { font-size: 21px; line-height: 1; transition: transform 0.35s var(--ease-pop); } .bottom-nav .nav-link span { font-size: 11px; font-weight: 600; letter-spacing: -0.01em; } /* 液态高亮丸 */ .bottom-nav .nav-link::after { content: ""; position: absolute; inset: 2px 8px; border-radius: 18px; background: var(--grad-candy-soft); opacity: 0; transform: scale(0.7); z-index: -1; box-shadow: 0 8px 18px -6px rgba(192, 84, 255, 0.5); transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-pop); } .bottom-nav .nav-link.active { color: #fff; } .bottom-nav .nav-link.active::after { opacity: 1; transform: scale(1); } .bottom-nav .nav-link.active i { transform: translateY(-1px); } /* ============================================================ 首页功能宫格 — 玻璃磁贴 ============================================================ */ .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .grid-item { background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--glass-hairline); border-radius: var(--r-tile); padding: 14px 5px 12px; text-align: center; text-decoration: none; color: var(--label); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; box-shadow: 0 6px 16px -10px rgba(28, 27, 51, 0.3); transition: transform 0.16s var(--ease-pop), box-shadow 0.2s; } .grid-item:active { transform: scale(0.93); } /* 客服 Telegram 联系胶囊（bootstrap.php 的 tg_support_tg_html() 输出）：TG 蓝图标 + @账号 + 复制按钮 */ .tg-contact { display: inline-flex; align-items: center; vertical-align: middle; height: 24px; margin: 1px 0; background: rgba(34, 158, 217, 0.1); border: 1px solid rgba(34, 158, 217, 0.22); border-radius: 999px; white-space: nowrap; line-height: 1; } .tg-contact-link { display: inline-flex; align-items: center; gap: 4px; height: 100%; padding: 0 4px 0 7px; color: #1c8cc4; font-weight: 700; font-size: 12.5px; text-decoration: none; } .tg-contact-link:hover, .tg-contact-link:active { color: #1577a8; } .tg-contact-link i { color: #229ED9; font-size: 14px; } .tg-contact-copy { display: inline-flex; align-items: center; justify-content: center; height: 100%; padding: 0 8px 0 6px; border: 0; border-left: 1px solid rgba(34, 158, 217, 0.22); background: transparent; color: #229ED9; font-size: 12px; cursor: pointer; border-radius: 0 999px 999px 0; } .tg-contact-copy:active { background: rgba(34, 158, 217, 0.16); } .tg-contact-copy.is-copied { color: var(--c-green); } /* 行文中的「客服」文字链接（帮助页） */ .tg-text-link { color: #1c8cc4; font-weight: 600; text-decoration: none; white-space: nowrap; } .tg-text-link i { color: #229ED9; font-size: 0.92em; margin-left: 2px; } /* 点击站内链接后的加载反馈（h5-stage.js 控制）：被点项保持按下态 + 顶部糖果色进度条 */ .grid-item.is-nav-pressed { transform: scale(0.93); box-shadow: 0 3px 10px -8px rgba(28, 27, 51, 0.3); } .bottom-nav .nav-link.is-nav-pressed i { transform: scale(0.86); } .bottom-nav .nav-link.is-nav-pressed:not(.active) { color: var(--c-purple); } .h5-nav-progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; height: 3px; width: 0; z-index: 3000; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #ff4d9d, #c054ff 55%, #5b8def); box-shadow: 0 0 8px rgba(192, 84, 255, 0.55); opacity: 0; pointer-events: none; } .h5-nav-pending .h5-nav-progress { opacity: 1; animation: h5-nav-load 6s cubic-bezier(0.1, 0.7, 0.2, 1) forwards; } @keyframes h5-nav-load { 0% { width: 0; } 12% { width: 38%; } 100% { width: 92%; } } @media (prefers-reduced-motion: reduce) { .h5-nav-pending .h5-nav-progress { animation: none; width: 60%; } } .grid-item .tile-ico { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; box-shadow: 0 5px 12px -5px rgba(0,0,0,0.35); } .grid-item span { font-size: 11.5px; font-weight: 600; color: var(--label); line-height: 1.25; } /* 超窄屏（<=340px，如初代 iPhone SE）：磁贴文字与顶部品牌收紧，避免「搜索对接码」折行、Logo 贴住按钮 */ @media (max-width: 340px) { .grid-container { gap: 9px; } .grid-item { padding: 12px 2px 10px; } .grid-item span { font-size: 10.5px; letter-spacing: -0.02em; } .brand-row { gap: 6px; } .brand-row .brand-logo { width: 32px; height: 32px; } .brand-row .brand-wordmark, .brand-row .main-title-brand { font-size: 1.05rem !important; } } /* 磁贴图标配色（克制：少量 candy 渐变 + iOS 纯色） */ .ico-grad { background: var(--grad-candy); } .ico-blue { background: linear-gradient(135deg, #4ea3ff, #0a84ff); } .ico-green { background: linear-gradient(135deg, #4fdd84, #30c860); } .ico-orange { background: linear-gradient(135deg, #ffb14e, #ff9500); } .ico-purple { background: linear-gradient(135deg, #b18cff, #8b5cf6); } .ico-pink { background: linear-gradient(135deg, #ff8ec0, #ff4d9d); } .ico-teal { background: linear-gradient(135deg, #4fe0d4, #14b8c4); } .ico-gray { background: linear-gradient(135deg, #b9bfcc, #8a90a0); } /* ============================================================ 统计 / 余额卡 ============================================================ */ .stat-card .card-body { padding: 9px 14px; } .stat-item { display: flex; flex-direction: column; gap: 0; } .stat-item .stat-label { font-size: 11.5px; color: var(--label-2); letter-spacing: 0; } /* 数字用圆体中粗；成功次数用同色系灰紫 #6e6c8a，余额用品牌紫突出（与识别码同色系），主次分明 */ .stat-item .stat-value { font-family: var(--font-round); font-size: 16px; font-weight: 600; line-height: 1.3; color: #6e6c8a; font-variant-numeric: tabular-nums; } #user-balance { color: var(--accent); } .border-end { border-right: 1px solid var(--separator) !important; } /* 个人中心头部 hero */ .profile-hero { background: var(--grad-candy-warm); color: #fff; border-radius: var(--r-card); border: none; box-shadow: 0 18px 40px -16px rgba(192, 84, 255, 0.55); overflow: hidden; } .profile-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 80% -10%, rgba(255,255,255,0.45), transparent 55%); pointer-events: none; } /* ============================================================ iOS 分组列表行（个人中心选项） ============================================================ */ .list-stack { display: flex; flex-direction: column; gap: 10px; } .option-item { display: flex; align-items: center; gap: 13px; background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--glass-hairline); border-radius: var(--r-control); padding: 13px 15px; text-decoration: none; color: var(--label); font-weight: 500; font-size: 15px; box-shadow: 0 5px 14px -10px rgba(28,27,51,0.3); transition: transform 0.14s var(--ease-pop), background 0.2s; } .option-item:active { transform: scale(0.985); background: rgba(255,255,255,0.8); } .option-item .icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; background: var(--c-blue); } .option-item .chev { color: var(--label-3); margin-left: auto; font-size: 14px; } .option-item.text-danger { color: var(--c-red); } .option-item.text-danger .icon { background: var(--c-red); } /* ============================================================ 公告条 ============================================================ */ .announcement-bar { display: flex; align-items: center; gap: 9px; background: rgba(10, 132, 255, 0.1); color: var(--c-blue); padding: 10px 14px; border-radius: var(--r-control); margin-bottom: 16px; font-size: 13px; overflow: hidden; } .announcement-bar i { flex: none; } .scrolling-text-container { flex: 1; white-space: nowrap; overflow: hidden; } .scrolling-text { display: inline-block; padding-left: 100%; margin: 0; animation: scroll-left 22s linear infinite; } @keyframes scroll-left { 0% { transform: translateX(0);} 100% { transform: translateX(-100%);} } /* ============================================================ 取号页 — 识别码 / 短信内容 ============================================================ */ .verification-code { font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: 1px; color: var(--accent); text-align: center; } .sms-full-content { font-size: 14px; color: var(--label); white-space: pre-wrap; word-break: normal; /* 原 break-all 会把验证码数字从中间断开（如 39659/9） */ overflow-wrap: break-word; /* 超长英文/链接仍可换行，不撑破 */ line-height: 1.5; } .click-to-copy { cursor: pointer; } .info-row { display: flex; justify-content: space-between; align-items: center; background: rgba(10,132,255,0.08); color: var(--label-2); font-size: 12px; padding: 8px 12px; border-radius: 11px; flex-wrap: wrap; gap: 2px 10px; } /* 放不下时整段换行（时间一行、归属地一行），不再各自从中间断开成两行 */ .info-row > span { white-space: nowrap; } .bg-light-blue { background: rgba(10,132,255,0.08); } /* 使用须知卡 */ .usage-notice-card { margin-bottom: 8px; } .usage-notice-card .card-header { background: var(--grad-candy); color: #fff; border: none; border-radius: var(--r-card) var(--r-card) 0 0; } .usage-notice-item { display: flex; align-items: flex-start; gap: 11px; padding: 8px 4px; } .notice-number { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; } .notice-number-1 { background: var(--c-blue); } .notice-number-2 { background: var(--c-green); } .notice-number-3 { background: var(--c-orange); } .notice-number-4 { background: var(--c-red); } .notice-number-5 { background: #8a90a0; } .notice-text { font-size: 13px; color: var(--label-2); line-height: 1.55; padding-top: 2px; } /* ============================================================ 弹层 Sheet（玻璃） ============================================================ */ .modal-content, .modal-content.card { background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--glass-hairline); border-radius: 26px; box-shadow: var(--glass-shadow-lg); } .modal-header { border-bottom: 1px solid var(--separator); padding: 16px 18px; } .modal-title { font-weight: 700; font-family: var(--font-round); color: var(--label); } .modal-body { color: var(--label); padding: 16px 18px; } .modal-footer { border-top: 1px solid var(--separator); padding: 12px 18px; } .modal-backdrop.show { opacity: 0.4; } .modal-backdrop { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .list-group-item { background: transparent; border: none; border-bottom: 1px solid var(--separator); color: var(--label); padding: 12px 4px; } .list-group-item-action:hover { background: rgba(124,107,255,0.06); border-radius: 10px; } .btn-close:focus { box-shadow: none; } /* ============================================================ 灵动岛风格胶囊 Toast ============================================================ */ #capsule-toast-container { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: none; width: max-content; max-width: 86%; } .capsule-toast { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--r-pill); color: #fff; font-weight: 600; font-size: 14px; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 12px 28px -8px rgba(0,0,0,0.4); opacity: 0; transform: translateY(-16px) scale(0.92); transition: all 0.4s var(--ease-pop); pointer-events: auto; justify-content: center; max-width: 100%; } .capsule-toast.show { opacity: 1; transform: translateY(0) scale(1); } .capsule-toast i { font-size: 16px; } .capsule-toast-success { background: linear-gradient(135deg, #34d36a, #1fa84f); } .capsule-toast-error { background: linear-gradient(135deg, #ff5b52, #e23029); } .capsule-toast-info { background: linear-gradient(135deg, #3aa0ff, #0a78e6); } .capsule-toast-warning { background: linear-gradient(135deg, #ffb04e, #f08a00); } /* ============================================================ 登录/注册居中容器（在 stage 内） ============================================================ */ .form-auth-wrapper { min-height: 100%; display: flex; align-items: center; justify-content: center; } .form-auth { width: 100%; padding: 26px 22px; margin: 0; } /* ============================================================ 小工具 ============================================================ */ .text-muted { color: var(--label-2) !important; } .text-primary { color: var(--accent) !important; } .text-success { color: var(--c-green) !important; } .text-danger { color: var(--c-red) !important; } .text-warning { color: var(--c-orange) !important; } .text-info { color: var(--c-blue) !important; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--c-purple); } hr { border-color: var(--separator); opacity: 1; } .bg-light { background: rgba(255,255,255,0.6) !important; } .fw-bold { font-weight: 700; } /* 桌面端：禁止文本选中拖影更像 App（仅装饰元素） */ .h5-statusbar, .bottom-nav span, .brand-wordmark { user-select: none; } /* ============================================================ 取号页：空态文字置灰，取到真实数据后再高亮 ============================================================ */ #current-phone-display { color: var(--label-3); font-weight: 500; transition: color .2s; } #current-phone-display.is-active { color: var(--label); font-weight: 600; } #sms-verification-code { color: var(--label-3); font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0; text-align: left; transition: color .2s; } #sms-verification-code.is-active { color: var(--accent); font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: 1px; text-align: center; } #sms-full-content { color: var(--label-3); transition: color .2s; } #sms-full-content.is-active { color: var(--label); } /* 项目选择占位也走灰度 */ #project-select-display.text-muted #project-select-text { color: var(--label-3); } /* ============================================================ 弹窗置于舞台内：限制在手机框内显示 ============================================================ */ .h5-stage .modal { position: absolute; z-index: 1200; background: rgba(22, 20, 32, 0.4); -webkit-backdrop-filter: blur(3px) saturate(120%); backdrop-filter: blur(3px) saturate(120%); } .h5-stage .modal-dialog { max-width: calc(100% - 36px) !important; margin: 0 auto; min-height: 100%; display: flex; align-items: center; } .h5-stage .modal-dialog-scrollable { height: calc(100% - 1rem); } /* ============================================================ 子页通用组件 ============================================================ */ /* 返回头 */ .page-header { display: flex; align-items: center; justify-content: center; position: relative; margin: 2px 0 16px; padding: 2px 0; min-height: 40px; } .page-header h1 { margin: 0; font-family: var(--font-round); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--label); } .page-header .back-btn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--glass-bg); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid var(--glass-hairline); box-shadow: 0 4px 12px -8px rgba(28,27,51,0.3); text-decoration: none; transition: transform 0.14s var(--ease-pop), background 0.2s; } .page-header .back-btn:active { transform: translateY(-50%) scale(0.9); } .page-header .back-btn svg { width: 19px; height: 19px; } .page-header .header-extra { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--label-2); } /* 通用玻璃卡（子页内容块） */ .sheet-card { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-hairline); border-radius: var(--r-card); box-shadow: var(--glass-shadow); padding: 16px; margin-bottom: 14px; position: relative; } .sheet-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--label); margin-bottom: 14px; } .sheet-title i { color: var(--accent); font-size: 17px; } /* 标签 pill */ .tag-item { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 7px; letter-spacing: 0; } .tag-green { background: rgba(48,200,96,0.12); color: #1f9e4d; } .tag-red { background: rgba(255,59,48,0.1); color: var(--c-red); } .tag-purple { background: rgba(139,92,246,0.12); color: var(--c-purple); } .tag-blue { background: rgba(10,132,255,0.1); color: var(--c-blue); } .tag-orange { background: rgba(255,149,0,0.12); color: #e07d00; } /* 对接码卡片：标签行 + 类型/号段行（号段默认 1 行，超出可展开） */ .dc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .dc-seg-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; } .dc-seg-row .tag-item { flex-shrink: 0; } .dc-seg { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 6px; } .dc-seg-text { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 19px; color: var(--label-2); word-break: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-seg.open .dc-seg-text { white-space: normal; } .dc-seg-more { flex-shrink: 0; font-size: 11.5px; line-height: 19px; font-weight: 600; color: var(--accent); cursor: pointer; user-select: none; } /* 列表项卡（搜索结果/对接码/我的专属/历史） */ .item-card { background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--glass-hairline); border-radius: var(--r-tile); padding: 14px 15px; margin-bottom: 11px; box-shadow: 0 6px 16px -11px rgba(28,27,51,0.3); } .item-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } .item-name { font-weight: 600; font-size: 15px; color: var(--label); } .item-sub { font-size: 12px; color: var(--label-2); } .code-chip { font-family: var(--font-mono); font-size: 11.5px; background: rgba(124,107,255,0.1); color: var(--accent); padding: 2px 8px; border-radius: 7px; } /* 状态徽标 */ .status-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; } .status-ok { background: rgba(48,200,96,0.12); color: #1f9e4d; } .status-paused { background: rgba(255,149,0,0.12); color: #e07d00; } /* 分段控件（Segmented，iOS 风） */ .seg-control { display: flex; background: rgba(120,120,128,0.1); border-radius: 12px; padding: 3px; margin-bottom: 16px; } .seg-control button { flex: 1; border: none; background: transparent; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--label-2); transition: all 0.22s var(--ease-out); } .seg-control button.active { background: #fff; color: var(--label); box-shadow: 0 3px 8px -3px rgba(28,27,51,0.22); } /* 空状态 */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 54px 24px; background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--glass-hairline); border-radius: var(--r-card); box-shadow: var(--glass-shadow); } .empty-state .empty-ico { width: 72px; height: 72px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--label-3); background: rgba(120,120,128,0.08); margin-bottom: 16px; } .empty-state .empty-title { font-size: 15px; font-weight: 600; color: var(--label-2); margin-bottom: 5px; } .empty-state .empty-sub { font-size: 12.5px; color: var(--label-3); } /* 表单标签 */ .field-label { font-size: 13px; font-weight: 600; color: var(--label-2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .field-label i { color: var(--accent); } /* 收益/成功数强调卡 */ .accent-stat-card { background: var(--grad-candy); color: #fff; border-radius: var(--r-card); padding: 15px 18px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 14px 30px -14px rgba(192,84,255,0.55); font-weight: 600; } .accent-stat-card .num { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; } /* 推广链接输入组 */ .referral-box .input-group { background: rgba(120,120,128,0.08); border-color: transparent; } /* 字数计数 */ .char-count { text-align: right; font-size: 12px; color: var(--label-3); margin-top: 6px; } /* 分页 */ .pagination { display: flex; gap: 8px; justify-content: center; list-style: none; padding: 0; } .pagination .page-link { color: var(--accent); background: var(--glass-bg); border: 1px solid var(--glass-hairline); border-radius: 11px; padding: 7px 13px; text-decoration: none; } .pagination .page-item.disabled .page-link { color: var(--label-3); } .pagination .page-item.active .page-link { background: var(--grad-candy); color: #fff; border-color: transparent; } /* 提示态：居中结果屏（success/error 整页） */ .result-screen { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 26px; } .result-icon { width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 46px; color: #fff; margin-bottom: 22px; animation: pop-in 0.5s var(--ease-pop); } @keyframes pop-in { from { opacity:0; transform: scale(0.6);} to { opacity:1; transform: scale(1);} } .result-icon.ok { background: linear-gradient(150deg, #4fdd84, #1fa84f); box-shadow: 0 16px 34px -14px rgba(48,200,96,0.6); } .result-icon.err { background: linear-gradient(150deg, #ff6b62, #e23029); box-shadow: 0 16px 34px -14px rgba(255,59,48,0.55); } .result-icon.warn { background: linear-gradient(150deg, #ffc14e, #f08a00); box-shadow: 0 16px 34px -14px rgba(255,149,0,0.5); } .result-screen h2 { font-family: var(--font-round); font-size: 22px; font-weight: 700; color: var(--label); margin: 0 0 10px; } .result-screen p { font-size: 14px; color: var(--label-2); line-height: 1.6; margin: 0 0 26px; max-width: 280px; }