/* ========================================================================== * MangosLab V5 Design System · tokens.css * -------------------------------------------------------------------------- * Single source of truth for all design tokens. * Phase 3 工程师直接 @import 即可。 * * 命名约定： * --ml-{namespace}-{property}-{variant} * namespace: bg / line / text / brand / sem / tier / fs / fw / sp / r / sh / motion * * 双层模式（Admin vs User）通过 [data-layer] 属性切换: * → 用户层（14px / 16px radius / 舒适间距） * → Admin 层（13px / 10px radius / 紧凑间距） * 默认 = user * ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap'); :root { /* ============ COLORS · SURFACES (6 levels, pure black grayscale) ============ */ --ml-bg-0: #000000; /* canvas (page bg) */ --ml-bg-1: #0A0A0A; /* sidebar / left rail */ --ml-bg-2: #0F0F0F; /* top header / footer */ --ml-bg-3: #1A1A1A; /* card / panel */ --ml-bg-4: #222222; /* card hover / sub-panel */ --ml-bg-5: #2C3045; /* input / select / sub-sub-panel */ /* ============ COLORS · LINES (4 levels) ============ */ --ml-line-soft: rgba(255, 255, 255, 0.04); /* table row separator (subtle) */ --ml-line: rgba(255, 255, 255, 0.08); /* card border (default) */ --ml-line-strong: rgba(255, 255, 255, 0.16); /* input border / divider */ --ml-line-input: rgba(255, 255, 255, 0.20); /* form input outline */ /* ============ COLORS · TEXT (6 levels) ============ */ --ml-text: #FFFFFF; /* primary (data emphasis) */ --ml-text-soft: #EDEDED; /* secondary headings */ --ml-text-body: #DDE2EE; /* body paragraph */ --ml-text-muted: #9F9FA9; /* labels / meta / placeholder */ --ml-text-faint: #6A7282; /* tags / footer text */ --ml-text-disabled: #3F3F46; /* disabled state */ /* ============ COLORS · BRAND (Mint/Felix v2 anchor, used sparingly) ============ */ --ml-brand: #97FCE4; /* Mint brand / Tier S / CTA Primary */ --ml-brand-soft: #C5FEEE; /* hover light */ --ml-brand-deep: #50D2B1; /* pressed / deep */ --ml-brand-glow: rgba(151, 252, 228, 0.10); /* ============ COLORS · SEMANTIC (Felix style: green/red/blue/yellow) ============ */ /* Green = positive / success / online / "up" */ --ml-green: #2BBD80; --ml-green-bright: #30E000; --ml-green-bg: rgba(43, 189, 128, 0.10); --ml-green-border: rgba(43, 189, 128, 0.40); /* Red = negative / destructive / "down" / error */ --ml-red: #FF494A; --ml-red-soft: #FF6464; --ml-red-bg: rgba(255, 73, 74, 0.10); --ml-red-border: rgba(255, 73, 74, 0.40); /* Blue = link / info / neutral active */ --ml-blue: #0E76FD; --ml-blue-bright: #3898FF; --ml-blue-bg: rgba(14, 118, 253, 0.10); /* Yellow = warning / pending */ --ml-yellow: #FFD641; --ml-yellow-bg: rgba(255, 214, 65, 0.10); /* ============ COLORS · TIER (MangosLab 独家 4 级评分) ============ */ --ml-tier-s: #97FCE4; /* brand */ --ml-tier-a: #5BA8FF; /* cobalt */ --ml-tier-b: #FF8B4A; /* warm orange */ --ml-tier-c: #6A7282; /* gray */ --ml-tier-s-bg: rgba(151, 252, 228, 0.12); --ml-tier-a-bg: rgba(91, 168, 255, 0.12); --ml-tier-b-bg: rgba(255, 139, 74, 0.12); --ml-tier-c-bg: rgba(106, 114, 130, 0.12); /* ============ TYPOGRAPHY · FONT FAMILIES ============ */ --ml-font-body: 'Inter', 'Noto Sans SC', 'PingFang SC', -apple-system, system-ui, sans-serif; --ml-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; --ml-font-display: 'Inter', sans-serif; /* H1/H2 (same as body, use weight) */ /* ============ TYPOGRAPHY · SIZES (6 levels, 12-32px) ============ */ --ml-fs-xs: 12px; /* badge / tag / footer */ --ml-fs-sm: 13px; /* secondary body / handle */ --ml-fs-md: 14px; /* default body / table cell */ --ml-fs-lg: 18px; /* card title / data emphasis */ --ml-fs-xl: 22px; /* section title */ --ml-fs-2xl: 32px; /* hero / page title */ /* ============ TYPOGRAPHY · WEIGHTS (4 levels) ============ */ --ml-fw-regular: 400; --ml-fw-medium: 500; --ml-fw-semibold: 600; --ml-fw-bold: 700; /* ============ TYPOGRAPHY · LINE HEIGHTS ============ */ --ml-lh-tight: 1.2; /* large display text */ --ml-lh-snug: 1.4; /* card titles */ --ml-lh-normal: 1.5; /* default body */ --ml-lh-relaxed: 1.7; /* long-form body */ /* ============ SPACING (8px baseline + half-step) ============ */ --ml-sp-1: 4px; /* hairline */ --ml-sp-2: 8px; /* baseline */ --ml-sp-3: 12px; /* inline gap */ --ml-sp-4: 16px; /* card padding-y */ --ml-sp-5: 20px; /* card padding-x */ --ml-sp-6: 24px; /* section gap */ --ml-sp-7: 32px; /* large section */ --ml-sp-8: 40px; /* hero spacing */ --ml-sp-9: 48px; /* huge */ --ml-sp-10: 64px; --ml-sp-11: 80px; --ml-sp-12: 96px; /* ============ RADIUS (5 levels) ============ */ --ml-r-sm: 6px; /* tag / button-sm / table cell */ --ml-r-md: 8px; /* button-md / nav item */ --ml-r-lg: 10px; /* table container / card-admin */ --ml-r-xl: 16px; /* card-user / hero */ --ml-r-full: 9999px; /* pill / circle button */ /* ============ SHADOWS ============ */ --ml-sh-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --ml-sh-md: 0 4px 12px rgba(0, 0, 0, 0.40); --ml-sh-lg: 0 12px 32px rgba(0, 0, 0, 0.50); --ml-sh-glow-brand: 0 8px 24px rgba(151, 252, 228, 0.30); --ml-sh-glow-tier-a: 0 8px 24px rgba(91, 168, 255, 0.25); --ml-sh-glow-green: 0 8px 24px rgba(43, 189, 128, 0.25); /* ============ MOTION ============ */ --ml-duration-fast: 150ms; --ml-duration-base: 200ms; --ml-duration-slow: 300ms; --ml-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ml-ease-snappy: cubic-bezier(0.16, 1, 0.3, 1); /* ============ Z-INDEX ============ */ --ml-z-sticky: 10; --ml-z-dropdown: 20; --ml-z-modal: 50; --ml-z-toast: 60; --ml-z-tooltip: 70; /* ============ BREAKPOINTS (used in @media) ============ */ /* Desktop-first; sm = 768, md = 1024, lg = 1280 */ /* ============ LAYER · USER (DEFAULT) ============ */ --ml-fs-body: var(--ml-fs-md); /* 14px */ --ml-r-card: var(--ml-r-xl); /* 16px */ --ml-card-padding: var(--ml-sp-5); /* 20px */ --ml-card-gap: var(--ml-sp-4); /* 16px */ --ml-line-density: var(--ml-lh-normal); } /* ============ LAYER · ADMIN (DENSE) ============ */ [data-layer="admin"] { --ml-fs-body: var(--ml-fs-sm); /* 13px */ --ml-r-card: var(--ml-r-lg); /* 10px */ --ml-card-padding: var(--ml-sp-3); /* 12px */ --ml-card-gap: var(--ml-sp-2); /* 8px */ --ml-line-density: var(--ml-lh-snug); /* 1.4 */ } /* ============================================================ * GLOBAL RESET + BASE * ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--ml-font-body); font-size: var(--ml-fs-body); line-height: var(--ml-line-density); background: var(--ml-bg-0); color: var(--ml-text); font-feature-settings: 'tnum'; /* tabular-nums for aligned digits */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } /* a11y: focus-visible 全局金色 outline */ :focus-visible { outline: 2px solid var(--ml-brand); outline-offset: 2px; border-radius: var(--ml-r-sm); } :focus:not(:focus-visible) { outline: none; } /* a11y: 减少动效偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ * UTILITY CLASSES (常用 helper) * ============================================================ */ /* Text colors */ .ml-text { color: var(--ml-text); } .ml-text-soft { color: var(--ml-text-soft); } .ml-text-body { color: var(--ml-text-body); } .ml-text-muted { color: var(--ml-text-muted); } .ml-text-faint { color: var(--ml-text-faint); } .ml-text-brand { color: var(--ml-brand); } .ml-text-green { color: var(--ml-green); } .ml-text-red { color: var(--ml-red); } /* Layout */ .ml-stack { display: flex; flex-direction: column; } .ml-row { display: flex; flex-direction: row; align-items: center; } .ml-grid { display: grid; } .ml-mono { font-family: var(--ml-font-mono); } /* ============================================================ * V5 设计稿 alias · 让设计稿 markup (.ml-*) 直接可用 * 加在 tokens.css 末尾 · A.1 commit (2026-04-26) · v=v5d-A1 * 顺序: (1) 现有 :root → (2) alias :root → (3) [data-layer="admin"] override * ============================================================ */ :root { --ml-fs-12: var(--ml-fs-xs); --ml-fs-13: var(--ml-fs-sm); --ml-fs-14: var(--ml-fs-md); --ml-fs-18: var(--ml-fs-lg); --ml-fs-22: var(--ml-fs-xl); --ml-fs-32: var(--ml-fs-2xl); --ml-fw-400: var(--ml-fw-regular); --ml-fw-500: var(--ml-fw-medium); --ml-fw-600: var(--ml-fw-semibold); --ml-fw-700: var(--ml-fw-bold); --ml-s-1: var(--ml-sp-1); --ml-s-2: var(--ml-sp-2); --ml-s-3: var(--ml-sp-3); --ml-s-4: var(--ml-sp-4); --ml-s-5: var(--ml-sp-5); --ml-s-6: var(--ml-sp-6); --ml-s-7: var(--ml-sp-7); --ml-s-8: var(--ml-sp-8); --ml-s-9: var(--ml-sp-9); --ml-s-10: var(--ml-sp-10); --ml-s-11: var(--ml-sp-11); --ml-s-12: var(--ml-sp-12); --ml-border: var(--ml-line); --ml-border-strong: var(--ml-line-strong); --ml-font: var(--ml-font-body); --ml-mono: var(--ml-font-mono); --ml-ease: var(--ml-ease-default); --ml-ease-out: var(--ml-ease-snappy); --ml-body-size: var(--ml-fs-14); --ml-card-radius: var(--ml-r-xl); --ml-card-pad: var(--ml-sp-5); --ml-line-height: var(--ml-lh-normal); --ml-sidebar-w: 200px; --ml-sidebar-labels: inline; --ml-container: 1440px; } [data-layer="admin"] { --ml-body-size: var(--ml-fs-13); --ml-card-radius: var(--ml-r-lg); --ml-card-pad: var(--ml-sp-3); --ml-line-height: var(--ml-lh-snug); --ml-sidebar-w: 64px; --ml-sidebar-labels: none; } body { font-size: var(--ml-body-size); line-height: var(--ml-line-height); } .ml-app { display: grid; grid-template-columns: var(--ml-sidebar-w) 1fr; min-height: 100vh; } .ml-card { border-radius: var(--ml-card-radius); padding: var(--ml-card-pad); } .ml-nav-lbl, .ml-logo-text small { display: var(--ml-sidebar-labels); } /* ============================================================ * V5 设计稿 primitives · .ml-btn / .ml-chip / .ml-tier / .ml-w-ring / * .ml-stack / .ml-curated / .ml-pipeline / .ml-spark / .ml-toggle / * .ml-card / .ml-input / .ml-badge / .ml-app / .ml-sidebar / .ml-nav / * .ml-topbar / .ml-content / .ml-row / .ml-stack-v / utility classes * 直接从 _design_ref/v5_design/tokens.css §1.7+ 拷贝 * ============================================================ */ /* ============================================================ Shared primitives ============================================================ */ /* Buttons */ .ml-btn { display: inline-flex; align-items: center; gap: var(--ml-s-2); padding: 7px 14px; font-size: var(--ml-fs-13); font-weight: var(--ml-fw-500); color: var(--ml-text-body); background: var(--ml-bg-3); border: 1px solid var(--ml-border); border-radius: var(--ml-r-md); transition: background 0.16s var(--ml-ease), border-color 0.16s var(--ml-ease), color 0.16s var(--ml-ease); white-space: nowrap; } .ml-btn:hover { background: var(--ml-bg-4); border-color: var(--ml-border-strong); color: var(--ml-text); } .ml-btn.primary { background: var(--ml-brand); color: var(--ml-brand-ink); border-color: var(--ml-brand); font-weight: var(--ml-fw-600); } .ml-btn.primary:hover { background: var(--ml-brand-soft); border-color: var(--ml-brand-soft); } .ml-btn.ghost { background: transparent; border-color: transparent; color: var(--ml-text-muted); } .ml-btn.ghost:hover { color: var(--ml-text); background: var(--ml-bg-4); } .ml-btn.danger { color: var(--ml-red); border-color: rgba(255,73,74,0.3); } .ml-btn.danger:hover { background: rgba(255,73,74,0.08); } .ml-btn.sm { padding: 4px 10px; font-size: var(--ml-fs-12); border-radius: var(--ml-r-sm); } .ml-btn.lg { padding: 10px 18px; font-size: var(--ml-fs-14); } .ml-btn.circle { width: 32px; height: 32px; padding: 0; border-radius: var(--ml-r-full); justify-content: center; } .ml-btn.circle.green { background: var(--ml-green); color: #fff; border-color: var(--ml-green); } .ml-btn.circle.red { background: var(--ml-red); color: #fff; border-color: var(--ml-red); } /* Chip / tag */ .ml-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: var(--ml-fs-12); font-weight: var(--ml-fw-500); color: var(--ml-text-muted); background: transparent; border: 1px solid var(--ml-border-strong); border-radius: var(--ml-r-sm); letter-spacing: 0.01em; } .ml-chip.brand { color: var(--ml-brand); border-color: var(--ml-brand-line); background: var(--ml-brand-glow); } .ml-chip.green { color: var(--ml-green); border-color: rgba(43,189,128,0.3); background: rgba(43,189,128,0.06); } .ml-chip.red { color: var(--ml-red); border-color: rgba(255,73,74,0.3); background: rgba(255,73,74,0.06); } .ml-chip.blue { color: var(--ml-blue); border-color: rgba(14,118,253,0.3); background: rgba(14,118,253,0.06); } /* Tier badge */ .ml-tier { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; font-family: var(--ml-mono); font-size: var(--ml-fs-12); font-weight: var(--ml-fw-700); border-radius: var(--ml-r-sm); letter-spacing: -0.02em; } .ml-tier.s { background: var(--ml-tier-s); color: var(--ml-brand-ink); } .ml-tier.a { background: var(--ml-tier-a); color: #fff; } .ml-tier.b { background: var(--ml-tier-b); color: #fff; } .ml-tier.c { background: var(--ml-tier-c); color: #0a0d12; } .ml-tier.md { min-width: 24px; height: 24px; font-size: var(--ml-fs-13); } .ml-tier.lg { min-width: 32px; height: 32px; font-size: var(--ml-fs-14); } /* non-color cue */ .ml-tier::before { font-size: 0.8em; margin-right: 2px; opacity: 0.85; } .ml-tier.s::before { content: none; } .ml-tier.a::before { content: none; } .ml-tier.b::before { content: none; } .ml-tier.c::before { content: "·"; } /* Watcher ring (L1) */ .ml-watcher { position: relative; display: inline-block; } .ml-w-ring { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #000; flex: none; background: var(--ml-bg-4); } .ml-w-ring.sm { width: 22px; height: 22px; font-size: 9px; } .ml-w-ring.lg { width: 36px; height: 36px; font-size: 13px; } .ml-w-ring.t-S { box-shadow: 0 0 0 2px var(--ml-tier-s); } .ml-w-ring.t-A { box-shadow: 0 0 0 2px var(--ml-tier-a); } .ml-w-ring.t-B { box-shadow: 0 0 0 2px var(--ml-tier-b); } .ml-w-ring.t-C { box-shadow: 0 0 0 2px var(--ml-tier-c); } /* Stacked avatars */ .ml-stack { display: inline-flex; } .ml-stack .ml-w-ring + .ml-w-ring { margin-left: -8px; } .ml-stack.lg .ml-w-ring + .ml-w-ring { margin-left: -10px; } /* SANYI Curated bar (L2) */ .ml-curated { display: inline-flex; align-items: center; gap: var(--ml-s-2); padding: 4px 10px 4px 4px; background: var(--ml-brand-glow); border: 1px solid var(--ml-brand-line); border-radius: var(--ml-r-full); font-size: var(--ml-fs-12); color: var(--ml-text-body); position: relative; } .ml-curated .ml-sanyi-av { width: 22px; height: 22px; border-radius: 50%; background: var(--ml-brand); color: var(--ml-brand-ink); display: grid; place-items: center; font-size: 10px; font-weight: 700; box-shadow: 0 0 0 1.5px var(--ml-brand); } .ml-curated .ml-curated-lbl { color: var(--ml-brand-soft); font-weight: 600; } .ml-curated .ml-curated-time { color: var(--ml-text-faint); font-size: 11px; margin-left: 2px; } .ml-curated-tip { position: absolute; top: calc(100% + 8px); left: 0; width: 320px; padding: var(--ml-s-4); background: var(--ml-bg-3); border: 1px solid var(--ml-border-strong); border-radius: var(--ml-r-md); font-size: var(--ml-fs-13); color: var(--ml-text-body); font-style: italic; line-height: 1.55; box-shadow: var(--ml-sh-md); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.16s var(--ml-ease), transform 0.16s var(--ml-ease); z-index: 20; } .ml-curated:hover .ml-curated-tip { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Pipeline status bar (L3) */ .ml-pipeline { display: flex; align-items: center; gap: var(--ml-s-3); padding: var(--ml-s-3) var(--ml-s-4); background: var(--ml-bg-3); border: 1px solid var(--ml-border); border-radius: var(--ml-r-md); } .ml-pipeline .pp-head { display: flex; align-items: center; gap: 6px; font-size: var(--ml-fs-12); font-weight: 600; color: var(--ml-text-body); padding-right: var(--ml-s-3); border-right: 1px solid var(--ml-border-strong); } .ml-pipeline .pp-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ml-green); animation: ppPulse 2s ease-in-out infinite; } .ml-pipeline .pp-stages { display: flex; align-items: center; gap: var(--ml-s-2); flex: 1; } .ml-pipeline .pp-stage { display: flex; align-items: center; gap: 6px; font-size: var(--ml-fs-12); color: var(--ml-text-muted); } .ml-pipeline .pp-stage .pp-ico { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ml-bg-4); font-size: 10px; } .ml-pipeline .pp-stage.done .pp-ico { background: var(--ml-green); color: #fff; } .ml-pipeline .pp-stage.done { color: var(--ml-text-body); } .ml-pipeline .pp-stage.active .pp-ico { background: transparent; border: 1.5px solid var(--ml-brand); color: var(--ml-brand); animation: ppSpin 1.8s linear infinite; } .ml-pipeline .pp-stage.active { color: var(--ml-brand); font-weight: 600; } .ml-pipeline .pp-stage.pending .pp-ico { border: 1px dashed var(--ml-border-strong); background: transparent; color: var(--ml-text-faint); } .ml-pipeline .pp-arrow { color: var(--ml-text-faint); font-size: 10px; } .ml-pipeline .pp-meta { margin-left: auto; font-size: var(--ml-fs-12); color: var(--ml-text-muted); font-family: var(--ml-mono); } .ml-pipeline .pp-meta b { color: var(--ml-text); font-weight: 600; } @keyframes ppPulse { 0%,100%{opacity:1} 50%{opacity:.4} } @keyframes ppSpin { to { transform: rotate(360deg); } } /* Sparkline (Felix-style: 1.5px stroke, no fill, no glow) */ .ml-spark { display: inline-block; vertical-align: middle; } .ml-spark path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ml-spark.up path { stroke: var(--ml-green); } .ml-spark.down path { stroke: var(--ml-red); } .ml-spark.flat path { stroke: var(--ml-text-faint); } /* Toggle */ .ml-toggle { display: inline-flex; align-items: center; gap: var(--ml-s-2); cursor: pointer; } .ml-toggle .tr { width: 34px; height: 20px; border-radius: var(--ml-r-full); background: var(--ml-bg-4); position: relative; transition: background 0.18s var(--ml-ease); } .ml-toggle .tr::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ml-text-muted); transition: all 0.18s var(--ml-ease); } .ml-toggle.on .tr { background: var(--ml-green); } .ml-toggle.on .tr::after { left: 16px; background: #fff; } /* Card */ .ml-card { background: var(--ml-bg-3); border: 1px solid var(--ml-border); border-radius: var(--ml-card-radius); padding: var(--ml-card-pad); } /* Input */ .ml-input, .ml-select, .ml-textarea { width: 100%; padding: 8px 12px; background: var(--ml-bg-5); border: 1px solid var(--ml-border-strong); border-radius: var(--ml-r-md); font-size: var(--ml-fs-14); color: var(--ml-text); outline: none; transition: border-color 0.16s var(--ml-ease); } .ml-input:focus, .ml-select:focus, .ml-textarea:focus { border-color: var(--ml-brand); } .ml-input::placeholder { color: var(--ml-text-muted); } /* Badge */ .ml-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-size: 11px; font-weight: 500; border-radius: var(--ml-r-sm); background: var(--ml-bg-4); color: var(--ml-text-muted); } .ml-badge.green { background: rgba(43,189,128,0.12); color: var(--ml-green); } .ml-badge.red { background: rgba(255,73,74,0.12); color: var(--ml-red); } .ml-badge.yellow{ background: rgba(255,214,65,0.12); color: var(--ml-yellow); } /* Layout shell */ .ml-app { display: grid; grid-template-columns: var(--ml-sidebar-w) 1fr; min-height: 100vh; } .ml-sidebar { background: var(--ml-bg-1); border-right: 1px solid var(--ml-border); padding: var(--ml-s-4) var(--ml-s-3); display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .ml-nav { display: flex; align-items: center; gap: var(--ml-s-3); padding: 8px 12px; border-radius: var(--ml-r-md); color: var(--ml-text-muted); font-size: var(--ml-fs-13); font-weight: 500; cursor: pointer; transition: color 0.16s var(--ml-ease), background 0.16s var(--ml-ease); } .ml-nav:hover { color: var(--ml-text); background: var(--ml-bg-4); } .ml-nav.active { color: var(--ml-text); background: var(--ml-bg-4); } .ml-nav.active .ml-nav-ico { color: var(--ml-brand); } .ml-nav-ico { width: 18px; height: 18px; flex: none; } .ml-nav-lbl { display: var(--ml-sidebar-labels); } .ml-topbar { height: 56px; display: flex; align-items: center; gap: var(--ml-s-4); padding: 0 var(--ml-s-6); background: var(--ml-bg-2); border-bottom: 1px solid var(--ml-border); position: sticky; top: 0; z-index: 10; } .ml-topbar .sp { flex: 1; } .ml-main { min-width: 0; } .ml-content { padding: var(--ml-s-6); max-width: var(--ml-container); margin: 0 auto; } [data-layer="admin"] .ml-content { padding: var(--ml-s-4); max-width: none; margin: 0; } /* Responsive */ @media (max-width: 1280px) { .ml-rail { display: none; } } @media (max-width: 768px) { [data-layer="user"] .ml-app { grid-template-columns: 1fr; } [data-layer="user"] .ml-sidebar { display: none; } .ml-content { padding: var(--ml-s-4); } } /* Utility */ .ml-row { display: flex; align-items: center; gap: var(--ml-s-2); } .ml-stack-v { display: flex; flex-direction: column; gap: var(--ml-s-3); } .ml-muted { color: var(--ml-text-muted); } .ml-faint { color: var(--ml-text-faint); } .ml-up { color: var(--ml-green); } .ml-down { color: var(--ml-red); } .ml-brand { color: var(--ml-brand); } .ml-nowrap { white-space: nowrap; } .ml-tnum { font-variant-numeric: tabular-nums; } .ml-sp { flex: 1; } /* ========================================================================== * L4-34A · MangosLab Product Design Language v2 token foundation * Authority: mango-design-docs/DESIGN_SYSTEM.md + IMPLEMENTATION_SPEC.md * Mint is the default work theme. Felix is the light review theme. * ========================================================================== */ :root, :root[data-theme="mint"] { color-scheme: dark; --ml-theme-name: "Mint"; --ml-bg-0: #000000; --ml-bg-1: #050605; --ml-bg-2: #0B0D0C; --ml-bg-3: #111514; --ml-bg-4: #18201E; --ml-bg-5: #202A27; --ml-line: rgba(255, 255, 255, 0.10); --ml-line-strong: rgba(255, 255, 255, 0.18); --ml-line-soft: rgba(255, 255, 255, 0.06); --ml-text: #FFFFFF; --ml-text-2: rgba(255, 255, 255, 0.78); --ml-text-3: rgba(255, 255, 255, 0.55); --ml-text-4: rgba(255, 255, 255, 0.34); --ml-text-disabled: rgba(255, 255, 255, 0.26); --ml-brand: #97FCE4; --ml-brand-rgb: 151, 252, 228; --ml-brand-2: #60D8BF; --ml-brand-ink: #03221A; --ml-brand-bg: rgba(151, 252, 228, 0.11); --ml-brand-line: rgba(151, 252, 228, 0.28); --ml-green: #75E6B8; --ml-red: #FF7B8A; --ml-orange: #FFB86C; --ml-blue: #75A7FF; --ml-purple: #A78BFA; --ml-tier-s: #97FCE4; --ml-tier-s-rgb: 151, 252, 228; --ml-tier-a: #75A7FF; --ml-tier-a-rgb: 117, 167, 255; --ml-tier-b: #FFB86C; --ml-tier-b-rgb: 255, 184, 108; --ml-tier-c: rgba(255, 255, 255, 0.62); --ml-tier-c-rgb: 255, 255, 255; --ml-tier-s-bg: rgba(151, 252, 228, 0.13); --ml-tier-a-bg: rgba(117, 167, 255, 0.13); --ml-tier-b-bg: rgba(255, 184, 108, 0.13); --ml-tier-c-bg: rgba(255, 255, 255, 0.08); --ml-tier-s-line: rgba(151, 252, 228, 0.30); --ml-tier-a-line: rgba(117, 167, 255, 0.30); --ml-tier-b-line: rgba(255, 184, 108, 0.30); --ml-tier-c-line: rgba(255, 255, 255, 0.16); --ml-sem-l2: #A78BFA; --ml-sem-l2-rgb: 167, 139, 250; --ml-sem-l2-bg: rgba(167, 139, 250, 0.13); --ml-sem-l2-line: rgba(167, 139, 250, 0.32); --ml-shadow-elev: 0 18px 48px rgba(0, 0, 0, 0.42); --ml-shadow-glow: 0 0 0 1px rgba(var(--ml-brand-rgb), 0.10), 0 0 28px rgba(var(--ml-brand-rgb), 0.12); --ml-shadow-overlay: 0 24px 80px rgba(0, 0, 0, 0.54); --ml-font-display: "Inter Tight", "Noto Sans SC", Inter, system-ui, sans-serif; --ml-font-body: Inter, "Noto Sans SC", system-ui, -apple-system, sans-serif; --ml-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ml-font-serif: "Instrument Serif", Georgia, serif; --ml-fs-10: 10px; --ml-fs-11: 11px; --ml-fs-12: 12px; --ml-fs-13: 13px; --ml-fs-14: 14px; --ml-fs-16: 16px; --ml-fs-20: 20px; --ml-fs-24: 24px; --ml-fs-32: 32px; --ml-r-3: 3px; --ml-r-6: 6px; --ml-r-8: 8px; --ml-r-10: 10px; --ml-r-12: 12px; --ml-r-pill: 999px; --ml-dur-fast: 120ms; --ml-dur-base: 180ms; --ml-dur-slow: 320ms; --ml-dur-enter: 480ms; --ml-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ml-ease: var(--ml-ease-out); } :root[data-theme="felix"] { color-scheme: light; --ml-theme-name: "Felix"; --ml-bg-0: #F4F2EC; --ml-bg-1: #FBFAF7; --ml-bg-2: #FFFFFF; --ml-bg-3: #F0EEE7; --ml-bg-4: #E7E3DA; --ml-bg-5: #DDD7CA; --ml-line: rgba(15, 18, 22, 0.12); --ml-line-strong: rgba(15, 18, 22, 0.20); --ml-line-soft: rgba(15, 18, 22, 0.07); --ml-text: #0B0E12; --ml-text-2: rgba(11, 14, 18, 0.76); --ml-text-3: rgba(11, 14, 18, 0.54); --ml-text-4: rgba(11, 14, 18, 0.34); --ml-text-disabled: rgba(11, 14, 18, 0.28); --ml-brand: #0F6B47; --ml-brand-rgb: 15, 107, 71; --ml-brand-2: #138457; --ml-brand-ink: #FFFFFF; --ml-brand-bg: rgba(15, 107, 71, 0.10); --ml-brand-line: rgba(15, 107, 71, 0.24); --ml-green: #0F8A5F; --ml-red: #BC3F54; --ml-orange: #A35D18; --ml-blue: #2B5FBC; --ml-purple: #6D3CBF; --ml-tier-s: #0F6B47; --ml-tier-s-rgb: 15, 107, 71; --ml-tier-a: #2B5FBC; --ml-tier-a-rgb: 43, 95, 188; --ml-tier-b: #A35D18; --ml-tier-b-rgb: 163, 93, 24; --ml-tier-c: rgba(11, 14, 18, 0.62); --ml-tier-c-rgb: 11, 14, 18; --ml-tier-s-bg: rgba(15, 107, 71, 0.11); --ml-tier-a-bg: rgba(43, 95, 188, 0.11); --ml-tier-b-bg: rgba(163, 93, 24, 0.11); --ml-tier-c-bg: rgba(11, 14, 18, 0.07); --ml-tier-s-line: rgba(15, 107, 71, 0.28); --ml-tier-a-line: rgba(43, 95, 188, 0.28); --ml-tier-b-line: rgba(163, 93, 24, 0.28); --ml-tier-c-line: rgba(11, 14, 18, 0.15); --ml-sem-l2: #6D3CBF; --ml-sem-l2-rgb: 109, 60, 191; --ml-sem-l2-bg: rgba(109, 60, 191, 0.10); --ml-sem-l2-line: rgba(109, 60, 191, 0.28); --ml-shadow-elev: 0 18px 42px rgba(44, 37, 25, 0.12); --ml-shadow-glow: 0 0 0 1px rgba(var(--ml-brand-rgb), 0.08), 0 16px 36px rgba(var(--ml-brand-rgb), 0.10); --ml-shadow-overlay: 0 24px 72px rgba(44, 37, 25, 0.22); } :root, :root[data-theme="mint"], :root[data-theme="felix"] { --ml-border: var(--ml-line); --ml-border-strong: var(--ml-line-strong); --ml-border-soft: var(--ml-line-soft); --ml-text-muted: var(--ml-text-2); --ml-text-faint: var(--ml-text-3); --ml-text-soft: var(--ml-text-4); --ml-card-bg: var(--ml-bg-2); --ml-card-bg-hover: var(--ml-bg-3); --ml-radius: var(--ml-r-10); --ml-radius-sm: var(--ml-r-6); --ml-radius-lg: var(--ml-r-12); --font-sans: var(--ml-font-body); --font-display: var(--ml-font-display); --font-mono: var(--ml-font-mono); --mango: var(--ml-brand); --mango-rgb: var(--ml-brand-rgb); --ink-on-mint: var(--ml-brand-ink); --sig-l2: var(--ml-sem-l2); --sig-l2-bg: var(--ml-sem-l2-bg); --sig-l2-border: var(--ml-sem-l2-line); } html { background: var(--ml-bg-0); color: var(--ml-text); font-family: var(--ml-font-body); } body { background: var(--ml-bg-0); color: var(--ml-text); font-family: var(--ml-font-body); letter-spacing: 0; } .lat { font-family: var(--ml-font-display); } .num { font-variant-numeric: tabular-nums; } .mono { font-family: var(--ml-font-mono); } .ml-tier::before, .tier::before { content: none !important; } .ml-tier.s, .tier-S, .tier[data-tier="S"] { color: var(--ml-tier-s) !important; background: var(--ml-tier-s-bg) !important; border-color: var(--ml-tier-s-line) !important; } .ml-tier.a, .tier-A, .tier[data-tier="A"] { color: var(--ml-tier-a) !important; background: var(--ml-tier-a-bg) !important; border-color: var(--ml-tier-a-line) !important; } .ml-tier.b, .tier-B, .tier[data-tier="B"] { color: var(--ml-tier-b) !important; background: var(--ml-tier-b-bg) !important; border-color: var(--ml-tier-b-line) !important; } .ml-tier.c, .tier-C, .tier[data-tier="C"] { color: var(--ml-tier-c) !important; background: var(--ml-tier-c-bg) !important; border-color: var(--ml-tier-c-line) !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; scroll-behavior: auto !important; } }