/* * 存单数据平台 · Design System * shadcn-vue token convention + institutional fintech palette * 默认深色（trading terminal），支持浅色切换（data-theme="light"） */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ============================================================ * Color tokens (HSL components — match shadcn convention) * Usage: hsl(var(--primary)) or hsl(var(--primary) / 0.5) * ============================================================ */ :root, :root[data-theme="dark"] { /* Surfaces */ --background: 222 47% 5%; /* page bg — near-black */ --foreground: 210 40% 96%; /* primary text */ --surface-1: 222 40% 8%; /* nav, sticky bars */ --surface-2: 220 35% 11%; /* cards */ --surface-3: 220 30% 15%; /* elevated, hover */ --surface-inset: 222 50% 4%; /* table stripe / input bg */ --muted: 220 25% 14%; --muted-foreground: 215 16% 60%; --card: 220 35% 9%; --card-foreground: 210 40% 96%; --popover: 220 35% 11%; --popover-foreground: 210 40% 96%; /* Brand / interactive */ --primary: 210 95% 60%; /* institutional blue */ --primary-foreground: 222 47% 5%; --accent: 200 95% 55%; /* link / focus accent */ --accent-foreground: 222 47% 5%; /* Borders + inputs */ --border: 220 25% 18%; --border-strong: 220 25% 26%; --input: 220 30% 13%; --ring: 210 95% 60%; /* Semantic — finance "ticker" colors (CN convention: 红涨绿跌 optional via .ticker-cn) */ --up: 160 70% 45%; /* Bloomberg teal-green (price up) */ --up-foreground: 222 47% 5%; --down: 0 75% 60%; /* coral-red (price down) */ --down-foreground: 222 47% 5%; --neutral: 215 16% 60%; --highlight: 42 95% 58%; /* amber for "live"/alerts/ticker scroll */ /* Status */ --success: 160 70% 45%; --success-foreground: 222 47% 5%; --warning: 42 95% 58%; --warning-foreground: 222 47% 5%; --destructive: 0 75% 60%; --destructive-foreground: 0 0% 100%; --info: 210 95% 60%; --info-foreground: 222 47% 5%; /* Tier badge colors */ --tier-free: 215 16% 50%; --tier-basic: 200 70% 55%; --tier-pro: 260 70% 65%; --tier-ultra: 42 95% 58%; } /* Light theme — override on */ :root[data-theme="light"] { --background: 0 0% 100%; --foreground: 222 47% 11%; --surface-1: 210 25% 98%; --surface-2: 0 0% 100%; --surface-3: 210 20% 95%; --surface-inset: 210 25% 97%; --muted: 210 20% 94%; --muted-foreground: 220 9% 40%; --card: 0 0% 100%; --card-foreground: 222 47% 11%; --popover: 0 0% 100%; --popover-foreground: 222 47% 11%; --primary: 210 95% 45%; --primary-foreground: 0 0% 100%; --accent: 200 95% 42%; --accent-foreground: 0 0% 100%; --border: 214 32% 88%; --border-strong: 214 28% 76%; --input: 214 32% 92%; --ring: 210 95% 45%; --up: 158 60% 35%; --down: 0 70% 50%; --neutral: 220 9% 40%; --highlight: 35 95% 45%; --success: 158 60% 35%; --success-foreground: 0 0% 100%; --warning: 35 95% 45%; --warning-foreground: 0 0% 100%; --destructive: 0 75% 50%; --destructive-foreground: 0 0% 100%; --info: 210 95% 45%; --info-foreground: 0 0% 100%; } /* ============================================================ * Typography, spacing, radius, shadow, motion tokens * ============================================================ */ :root { --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Menlo", Consolas, monospace; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; /* dense default — institutional UI is small */ --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; --text-4xl: 40px; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --radius-xs: 2px; --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; --shadow-0: none; --shadow-1: 0 1px 2px hsl(0 0% 0% / 0.30); --shadow-2: 0 4px 12px hsl(0 0% 0% / 0.35), 0 1px 2px hsl(0 0% 0% / 0.20); --shadow-3: 0 12px 32px hsl(0 0% 0% / 0.45), 0 2px 6px hsl(0 0% 0% / 0.25); --shadow-ring: 0 0 0 3px hsl(var(--ring) / 0.30); --motion-fast: 80ms; --motion: 150ms; --motion-slow: 250ms; --easing: cubic-bezier(0.4, 0, 0.2, 1); --easing-out: cubic-bezier(0, 0, 0.2, 1); --nav-h: 60px; --tier-strip-h: 28px; --container-max: 1440px; --container-narrow: 1080px; --z-base: 1; --z-sticky: 30; --z-nav: 40; --z-dropdown: 60; --z-overlay: 80; --z-modal: 90; --z-toast: 100; } /* ============================================================ * Base reset + global * ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { color-scheme: dark; } :root[data-theme="light"] html { color-scheme: light; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); background: hsl(var(--background)); color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01", "ss03"; } /* Tabular figures globally on numbers */ .num, .mono, td.num, th.num, .ticker, .price, .pct, input[type="number"] { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); } a { color: hsl(var(--accent)); text-decoration: none; transition: color var(--motion) var(--easing); } a:hover { color: hsl(var(--accent) / 0.85); } ::selection { background: hsl(var(--primary) / 0.30); color: hsl(var(--foreground)); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: hsl(var(--surface-inset)); } ::-webkit-scrollbar-thumb { background: hsl(var(--border-strong)); border-radius: var(--radius-full); border: 2px solid hsl(var(--surface-inset)); } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); } /* Focus ring — keyboard only */ :focus { outline: none; } :focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ * Layout primitives * ============================================================ */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-6); } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .stack-sm { display: flex; flex-direction: column; gap: var(--space-2); } .row { display: flex; align-items: center; gap: var(--space-3); } .row-sm { display: flex; align-items: center; gap: var(--space-2); } .row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .spacer { flex: 1; } .divider { height: 1px; background: hsl(var(--border)); margin: var(--space-4) 0; } .divider-v { width: 1px; align-self: stretch; background: hsl(var(--border)); margin: 0 var(--space-3); } .section-title { font-size: var(--text-md); font-weight: 600; color: hsl(var(--foreground)); letter-spacing: 0.01em; margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); } .section-title .meta { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); font-weight: 400; } .eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--muted-foreground)); font-weight: 600; } .muted { color: hsl(var(--muted-foreground)); } .text-up { color: hsl(var(--up)); } .text-down { color: hsl(var(--down)); } .text-warn { color: hsl(var(--warning)); } .text-dim { color: hsl(var(--muted-foreground)); } /* ============================================================ * Top navigation shell * ============================================================ */ .app-nav { position: sticky; top: 0; z-index: var(--z-nav); height: var(--nav-h); background: hsl(var(--surface-1)); border-bottom: 1px solid hsl(var(--border)); display: flex; align-items: center; padding: 0 var(--space-5); } .app-nav .brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-lg); color: hsl(var(--foreground)); letter-spacing: -0.005em; margin-right: var(--space-6); } .app-nav .brand .brand-mark { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-family: var(--font-mono); font-size: 11px; font-weight: 700; } .app-nav .nav-items { display: flex; align-items: center; gap: 4px; height: 100%; } .app-nav .nav-item { position: relative; height: 100%; display: inline-flex; align-items: center; padding: 0 var(--space-4); font-size: 15px; font-weight: 500; color: hsl(var(--muted-foreground)); cursor: pointer; border-bottom: 2px solid transparent; transition: color var(--motion) var(--easing), border-color var(--motion) var(--easing); } .app-nav .nav-item:hover { color: hsl(var(--foreground)); } .app-nav .nav-item.active { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--primary)); } .app-nav .nav-dropdown { position: relative; height: 100%; } .app-nav .nav-dropdown .nav-item::after { content: ""; display: inline-block; margin-left: 6px; border: 3px solid transparent; border-top-color: currentColor; transform: translateY(2px); } .app-nav .nav-dropdown .dropdown-panel { position: absolute; top: 100%; left: 0; min-width: 180px; background: hsl(var(--popover)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: var(--space-1); display: none; z-index: var(--z-dropdown); } .app-nav .nav-dropdown:hover .dropdown-panel, .app-nav .nav-dropdown:focus-within .dropdown-panel, .app-nav .nav-dropdown.is-open .dropdown-panel { display: block; } .app-nav .dropdown-panel a { display: block; padding: var(--space-2) var(--space-3); font-size: var(--text-md); color: hsl(var(--muted-foreground)); border-radius: var(--radius-sm); white-space: nowrap; } .app-nav .dropdown-panel a:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); } .app-nav .dropdown-panel a.active { color: hsl(var(--foreground)); } .app-nav .nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); } .kbd { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border-radius: var(--radius-sm); background: hsl(var(--surface-3)); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); border-bottom-width: 2px; } .cmdk-trigger { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 8px 4px 10px; font-size: var(--text-sm); background: hsl(var(--surface-3)); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); cursor: pointer; transition: all var(--motion) var(--easing); } .cmdk-trigger:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); } .user-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 10px 4px 6px; font-size: var(--text-sm); color: hsl(var(--foreground)); cursor: pointer; border-radius: var(--radius); } .user-chip:hover { background: hsl(var(--muted)); } .user-avatar { width: 22px; height: 22px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; color: hsl(var(--background)); font-size: 11px; font-weight: 700; font-family: var(--font-mono); } /* ============================================================ * Tier status strip (slim, top of page below nav) * ============================================================ */ .tier-strip { height: var(--tier-strip-h); display: flex; align-items: center; justify-content: center; gap: var(--space-3); font-size: var(--text-xs); font-weight: 500; background: hsl(var(--surface-2)); border-bottom: 1px solid hsl(var(--border)); } .tier-strip .strip-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; } .tier-strip a { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .tier-strip.is-trial { color: hsl(var(--info)); } .tier-strip.is-grace { color: hsl(var(--warning)); } .tier-strip.is-expiring { color: hsl(var(--destructive)); } .tier-strip.is-free { color: hsl(var(--muted-foreground)); } /* ============================================================ * Page header + breadcrumb * ============================================================ */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 0 var(--space-4); } .page-head h1 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.005em; } .page-head .page-meta { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); margin-top: var(--space-1); } .breadcrumb { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: hsl(var(--muted-foreground)); margin-bottom: var(--space-2); } .breadcrumb .crumb-sep { opacity: 0.5; } .breadcrumb a { color: hsl(var(--muted-foreground)); } .breadcrumb a:hover { color: hsl(var(--foreground)); } /* ============================================================ * Card * ============================================================ */ .card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); color: hsl(var(--card-foreground)); } .card-header { padding: var(--space-3) var(--space-4); border-bottom: 1px solid hsl(var(--border)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .card-header .card-title { font-size: var(--text-md); font-weight: 600; } .card-header .card-subtitle { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); } .card-body { padding: var(--space-4); } .card-body.flush { padding: 0; } .card-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid hsl(var(--border)); } .card.elevated { box-shadow: var(--shadow-1); } .card.is-interactive { cursor: pointer; transition: border-color var(--motion) var(--easing), background var(--motion) var(--easing); } .card.is-interactive:hover { border-color: hsl(var(--border-strong)); background: hsl(var(--surface-3)); } /* ============================================================ * Button * ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: inherit; font-size: var(--text-sm); font-weight: 500; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius); border: 1px solid hsl(var(--border)); background: hsl(var(--surface-2)); color: hsl(var(--foreground)); cursor: pointer; user-select: none; transition: background var(--motion) var(--easing), border-color var(--motion) var(--easing), color var(--motion) var(--easing), transform var(--motion-fast) var(--easing); text-decoration: none; white-space: nowrap; } .btn:hover { background: hsl(var(--surface-3)); border-color: hsl(var(--border-strong)); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); } .btn-primary:hover { background: hsl(var(--primary) / 0.88); border-color: hsl(var(--primary) / 0.88); color: hsl(var(--primary-foreground)); } .btn-ghost { background: transparent; border-color: transparent; color: hsl(var(--muted-foreground)); } .btn-ghost:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); } .btn-outline { background: transparent; border-color: hsl(var(--border-strong)); } .btn-outline:hover { background: hsl(var(--muted)); } .btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); border-color: hsl(var(--destructive)); } .btn-destructive:hover { background: hsl(var(--destructive) / 0.85); border-color: hsl(var(--destructive) / 0.85); color: hsl(var(--destructive-foreground)); } .btn-success { background: hsl(var(--success)); color: hsl(var(--success-foreground)); border-color: hsl(var(--success)); } .btn-success:hover { background: hsl(var(--success) / 0.88); border-color: hsl(var(--success) / 0.88); color: hsl(var(--success-foreground)); } .btn-sm { height: 26px; padding: 0 var(--space-2); font-size: var(--text-xs); border-radius: var(--radius-sm); } .btn-lg { height: 40px; padding: 0 var(--space-5); font-size: var(--text-md); border-radius: var(--radius-md); } .btn-icon { width: 32px; padding: 0; } .btn-block { width: 100%; } .btn-group { display: inline-flex; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:first-child { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); margin-left: 0; } .btn-group .btn:last-child { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); } .btn-group .btn.active { background: hsl(var(--surface-3)); color: hsl(var(--foreground)); border-color: hsl(var(--border-strong)); z-index: 1; } /* ============================================================ * Form controls * ============================================================ */ .label, label.label, label.field-label { display: block; font-size: var(--text-xs); font-weight: 500; color: hsl(var(--muted-foreground)); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .input, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"], textarea, select { width: 100%; height: 32px; padding: 0 10px; font: inherit; background: hsl(var(--input)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); transition: border-color var(--motion) var(--easing), box-shadow var(--motion) var(--easing); } textarea { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; line-height: var(--leading-normal); } select { padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, hsl(var(--muted-foreground)) 50%), linear-gradient(135deg, hsl(var(--muted-foreground)) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; appearance: none; } .input:focus, input:focus, textarea:focus, select:focus { border-color: hsl(var(--ring)); box-shadow: var(--shadow-ring); outline: none; } .input::placeholder, input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground) / 0.7); } .input:disabled, input:disabled, textarea:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; } .input-group { display: flex; align-items: stretch; } .input-group > .input, .input-group > input, .input-group > select { border-radius: 0; margin-left: -1px; } .input-group > *:first-child { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); margin-left: 0; } .input-group > *:last-child { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); } .input-addon { display: inline-flex; align-items: center; padding: 0 10px; background: hsl(var(--surface-3)); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); font-size: var(--text-sm); } .form-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; } .form-field { display: flex; flex-direction: column; min-width: 140px; } .form-field.flex1 { flex: 1; } .form-help { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); margin-top: 4px; } .form-error { font-size: var(--text-xs); color: hsl(var(--destructive)); margin-top: 4px; } /* Switch + checkbox */ input[type="checkbox"], input[type="radio"] { width: 14px; height: 14px; accent-color: hsl(var(--primary)); } /* ============================================================ * Table * ============================================================ */ .table-wrap { border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); overflow: hidden; background: hsl(var(--card)); } .table-scroll { overflow: auto; max-height: 100%; } .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .table thead th { position: sticky; top: 0; z-index: 1; background: hsl(var(--surface-2)); color: hsl(var(--muted-foreground)); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 12px; text-align: left; border-bottom: 1px solid hsl(var(--border)); } .table tbody td { padding: 8px 12px; border-bottom: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); vertical-align: middle; } .table tbody tr { transition: background var(--motion-fast) var(--easing); } .table tbody tr:hover { background: hsl(var(--surface-3) / 0.6); } .table tbody tr:focus-within { background: hsl(var(--surface-3)); outline: 1px solid hsl(var(--ring)); outline-offset: -1px; } .table.is-striped tbody tr:nth-child(odd) { background: hsl(var(--surface-inset) / 0.6); } .table.is-dense th, .table.is-dense td { padding: 6px 10px; font-size: var(--text-xs); } .table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; } .table th.center, .table td.center { text-align: center; } .table tbody tr.is-selected { background: hsl(var(--primary) / 0.10); } .col-toggle-pop { display: flex; flex-direction: column; gap: 4px; padding: var(--space-2); font-size: var(--text-sm); } .col-toggle-pop label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; } .col-toggle-pop label:hover { background: hsl(var(--muted)); } /* ============================================================ * Badge * ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; font-weight: 500; border-radius: var(--radius-sm); height: 18px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); } .badge-up { background: hsl(var(--up) / 0.14); color: hsl(var(--up)); border-color: hsl(var(--up) / 0.30); } .badge-down { background: hsl(var(--down) / 0.14); color: hsl(var(--down)); border-color: hsl(var(--down) / 0.30); } .badge-info { background: hsl(var(--info) / 0.14); color: hsl(var(--info)); border-color: hsl(var(--info) / 0.30); } .badge-warn { background: hsl(var(--warning) / 0.14); color: hsl(var(--warning)); border-color: hsl(var(--warning) / 0.30); } .badge-success { background: hsl(var(--success) / 0.14); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.30); } .badge-destructive { background: hsl(var(--destructive) / 0.14); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.30); } .badge-outline { background: transparent; } .badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; display: inline-block; } .tier-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; } .tier-badge.t-free { background: hsl(var(--tier-free) / 0.14); color: hsl(var(--tier-free)); border-color: hsl(var(--tier-free) / 0.35); } .tier-badge.t-basic { background: hsl(var(--tier-basic) / 0.14); color: hsl(var(--tier-basic)); border-color: hsl(var(--tier-basic) / 0.35); } .tier-badge.t-pro { background: hsl(var(--tier-pro) / 0.14); color: hsl(var(--tier-pro)); border-color: hsl(var(--tier-pro) / 0.35); } .tier-badge.t-ultra { background: hsl(var(--tier-ultra) / 0.14); color: hsl(var(--tier-ultra)); border-color: hsl(var(--tier-ultra) / 0.35); } /* ============================================================ * Tabs * ============================================================ */ .tabs { display: flex; align-items: center; gap: 0; border-bottom: 1px solid hsl(var(--border)); } .tab { position: relative; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: 500; color: hsl(var(--muted-foreground)); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--motion) var(--easing), border-color var(--motion) var(--easing); background: transparent; border-left: 0; border-right: 0; border-top: 0; } .tab:hover { color: hsl(var(--foreground)); } .tab.active { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--primary)); } .segmented { display: inline-flex; background: hsl(var(--surface-2)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 2px; } .segmented button { appearance: none; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); padding: 4px 12px; border-radius: var(--radius-sm); transition: background var(--motion) var(--easing), color var(--motion) var(--easing); } .segmented button:hover { color: hsl(var(--foreground)); } .segmented button.active { background: hsl(var(--surface-3)); color: hsl(var(--foreground)); } /* ============================================================ * Banner / alert / flash * ============================================================ */ .banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid hsl(var(--border)); border-left-width: 3px; border-radius: var(--radius); font-size: var(--text-sm); background: hsl(var(--surface-2)); } .banner-info { border-left-color: hsl(var(--info)); } .banner-success { border-left-color: hsl(var(--success)); } .banner-warning { border-left-color: hsl(var(--warning)); } .banner-error, .banner-destructive { border-left-color: hsl(var(--destructive)); } .flash { margin-bottom: var(--space-3); } /* ============================================================ * Dialog / drawer (markup-only; JS optional) * ============================================================ */ .overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: hsl(0 0% 0% / 0.55); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--motion) var(--easing); } .overlay.is-open { opacity: 1; pointer-events: auto; } .dialog { background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); min-width: 320px; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; } .dialog-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid hsl(var(--border)); display: flex; align-items: center; justify-content: space-between; } .dialog-body { padding: var(--space-5); overflow: auto; } .dialog-footer { padding: var(--space-3) var(--space-5); border-top: 1px solid hsl(var(--border)); display: flex; justify-content: flex-end; gap: var(--space-2); } .drawer { position: fixed; top: 0; bottom: 0; right: 0; z-index: var(--z-modal); width: 420px; max-width: 90vw; background: hsl(var(--popover)); border-left: 1px solid hsl(var(--border)); box-shadow: var(--shadow-3); transform: translateX(100%); transition: transform var(--motion-slow) var(--easing); display: flex; flex-direction: column; } .drawer.is-open { transform: translateX(0); } /* ============================================================ * Toast * ============================================================ */ .toast-region { position: fixed; top: 20px; right: 20px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; } /* 单独使用（不在 region 内）也固定在右上角，避免落地到 body 流末尾 */ .toast { position: fixed; top: 20px; right: 20px; z-index: var(--z-toast); background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); border: 1px solid hsl(var(--border)); border-left: 3px solid hsl(var(--info)); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); min-width: 240px; max-width: 380px; pointer-events: auto; animation: toast-slide-in 0.25s var(--easing-out); } .toast-region > .toast { position: static; top: auto; right: auto; } .toast.toast-success { border-left-color: hsl(var(--success)); } .toast.toast-error { border-left-color: hsl(var(--destructive)); } .toast.toast-warning { border-left-color: hsl(var(--warning)); } @keyframes toast-slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* ============================================================ * Filter tags / chips * ============================================================ */ .filter-tags { display: flex; flex-wrap: wrap; gap: 6px; } .filter-tags:empty { display: none; } .filter-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px; font-size: var(--text-xs); background: hsl(var(--primary) / 0.10); color: hsl(var(--accent)); border: 1px solid hsl(var(--primary) / 0.25); border-radius: var(--radius-sm); } .filter-tag .tag-close { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); cursor: pointer; color: hsl(var(--accent)); } .filter-tag .tag-close:hover { background: hsl(var(--primary) / 0.20); } /* ============================================================ * Pagination * ============================================================ */ .pager { display: flex; align-items: center; gap: var(--space-2); justify-content: center; padding: var(--space-3) 0; font-size: var(--text-sm); } .pager .pager-info { color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; padding: 0 var(--space-2); } .pager .btn { min-width: 32px; } /* ============================================================ * Empty state * ============================================================ */ .empty-state { text-align: center; padding: var(--space-12) var(--space-4); color: hsl(var(--muted-foreground)); } .empty-state .empty-icon { font-size: 28px; margin-bottom: var(--space-2); opacity: 0.6; } .empty-state .empty-title { font-size: var(--text-md); color: hsl(var(--foreground)); margin-bottom: var(--space-1); } /* ============================================================ * Skeleton * ============================================================ */ .skeleton { background: linear-gradient(90deg, hsl(var(--muted)) 0%, hsl(var(--surface-3)) 50%, hsl(var(--muted)) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-sm); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ * KPI tile * ============================================================ */ .kpi-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .kpi { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); } .kpi-label { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.06em; } .kpi-value { font-size: var(--text-2xl); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; letter-spacing: -0.01em; } .kpi-delta { font-size: var(--text-xs); font-variant-numeric: tabular-nums; margin-top: 2px; display: inline-flex; align-items: center; gap: 4px; } .kpi-delta.is-up { color: hsl(var(--up)); } .kpi-delta.is-down { color: hsl(var(--down)); } .kpi-delta.is-flat { color: hsl(var(--muted-foreground)); } /* ============================================================ * Tooltip (CSS-only via [data-tooltip]) * ============================================================ */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: hsl(var(--popover)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); padding: 4px 8px; font-size: var(--text-xs); white-space: nowrap; box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity var(--motion) var(--easing); z-index: var(--z-dropdown); } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; } /* ============================================================ * Status dot * ============================================================ */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); margin-right: 6px; vertical-align: middle; } .status-dot.is-on { background: hsl(var(--up)); box-shadow: 0 0 0 2px hsl(var(--up) / 0.25); } .status-dot.is-off { background: hsl(var(--muted-foreground)); } .status-dot.is-warn { background: hsl(var(--warning)); box-shadow: 0 0 0 2px hsl(var(--warning) / 0.25); } .status-dot.is-error { background: hsl(var(--destructive)); box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.25); } .status-dot.is-pulse { animation: pulse 2.1s var(--easing) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ============================================================ * Code / raw line * ============================================================ */ code, pre, .raw-line, .codeblock { font-family: var(--font-mono); font-size: var(--text-xs); } .raw-line { display: block; padding: 6px 8px; background: hsl(var(--surface-inset)); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-all; line-height: var(--leading-tight); } /* ============================================================ * Sticky bars * ============================================================ */ .sticky-bar { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); background: hsl(var(--surface-1) / 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid hsl(var(--border)); padding: var(--space-3) var(--space-6); } .with-tier .sticky-bar { top: calc(var(--nav-h) + var(--tier-strip-h)); } /* ============================================================ * Utility * ============================================================ */ .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cursor-pointer { cursor: pointer; } .no-underline { text-decoration: none; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } @media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ============================================================ * Admin pages shim (semantic.html, workers.html, etc.) * ============================================================ */ /* page-header (semantic + others) */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 0 var(--space-4); flex-wrap: wrap; } .page-header-left h2 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.005em; } .page-header-left .text-muted { margin-top: var(--space-1); font-size: var(--text-xs); } /* Tab bar */ .tab-bar { display: flex; gap: 0; border-bottom: 1px solid hsl(var(--border)); margin-bottom: var(--space-4); } .tab-btn { appearance: none; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: 500; padding: var(--space-3) var(--space-4); margin-bottom: -1px; color: hsl(var(--muted-foreground)); border-bottom: 2px solid transparent; transition: color var(--motion) var(--easing), border-color var(--motion) var(--easing); } .tab-btn:hover { color: hsl(var(--foreground)); } .tab-btn.active { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--primary)); } .tab-btn .count { display: inline-block; margin-left: 6px; padding: 1px 7px; background: hsl(var(--surface-3)); color: hsl(var(--muted-foreground)); border-radius: var(--radius-full); font-size: 10px; font-family: var(--font-mono); } .tab-btn.active .count { background: hsl(var(--primary) / 0.18); color: hsl(var(--accent)); } /* tab-panel：注意旧模板 (semantic.html) 直接用内联 style 切换 display， 这里不主动隐藏未激活 panel — 由调用方 JS 负责。 */ /* Search bar (semantic) */ .search-bar { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); } .search-bar input[type="text"] { max-width: 360px; } /* Stat pills (monitor / semantic) */ .stat-pills { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); } .stat-pill { display: inline-flex; flex-direction: column; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); min-width: 120px; } .stat-pill .dim { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.06em; } .stat-pill strong, .stat-pill .value, .stat-pill .num { font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; color: hsl(var(--foreground)); font-family: var(--font-mono); margin-top: 2px; } /* Semantic-layer table */ .sem-table, .rel-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .sem-table th, .rel-table th, .sem-table td, .rel-table td { padding: 10px 12px; border-bottom: 1px solid hsl(var(--border)); text-align: left; vertical-align: top; } .sem-table th, .rel-table th { background: hsl(var(--surface-2)); color: hsl(var(--muted-foreground)); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .sem-table tbody tr:hover td, .rel-table tbody tr:hover td { background: hsl(var(--surface-3) / 0.5); } .sql-cell { font-family: var(--font-mono); font-size: 12px; color: hsl(var(--muted-foreground)); } .code-inline { font-family: var(--font-mono); font-size: 12px; background: hsl(var(--surface-3)); padding: 1px 6px; border-radius: var(--radius-xs); color: hsl(var(--foreground)); } /* Expand row / card (semantic) */ .expand-row td { background: hsl(var(--surface-inset)) !important; padding: var(--space-3) var(--space-4); border-top: 1px dashed hsl(var(--border)); } .expand-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-2); } .toggle-icon { display: inline-block; margin-right: 6px; color: hsl(var(--muted-foreground)); transition: transform var(--motion) var(--easing); } [aria-expanded="true"] .toggle-icon, tr[aria-expanded="true"] .toggle-icon { transform: rotate(90deg); } /* Field grid (used in expand views to show fields/columns) */ .field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; margin-top: var(--space-2); } .field-item { padding: 6px 8px; background: hsl(var(--surface-2)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); font-size: var(--text-xs); } .field-item .field-label { font-family: var(--font-mono); color: hsl(var(--foreground)); font-weight: 600; } .field-item .type-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; background: hsl(var(--accent) / 0.12); color: hsl(var(--accent)); border: 1px solid hsl(var(--accent) / 0.30); border-radius: var(--radius-xs); font-size: 10px; font-family: var(--font-mono); } /* Value pill — used to show enum / sample values */ .value-pills { display: flex; flex-wrap: wrap; gap: 4px; } .value-pill { display: inline-flex; align-items: center; font-size: 11px; padding: 1px 7px; border-radius: var(--radius-sm); background: hsl(var(--surface-3)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Type badge (semantic metric/dimension types) */ .type-badge { display: inline-flex; align-items: center; height: 18px; padding: 1px 7px; font-size: 10px; font-weight: 600; border-radius: var(--radius-sm); font-family: var(--font-mono); border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .type-badge.base { background: hsl(var(--info) / 0.14); color: hsl(var(--info)); border-color: hsl(var(--info) / 0.30); } .type-badge.derived { background: hsl(var(--accent) / 0.14); color: hsl(var(--accent)); border-color: hsl(var(--accent) / 0.30); } .type-badge.composite { background: hsl(var(--tier-pro) / 0.14); color: hsl(var(--tier-pro)); border-color: hsl(var(--tier-pro) / 0.30); } .type-badge.categorical { background: hsl(var(--info) / 0.14); color: hsl(var(--info)); border-color: hsl(var(--info) / 0.30); } .type-badge.temporal { background: hsl(var(--warning) / 0.14); color: hsl(var(--warning));border-color: hsl(var(--warning) / 0.30); } .type-badge.numerical { background: hsl(var(--up) / 0.14); color: hsl(var(--up)); border-color: hsl(var(--up) / 0.30); } .type-badge.boolean { background: hsl(var(--tier-pro) / 0.14); color: hsl(var(--tier-pro)); border-color: hsl(var(--tier-pro) / 0.30); } /* page-header heading inside for admin pages without explicit page-head */ main.container > h2:first-child, main.container > h2.page-title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.005em; margin: var(--space-6) 0 var(--space-3); } /* ============================================================ * Mobile breakpoint — iPhone 16 Pro (393px), iPhone 17 (~402px), * Xiaomi 15 (~393px). 触发阈值 768px 覆盖所有现代手机竖屏。 * 原则：横向不溢出、44×44 触摸目标、导航横向滚动 + 关键文案保留。 * ============================================================ */ @media (max-width: 768px) { /* ---- container & body 基线 ---- */ :root { --nav-h: 56px; } html, body { overflow-x: hidden; } .container, .container-narrow { padding: 0 var(--space-4); } main.container { padding: var(--space-3) var(--space-4) var(--space-8); } /* ---- 顶部导航：可横向滚动，品牌仅留 mark + 用户区压缩 ---- */ .app-nav { padding: 0 var(--space-3); gap: var(--space-2); } .app-nav .brand { margin-right: var(--space-3); font-size: var(--text-md); flex-shrink: 0; } .app-nav .brand > span:not(.brand-mark) { display: none; } .app-nav .nav-items { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .app-nav .nav-items::-webkit-scrollbar { display: none; } .app-nav .nav-item { flex-shrink: 0; padding: 0 var(--space-3); font-size: var(--text-md); min-height: 44px; scroll-snap-align: start; } .app-nav .nav-dropdown { flex-shrink: 0; } /* 下拉在移动端展开为下拉菜单（保留点击） */ .app-nav .nav-dropdown .dropdown-panel { position: fixed; left: var(--space-3); right: var(--space-3); top: var(--nav-h); min-width: 0; } /* 命令面板按钮（⌘K）在手机上隐藏 */ .cmdk-trigger { display: none !important; } /* 用户区：保留头像，名字隐藏（仍点开下拉菜单） */ .app-nav .nav-right { gap: 4px; flex-shrink: 0; } .app-nav .user-chip > span:not(.user-avatar) { display: none; } .app-nav .user-chip { padding: 4px 6px; } /* 用户下拉菜单贴近右边缘 */ .app-nav .nav-right .dropdown-panel { right: var(--space-3); left: auto; min-width: 180px; } /* ---- Tier strip / sticky bar ---- */ .tier-strip { font-size: var(--text-xs); padding: 0 var(--space-3); height: auto; min-height: var(--tier-strip-h); flex-wrap: wrap; gap: 6px; } .tier-strip a { padding: 4px 10px; } /* ---- 标题层级缩小 ---- */ h1 { font-size: var(--text-2xl); letter-spacing: -0.01em; } .page-head { padding: var(--space-4) 0 var(--space-3); flex-direction: column; align-items: flex-start; } .page-head h1 { font-size: var(--text-xl); } .page-head .breadcrumb { font-size: var(--text-xs); } .page-head .page-meta { font-size: var(--text-xs); line-height: var(--leading-normal); } /* ---- 表格：admin 页面（users/workers/models/targets/semantic 等）------ 直接让 table 转为可横向滚的 block，原生方案，无需改 HTML */ main.container table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } main.container table thead, main.container table tbody { display: table; width: max-content; min-width: 100%; } main.container table th, main.container table td { padding: 8px 10px; font-size: var(--text-xs); } /* ---- 表单：单列堆叠、触摸尺寸 ---- */ .form-row { gap: var(--space-2); } .form-group, .form-group.flex1 { min-width: 100%; flex: 1 1 100%; } input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="tel"], input[type="date"], input[type="search"], select, textarea { min-height: 44px; font-size: 16px; /* 16px 防 iOS Safari 聚焦缩放 */ } .btn, button.btn, a.btn { min-height: 44px; padding: 0 var(--space-4); font-size: var(--text-md); } .btn-sm { min-height: 36px; padding: 0 var(--space-3); } /* ---- 卡片/网格 ---- */ .filter-card { padding: var(--space-3); } .filter-card .filter-row { gap: var(--space-2); } .filter-card .field, .filter-card .field.flex1, .filter-card .field.compact { min-width: 100%; } /* ---- bill-card（存单查询）------ */ .bill-card { padding: 10px 12px; } .bill-header { gap: var(--space-2); } .bill-amount { width: 100%; margin-left: 0; text-align: right; } /* ---- 卡片头/底通用 ---- */ .card-header { padding: var(--space-3); gap: var(--space-2); flex-wrap: wrap; } .card-body { padding: var(--space-3); } /* ---- result-bar / pager ---- */ .result-bar { flex-direction: column; align-items: flex-start; gap: var(--space-2); } /* ---- 数据网格 ---- */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--space-3); } /* ---- 隐藏次要装饰 ---- */ .text-muted.compact-hidden, .page-meta.compact-hidden { display: none; } /* ---- 闪现消息条 ---- */ .banner, .flash { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); } } /* 超窄屏（≤ 360px，老 Android） */ @media (max-width: 360px) { .container, .container-narrow { padding: 0 var(--space-3); } main.container { padding: var(--space-2) var(--space-3) var(--space-6); } .app-nav .nav-item { padding: 0 10px; font-size: var(--text-sm); } h1, .page-head h1 { font-size: var(--text-lg); } }