:root { --page:#fff; --surface:#f8fafc; --surface-strong:#eff6ff; --text:#0f172a; --muted:#475569; --subtle:#64748b; --border:#e2e8f0; --primary:#2563eb; --primary-hover:#1d4ed8; --success:#15803d; --warning:#b45309; --danger:#b91c1c; --shadow:0 8px 24px rgba(15,23,42,.12); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:var(--surface); font-size:14px; line-height:1.5; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(37,99,235,.3); outline-offset:2px; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.sidebar { display:flex; position:sticky; top:0; height:100vh; flex-direction:column; padding:20px 12px 16px; background:#fff; border-right:1px solid var(--border); }
.logo { display:flex; align-items:center; gap:10px; padding:4px 10px 26px; color:var(--text); font-size:18px; font-weight:700; text-decoration:none; }
.logo-mark { display:grid; width:32px; height:32px; place-items:center; color:#fff; background:var(--primary); border-radius:7px; font-size:15px; }
.side-nav { display:grid; gap:4px; }
.side-nav a { display:flex; min-height:40px; align-items:center; gap:10px; padding:0 10px; color:var(--muted); border-radius:6px; font-weight:600; text-decoration:none; }
.side-nav a:hover { color:var(--text); background:var(--surface); }
.side-nav a.active { color:#1e3a8a; background:var(--surface-strong); }
.side-nav svg { width:18px; height:18px; }
.sidebar-footer { margin-top:auto; padding-top:16px; border-top:1px solid var(--border); }
.workspace-switcher,.profile-button { display:flex; width:100%; align-items:center; gap:9px; padding:7px; color:var(--text); text-align:left; background:#fff; border:0; border-radius:6px; }
.workspace-switcher:hover,.profile-button:hover { background:var(--surface); }
.workspace-switcher span:nth-child(2) { display:grid; min-width:0; flex:1; }
.workspace-switcher strong,.workspace-switcher small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-switcher strong { font-size:13px; }.workspace-switcher small { color:var(--subtle); font-size:12px; }.workspace-switcher svg { width:16px; color:var(--subtle); }
.page { min-width:0; }.topbar { display:flex; min-height:64px; align-items:center; justify-content:space-between; gap:16px; padding:0 32px; background:#fff; border-bottom:1px solid var(--border); }
.breadcrumb,.topbar-actions,.profile-button { display:flex; align-items:center; gap:8px; }.breadcrumb { color:var(--subtle); }.breadcrumb svg,.profile-button svg { width:16px; height:16px; }.breadcrumb strong { color:var(--text); font-weight:600; }.topbar-actions { margin-left:auto; }.profile-button { width:auto; padding:4px 6px; font-size:13px; font-weight:600; }
.avatar { display:inline-grid; width:28px; height:28px; flex:0 0 auto; place-items:center; color:#7c2d12; background:#fed7aa; border-radius:50%; font-size:10px; font-weight:700; }.avatar-blue { color:#1e3a8a; background:#dbeafe; }.avatar-violet { color:#5b21b6; background:#ede9fe; }.avatar-red { color:#991b1b; background:#fee2e2; }
.icon-button,.row-action { display:inline-grid; width:40px; height:40px; place-items:center; color:var(--muted); background:#fff; border:1px solid transparent; border-radius:6px; }.icon-button:hover,.row-action:hover { color:var(--text); background:var(--surface); border-color:var(--border); }.icon-button svg,.row-action svg { width:18px; height:18px; }.menu-button { display:none; }
main { max-width:1200px; margin:0 auto; padding:32px; }.page-heading,.section-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }.page-heading { margin-bottom:32px; }.eyebrow { margin:0 0 6px; color:var(--primary); font-size:12px; font-weight:700; letter-spacing:.04em; }.page-heading h1,.section-header h2 { margin:0; letter-spacing:0; }.page-heading h1 { font-size:32px; line-height:1.25; }.page-heading p:not(.eyebrow),.section-header p { margin:8px 0 0; color:var(--muted); }.button { display:inline-flex; min-height:40px; align-items:center; justify-content:center; gap:8px; padding:0 14px; border:1px solid transparent; border-radius:6px; font-weight:600; }.button svg { width:17px; height:17px; }.button-primary { color:#fff; background:var(--primary); }.button-primary:hover { background:var(--primary-hover); }.button-secondary { color:var(--text); background:#fff; border-color:var(--border); }.button-secondary:hover { background:var(--surface); }
.summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:32px; }.summary-item { padding:20px; background:#fff; border:1px solid var(--border); border-radius:8px; }.summary-item > span { color:var(--muted); }.summary-item strong { display:block; margin:8px 0; font-size:32px; line-height:1; }.summary-item small { display:flex; align-items:center; gap:6px; color:var(--subtle); }.summary-item small svg { width:15px; height:15px; color:var(--success); }.warning-number { color:var(--warning); }
.content-section { margin-top:32px; padding-top:32px; border-top:1px solid var(--border); }.section-header h2 { font-size:20px; }.section-header > a { color:var(--primary); font-weight:600; text-decoration:none; }.filter-bar { display:flex; gap:8px; margin:20px 0 12px; overflow-x:auto; }.filter { min-height:36px; padding:0 10px; color:var(--muted); background:#fff; border:1px solid var(--border); border-radius:6px; font-size:13px; font-weight:600; white-space:nowrap; }.filter span { margin-left:4px; color:var(--subtle); }.filter:hover { color:var(--text); background:var(--surface); }.filter.active { color:#1e3a8a; background:var(--surface-strong); border-color:#bfdbfe; }
.table-wrap { overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:8px; }table { width:100%; border-collapse:collapse; }th,td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--border); }th { color:var(--subtle); background:var(--surface); font-size:12px; font-weight:600; }td { color:var(--muted); }tbody tr:last-child td { border-bottom:0; }tbody tr:hover { background:#fafcff; }td strong { display:block; color:var(--text); font-weight:600; }td small { color:var(--subtle); }.member { display:flex; align-items:center; gap:8px; color:var(--text); }.status { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:999px; font-size:12px; font-weight:600; }.status-active { color:#166534; background:#dcfce7; }.status-review { color:#92400e; background:#fef3c7; }.status-blocked { color:#991b1b; background:#fee2e2; }.row-action { width:32px; height:32px; }.empty-state { padding:48px 24px; text-align:center; }.empty-state > svg { width:28px; height:28px; color:var(--subtle); }.empty-state h3 { margin:12px 0 4px; font-size:16px; }.empty-state p { margin:0 0 16px; color:var(--muted); }
.attention-list { display:grid; gap:0; margin:20px 0 0; padding:0; list-style:none; background:#fff; border:1px solid var(--border); border-radius:8px; }.attention-list li { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:12px; align-items:start; padding:16px; border-bottom:1px solid var(--border); }.attention-list li:last-child { border-bottom:0; }.attention-icon { display:grid; width:32px; height:32px; place-items:center; border-radius:6px; }.attention-icon svg { width:17px; height:17px; }.attention-icon.warning { color:var(--warning); background:#fef3c7; }.attention-icon.info { color:#1d4ed8; background:#dbeafe; }.attention-list strong { display:block; font-size:14px; }.attention-list p { margin:3px 0 0; color:var(--muted); }.text-button { min-height:32px; color:var(--primary); background:transparent; border:0; font-weight:600; }
.modal { width:min(480px,calc(100vw - 32px)); padding:0; color:var(--text); background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); }.modal::backdrop { background:rgba(15,23,42,.35); }.modal form { padding:24px; }.modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:24px; }.modal-header h2 { margin:0; font-size:20px; }.modal-header p { margin:5px 0 0; color:var(--muted); }.form-field { display:grid; gap:7px; margin-bottom:16px; }.form-field label { font-weight:600; }.form-field label span { color:var(--danger); }.form-field input,.form-field select { width:100%; min-height:40px; padding:0 10px; color:var(--text); background:#fff; border:1px solid var(--border); border-radius:6px; }.form-field input::placeholder { color:#94a3b8; }.form-field input[aria-invalid="true"] { border-color:var(--danger); }.field-error { margin:0; color:var(--danger); font-size:12px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }.toast { position:fixed; z-index:20; right:24px; bottom:24px; display:flex; align-items:center; gap:8px; max-width:calc(100vw - 32px); padding:12px 14px; color:#166534; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; box-shadow:var(--shadow); font-weight:600; }.toast svg { width:18px; height:18px; }.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; }
.spin { animation:spin .7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:767px) { .app-shell { display:block; }.sidebar { position:fixed; z-index:30; top:0; left:0; width:min(280px,82vw); transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow); }.sidebar.open { transform:translateX(0); }.menu-button { display:inline-grid; }.topbar { padding:0 16px; }.breadcrumb { display:none; }.profile-button > span:not(.avatar),.profile-button > svg { display:none; }main { padding:24px 16px 40px; }.page-heading { display:grid; gap:16px; margin-bottom:24px; }.page-heading h1 { font-size:28px; }.page-heading .button { width:100%; }.summary-grid { grid-template-columns:1fr; gap:8px; margin-bottom:24px; }.summary-item { padding:16px; }.content-section { margin-top:24px; padding-top:24px; }.section-header { gap:12px; }.section-header h2 { font-size:18px; }.table-wrap { overflow-x:auto; }.table-wrap table { min-width:720px; }.attention-list li { grid-template-columns:32px minmax(0,1fr); }.attention-list .text-button { grid-column:2; justify-self:start; }.form-grid { grid-template-columns:1fr; gap:0; }.toast { right:16px; bottom:16px; } }

/* Keep the embedded product demo visually aligned with the public site. */
:root { --page:#0d0d12; --surface:#14141d; --surface-strong:#262035; --text:#f7f5ff; --muted:#b8b2c9; --subtle:#918ba2; --border:rgba(255,255,255,.12); --primary:#b247f4; --primary-hover:#d155ff; --success:#51dfb1; --warning:#ffd56d; --danger:#ff6a9d; --shadow:0 18px 46px rgba(0,0,0,.38); }
body { background:radial-gradient(circle at 90% 0,rgba(172,62,255,.2),transparent 30%),var(--page); }
.sidebar,.topbar { background:rgba(20,20,29,.9); border-color:var(--border); backdrop-filter:blur(16px); }.logo-mark,.button-primary { background:linear-gradient(115deg,#ff4eaa,#9e39f6); }.side-nav a:hover,.workspace-switcher:hover,.profile-button:hover,.icon-button:hover,.row-action:hover,.button-secondary:hover,.filter:hover { color:var(--text); background:rgba(255,255,255,.08); }.side-nav a.active,.filter.active { color:#fff; background:rgba(178,71,244,.2); border-color:rgba(218,121,255,.35); }.button-secondary,.icon-button,.row-action,.filter,.workspace-switcher,.profile-button { color:var(--text); background:rgba(255,255,255,.04); border-color:var(--border); }.summary-item,.table-wrap,.attention-list,.modal { background:rgba(23,23,32,.92); border-color:var(--border); border-radius:16px; }.summary-item { box-shadow:0 10px 24px rgba(0,0,0,.16); }.content-section { border-color:var(--border); }.eyebrow,.section-header > a,.text-button { color:#dc82ff; }.table-wrap th { background:rgba(255,255,255,.05); }.table-wrap td,.table-wrap th,.attention-list li { border-color:var(--border); }tbody tr:hover { background:rgba(255,255,255,.04); }.attention-icon.info { color:#ceb6ff; background:rgba(178,71,244,.18); }.attention-icon.warning { color:#ffd56d; background:rgba(255,213,109,.12); }.status-active { color:#6af0c4; background:rgba(81,223,177,.12); }.status-review { color:#ffe08b; background:rgba(255,213,109,.12); }.status-blocked { color:#ff91b8; background:rgba(255,106,157,.12); }.modal::backdrop { background:rgba(4,4,8,.72); }.form-field input,.form-field select { color:var(--text); background:rgba(255,255,255,.05); border-color:var(--border); }.toast { color:#8ff3cf; background:#162c28; border-color:rgba(81,223,177,.35); }.avatar { color:#fff; background:linear-gradient(145deg,#ff7bbe,#8a42ef); }.avatar-blue,.avatar-violet,.avatar-red { color:#fff; background:linear-gradient(145deg,#9e39f6,#3e68ed); }