/* Copyright (c) 2024-2026 Jiangsu Cytoderm Intelligent Technology Co., Ltd. SPDX-License-Identifier: LicenseRef-Cytoderm-Proprietary Confidential and proprietary. All rights reserved. */ /* CyboPost design system — a single build-free stylesheet shared by the user app, the admin console and the register page. Light/dark via a data-theme attribute on (falls back to the OS preference). */ :root { --radius: 10px; --radius-sm: 7px; --radius-lg: 16px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1); --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.06); --shadow-lg: 0 16px 48px rgba(16, 24, 40, 0.18); --speed: 0.16s; } /* Light (default) */ :root, :root[data-theme="light"] { --bg: #f7f8fa; --bg-elev: #ffffff; --bg-subtle: #f0f2f5; --bg-hover: #f2f4f7; --fg: #14181f; --fg-muted: #5b6675; --fg-faint: #8a94a3; --line: #e4e8ee; --line-strong: #d3d9e2; --accent: #4f46e5; --accent-fg: #ffffff; --accent-soft: #eef0fe; --ok: #15803d; --ok-soft: #e7f6ec; --warn: #b45309; --warn-soft: #fdf2e3; --err: #dc2626; --err-soft: #fdeceb; --info: #0369a1; --info-soft: #e6f2fb; --ring: rgba(79, 70, 229, 0.35); } /* Dark */ :root[data-theme="dark"] { --bg: #0c0e13; --bg-elev: #14171d; --bg-subtle: #181c23; --bg-hover: #1d222b; --fg: #e7eaef; --fg-muted: #9aa4b2; --fg-faint: #868f9e; /* WCAG AA: ≥4.5:1 on --bg (#0c0e13) */ --line: #242a33; --line-strong: #313844; --accent: #7c75ff; --accent-fg: #0c0e13; --accent-soft: #1d1f3a; --ok: #4ade80; --ok-soft: #14271c; --warn: #fbbf24; --warn-soft: #2a2110; --err: #f87171; --err-soft: #2a1514; --info: #56b6f0; --info-soft: #102330; --ring: rgba(124, 117, 255, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.6); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } * { box-sizing: border-box; } /* `hidden` is a state contract. Component display rules (for example `.gate` and `.workspace`) must never make a hidden element visible again. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--fg); font-size: 14px; line-height: 1.55; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01", "tnum"; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0 0 0.4em; font-weight: 680; letter-spacing: -0.022em; line-height: 1.2; } h1 { font-size: 1.5rem; } h2 { font-size: 1.12rem; } h3 { font-size: 0.98rem; } .muted { color: var(--fg-muted); } .faint { color: var(--fg-faint); } .mono { font-family: var(--mono); } .small { font-size: 0.82rem; } .right { text-align: right; } .nowrap { white-space: nowrap; } .spacer { flex: 1; } .stack { display: flex; flex-direction: column; gap: 0.6rem; } .cluster { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } /* ---------- App shell ---------- */ .shell { display: grid; grid-template-columns: 256px 1fr; grid-template-rows: 100%; height: 100%; } .sidebar { background: var(--bg-subtle); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; } .brand { display: flex; align-items: center; gap: 0.6rem; padding: 1.1rem 1.15rem 0.9rem; font-weight: 720; font-size: 1.08rem; letter-spacing: -0.03em; } .brand .logo { width: 26px; height: 26px; border-radius: 8px; background: #000 url("/favicon.svg") center / 142% no-repeat; color: transparent; /* hide the legacy "C" glyph; the mark is the background */ font-size: 0; box-shadow: var(--shadow-sm); } .nav { display: flex; flex-direction: column; gap: 1px; padding: 0.5rem 0.55rem; overflow-y: auto; } .nav a { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); color: var(--fg-muted); font-size: 0.875rem; font-weight: 530; cursor: pointer; transition: background var(--speed), color var(--speed); } .nav a:hover { background: color-mix(in srgb, var(--bg-hover) 70%, transparent); color: var(--fg); text-decoration: none; } .nav a.active { background: var(--bg-elev); color: var(--fg); font-weight: 620; box-shadow: var(--shadow-sm); } .nav a.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 1.1rem; border-radius: 999px; background: var(--accent); } .nav a.active .ico { color: var(--accent); opacity: 1; } .nav a .ico { width: 18px; text-align: center; opacity: 0.7; } .nav a .badge { margin-left: auto; } .domain-nav-group { margin: 0.35rem 0.55rem 0; padding-top: 0.65rem; border-top: 1px solid var(--line); } .domain-nav { padding: 0; } .domain-nav-state { padding: 0.45rem 0.7rem; color: var(--fg-faint); font-size: 0.78rem; } .domain-nav-retry { margin: 0 0.55rem; padding: 0.45rem 0.7rem; border: 1px solid var(--err); border-radius: var(--radius-sm); background: var(--err-soft); color: var(--err); text-align: left; cursor: pointer; } .nav-sep { margin: 0 0.7rem 0.35rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); } .sidebar-foot { margin-top: auto; padding: 0.8rem 0.9rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--fg-muted); } /* Who-you-are block under the brand in the member workspace sidebar. */ .sidebar-id { display: flex; align-items: center; gap: 0.6rem; margin: 0 0.55rem 0.5rem; padding: 0.55rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); box-shadow: var(--shadow-sm); } .workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .topbar { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 1.2rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-elev) 80%, transparent); backdrop-filter: saturate(1.4) blur(8px); position: sticky; top: 0; z-index: 5; } .topbar { padding: 0.75rem 1.6rem; } .topbar h1 { font-size: 1.15rem; margin: 0; letter-spacing: -0.025em; } .content { padding: 1.8rem 1.6rem 4rem; overflow-y: auto; flex: 1; } .content-narrow { max-width: 960px; margin-inline: auto; width: 100%; } /* ---------- Account workspace home ---------- */ .account-home { display: grid; gap: 1.25rem; } .home-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: var(--radius-lg); background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 38%), linear-gradient(145deg, var(--bg-elev), color-mix(in srgb, var(--accent-soft) 58%, var(--bg-elev))); box-shadow: var(--shadow-sm); } .home-hero::after { content: ""; position: absolute; z-index: -1; width: 11rem; height: 11rem; right: -5rem; bottom: -6rem; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 50%; box-shadow: 0 0 0 2.7rem color-mix(in srgb, var(--accent) 5%, transparent); } .home-hero-copy { max-width: 39rem; } .home-kicker { display: block; margin-bottom: 0.45rem; color: var(--accent); font-family: var(--mono); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.11em; } .home-hero h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: 1.16; letter-spacing: -0.035em; } .home-hero p { max-width: 38rem; margin: 0.75rem 0 0; color: var(--fg-muted); } .home-hero-actions { display: flex; flex: none; flex-direction: column; gap: 0.55rem; } .home-section { padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elev); box-shadow: var(--shadow-sm); } .home-section-head, .home-section-head > div, .home-overview-head, .home-overview-head > div { display: flex; align-items: center; } .home-section-head { justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; } .home-section-head > div { min-width: 0; gap: 0.6rem; } .home-section-head h3, .home-overview-head h3 { margin: 0; font-size: 1rem; letter-spacing: -0.02em; } .home-section-index { color: var(--accent); font-family: var(--mono); font-size: 0.72rem; font-weight: 750; } .home-agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .home-agent-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; width: 100%; min-width: 0; padding: 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-subtle); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--speed), background var(--speed), transform var(--speed), box-shadow var(--speed); } .home-agent-card:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .home-agent-card:focus-visible, .home-quick-list button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .home-agent-card > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; } .home-agent-card strong, .home-agent-card small, .home-quick-list strong, .home-quick-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-agent-card small, .home-quick-list small { color: var(--fg-muted); } .home-agent-mark, .home-overview-icon { display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); } .home-agent-mark { width: 2.2rem; height: 2.2rem; border-radius: 9px; } .home-onboarding-empty { display: grid; justify-items: start; gap: 0.4rem; padding: 1.15rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg-subtle); } .home-onboarding-empty p { margin: 0 0 0.35rem; color: var(--fg-muted); } .home-collaboration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .home-overview-card { display: flex; min-width: 0; flex-direction: column; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-subtle); } .home-overview-head { justify-content: space-between; gap: 0.75rem; } .home-overview-head > div { min-width: 0; gap: 0.55rem; } .home-overview-icon { width: 1.9rem; height: 1.9rem; border-radius: 8px; } .home-overview-card > p { min-height: 2.8em; margin: 0.55rem 0 0.75rem; color: var(--fg-muted); font-size: 0.86rem; } .home-quick-list { display: flex; min-height: 7.4rem; flex-direction: column; gap: 0.35rem; } .home-quick-list > button { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-width: 0; padding: 0.55rem 0.6rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; } .home-quick-list > button:hover { background: var(--bg-hover); } .home-quick-list > button > span:first-child { display: flex; min-width: 0; flex: 1; flex-direction: column; } .home-quick-empty { display: grid; flex: 1; place-items: center; min-height: 5rem; color: var(--fg-faint); font-size: 0.86rem; text-align: center; } .home-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.46rem 0.85rem; border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--fg); border-radius: var(--radius-sm); font: inherit; font-weight: 550; cursor: pointer; transition: background var(--speed), border-color var(--speed), transform var(--speed), box-shadow var(--speed); white-space: nowrap; } .btn:hover { background: var(--bg-hover); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .btn[disabled] { opacity: 0.55; cursor: not-allowed; } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .btn.primary:hover { filter: brightness(1.07); background: var(--accent); } .btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--bg-hover); } .btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--line)); } .btn.danger:hover { background: var(--err-soft); } .btn.sm { padding: 0.28rem 0.6rem; font-size: 0.82rem; } .btn.icon { padding: 0.4rem; width: 34px; height: 34px; } /* ---------- Language picker (custom, content-sized, no native