/* ========================================================================== FlowKit · base 设计令牌 + 元素基线。颜色、圆角、字体只在此处定义。 品牌紫取自 Logo 实测主色（#4020E0 / #6060F0）。 ========================================================================== */ :root{ /* 墨色层 —— 文字与结构 */ --ink:#0F1115; --text:#2B3038; --muted:#6C737C; --faint:#98A0A8; /* 纸张层 —— 背景与承托 */ --paper:#EDEFF1; --paper-deep:#E4E7EB; --surface:#FFFFFF; --sunken:#F5F6F8; /* 分隔线 */ --line:#D5DAE0; --line-2:#E9ECEF; /* 品牌信号（Logo 实测主色） */ --brand:#4B31E4; --brand-ink:#3924C4; --brand-tint:#EFECFE; --brand-line:#D9D2FB; /* 状态色 */ --ok:#17795F; --danger:#C0392B; --warn:#96661A; /* 结构 */ --radius:10px; --radius-sm:6px; --radius-lg:14px; --shadow-1:0 1px 2px rgba(15,17,21,.05); --shadow-2:0 18px 44px -16px rgba(15,17,21,.3); /* 字体：英文优先（拉丁字形走系统 UI 字体），中文兜底到各平台黑体；技术标注用等宽 */ --font-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --font-mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--font-sans); font-size:14px; line-height:1.6; color:var(--text); background:var(--paper); font-synthesis:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* 首屏语言门控：目标语言与页面静态语言不一致时，lang-boot.js 会在 里挂上这个标记， 等 i18n 刷完文案再摘掉（3 秒兜底），避免英文用户先看到一屏中文。 */ html[data-lang-pending] body{visibility:hidden} h1,h2,h3,h4,p,figure,ul,ol{margin:0;padding:0} h1{font-size:clamp(28px,4.2vw,42px);line-height:1.16;letter-spacing:-.02em;font-weight:800;color:var(--ink)} h2{font-size:19px;line-height:1.3;letter-spacing:-.01em;font-weight:700;color:var(--ink);margin-bottom:6px} h3{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px} p{color:var(--muted)} small{font-size:13px;color:var(--faint)} ul{list-style:none} a{color:var(--brand-ink);text-decoration:none} a:hover{color:var(--brand)} ::selection{background:var(--brand-tint);color:var(--brand-ink)} [hidden]{display:none!important} /* ---------------------------------------------------------------- 控件 */ button,input,select,textarea{font:inherit;color:inherit} button{ cursor:pointer; padding:9px 15px; font-size:13px; font-weight:600; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--text); transition:background .15s ease,border-color .15s ease,color .15s ease; } button:hover:enabled{background:var(--sunken);border-color:#C9CFD6} button:active:enabled{background:#ECEEF1} button:disabled{cursor:not-allowed;opacity:.45} button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--brand);outline-offset:2px} input:not([type=checkbox]):not([type=range]):not([type=color]), select, textarea{ padding:9px 10px; max-width:100%; min-width:0; font-size:13px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--text); } input::placeholder,textarea::placeholder{color:var(--faint)} input:not([type=checkbox]):not([type=range]):focus, select:focus, textarea:focus{border-color:var(--brand-line);box-shadow:0 0 0 3px var(--brand-tint);outline:none} input[type=range]{width:100%;height:20px;padding:0;accent-color:var(--brand);background:transparent} input[type=checkbox]{accent-color:var(--brand);width:16px;height:16px;margin:0;vertical-align:middle} input[type=color]{height:42px;width:100%;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)} select{ appearance:none; padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236C737C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; background-size:11px; } fieldset{border:0;padding:0;margin:0;min-width:0} label{font-size:13px} hr{border:0;border-top:1px solid var(--line-2);margin:20px 0} progress{display:block;width:100%;height:6px;border:0;border-radius:99px;overflow:hidden;background:#E4E7EB;accent-color:var(--brand)} progress::-webkit-progress-bar{background:#E4E7EB} progress::-webkit-progress-value{background:var(--brand);border-radius:99px} progress::-moz-progress-bar{background:var(--brand)} /* ---------------------------------------------------------- 语义化修饰 */ .primary{background:var(--ink);border-color:var(--ink);color:#fff} .primary:hover:enabled{background:#23272E;border-color:#23272E} .primary:active:enabled{background:#000;border-color:#000} .danger{color:var(--danger)} .danger:hover:enabled{background:#FCF1EF;border-color:#E9C7C2} .link{border:0;background:none;padding:0;font-size:12px;font-weight:600;color:var(--brand-ink)} .link:hover:enabled{background:none;text-decoration:underline} .help{font-size:13px;line-height:1.6;color:var(--faint);margin:7px 0 0} .warning{color:var(--warn)} .centered{text-align:center} .full{width:100%;margin-top:22px} .mono{font-family:var(--font-mono)} .check{display:flex!important;align-items:center;gap:8px;cursor:pointer} .check input{flex:none} /* 技术标注层：等宽字体，用于编号、格式、尺寸、规格 */ .eyebrow{ display:flex; align-items:center; gap:9px; width:max-content; max-width:100%; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-ink); } .eyebrow::before{ content:""; width:6px; height:6px; flex:none; border:1.5px solid currentColor; border-radius:50%; } /* 规格行：等宽、低对比，像仪器铭牌 */ .spec{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--faint); } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }