/* 思好商行 · 账号租赁信息管理平台 —— 浅色渐变主题 */ :root { color-scheme: light; --bg1: #eef4ff; --bg2: #f7f5ff; --bg3: #eefaf6; --card: rgba(255, 255, 255, .86); --line: #e3e9f4; --tx: #1f2a3d; --tx2: #6b7a93; --pri: #3d6fe0; --pri-d: #2b57bd; --pri-2: #6f8ff0; --pri-3: #8a5cf6; --money: #d2543f; /* 金额强调色（租金 / 押金） */ --glass: rgba(255, 255, 255, .86); /* 玻璃态底色（半透明浮层、胶囊等） */ --ok: #18a058; --ok-bg: #e8f8ef; --warn: #d98a04; --warn-bg: #fdf4e0; --off: #8a94a6; --off-bg: #eef1f5; --sold: #b0483f; --sold-bg: #fbeae8; --done: #8a6bf0; --done-bg: #f1ecfe; /* 账号状态「已完成」（紫） */ --err: #e05656; --err-bg: #fdecec; /* 表单校验错误提示 */ /* 选号页「交易须知」防骗提醒（暖橙，与全站蓝紫错开、一眼警示） */ --notice: #e5583f; --notice-d: #c8432b; --notice-bg1: #fff7f4; --notice-bg2: #fffdf7; --notice-line: #ffdcd2; --surface: #fff; /* 需要"不透明底"的场景（如固定在右侧的操作列） */ --bg1-grad: #f4f7ff; --bg2-grad: #f7f9ff; --bg3-grad: #fbfcff; /* 浅蓝底（表格 hover / 卡片等） */ /* 统一设计令牌：圆角三档 + 间距 + 阴影 */ --rad-sm: 10px; --rad: 14px; --rad-lg: 16px; --sp: 14px; --shadow: 0 6px 24px rgba(60, 90, 160, .08); --shadow-lg: 0 14px 34px rgba(30, 45, 80, .18); --safe-b: env(safe-area-inset-bottom, 0px); /* iPhone 底部安全区 */ /* ---------- 全站统一字体（唯一字体定义点，其他任何地方都不要再写 font-family）---------- */ --font-sans: "PingFang SC", "Microsoft YaHei", "微软雅黑", "Segoe UI", system-ui, Arial, sans-serif; --font-mono: Consolas, "Cascadia Mono", "Courier New", monospace; /* ---------- 全站统一字号（只允许这几档，禁止再写死 px 字号）---------- xs 12px 辅助标注（提示文字、徽标、角标、手机号、代码） sm 14px 正文与表格（基准：绝大多数文字 / 表格内容 / 输入框 / 按钮） md 16px 小标题（卡片标题、大号输入框） lg 20px 标题与大数字（页面主标题、统计卡数字） xl 28px 品牌与特大数字（品牌名、成功页大编号） 2xl 36px 【仅 /calc 快速评估页的报价大字】直播/投屏场景要远距离可读，普通页面别用 —— 不允许出现 11/13/15/17/18/19/24/32 等中间尺寸 —— */ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px; --fs-2xl: 36px; /* ---------- 全站统一行高（只允许这 3 档，禁止再写小数）---------- tight 1 单行元素（表格内编号/手机号、按钮、图标、角标） body 1.5 正文默认（页面文字、表格、输入框） loose 1.8 多行说明块（提示框、通知列表） —— 只有这 3 档，不允许出现 1.25/1.3/1.35/1.6/1.9/1.95 等中间值 —— */ --lh-tight: 1; --lh-body: 1.5; --lh-loose: 1.8; } /* （深夜模式已于 2026-09-20 按老板要求移除：效果未达预期。 注意：上面的 --pri-2 / --pri-3 / --money / --glass / --bg1-grad 系列令牌是 "颜色收编"的产物，全站已有多处引用，保留不动。） */ /* ---------- 长文本兜底（手机端防"挤压/撑破"）---------- 这几处的文案是**可配置的**（品牌名、防骗提示语、站点标题），一旦填长了， 在窄屏上容易把布局顶开：允许在实在放不下时断行，但不影响正常长度的显示。 （仓库里其它文本已实测在 390px 下无溢出，见 README「视觉规范」） */ .brand-name, .foldbar-name, .n-tip, .admin-hero h1, .hero h1 { overflow-wrap: anywhere; } /* 顶栏 / 工具条里的 flex 子项允许收缩，避免被长内容顶出容器 */ .topbar-inner > *, .toolbar-right > *, .brand > * { min-width: 0; } /* ⚠️ 2026-09-21 补充：容器自身也要能收缩（否则子项写了 min-width:0 也没用）， 并给「👤 手机号 ▾」这类用户区加上不换行的收缩保护 —— 老板反馈它会在窄屏"漂移"。 */ .topbar-inner, .toolbar, .toolbar-right, #auth-zone, .admin-hero { min-width: 0; } #auth-zone, .admin-who { max-width: 100%; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-family: var(--font-sans); } body { font-family: var(--font-sans); color: var(--tx); background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%) fixed; min-height: 100vh; font-size: var(--fs-sm); line-height: var(--lh-body); overflow-x: hidden; /* 杜绝页面级横向滚动（表格在自己容器里滚） */ display: flex; /* 竖向撑满视口：内容不足一屏时，页脚也贴在底部 */ flex-direction: column; } /* 表单控件 / 按钮统一继承全站字体、字号与行高（浏览器默认既不改字体也不继承行高： 字体掉到另一套、字号 13.33px、行高 normal≈1.2，都会显得"不统一"）——全站唯一出处 单行控件（按钮 / 输入框 / 下拉）用 tight（行高 1），多行 textarea 用 body（1.5） 注意：具体控件若有 class（.input / .btn-sm / .sort-select 等），按 class 的档位优先，不受这里影响 */ button, input, select, textarea { font-family: inherit; font-size: var(--fs-sm); line-height: var(--lh-body); } /* 说明：Chrome 不遵循