/* ============================================================ BrainzLab APP — design system (console / product UI) Distinct from the marketing system: denser, flatter, calmer. Dark-first WITH a full light mode. Set data-theme on . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Archivo:wght@400;500;600;700&family=DM+Sans:wght@400;500;700&display=swap'); :root { /* Consumidos del @theme de Tailwind — NO redefinir aqui. Un solo vocabulario de tokens: lo que una marca sobreescribe alli, llega hasta aqui sin nada que sincronizar. */ --af-display: var(--font-display); --af-sans: var(--font-sans); --af-mono: var(--font-mono); /* brand accent (primary actions) — constant across themes */ --brand: var(--color-brand); --brand-600: var(--color-brand-600); --brand-700: var(--color-brand-700); --brand-300: var(--color-brand-300); --cyan: var(--color-brand-secondary); /* DATA-VIZ — categorical (work on dark + light) */ --dv-1: #7C3AED; --dv-2: #22D3EE; --dv-3: #10B981; --dv-4: #F59E0B; --dv-5: #F43F5E; --dv-6: #3B82F6; --dv-7: #A78BFA; --dv-8: #F97316; /* sequential (violet) + diverging anchors */ --seq-1:#EDE9FE; --seq-2:#C4B5FD; --seq-3:#A78BFA; --seq-4:#7C3AED; --seq-5:#5B21B6; --div-lo:#F43F5E; --div-mid:#94A3B8; --div-hi:#10B981; /* SEMANTIC status (constant) */ --ok: #10B981; --warn: #F59E0B; --error: #F43F5E; --info: #22D3EE; --muted: #94A3B8; /* radii — tighter than marketing */ --ar-xs: 4px; --ar-sm: 6px; --ar-md: 8px; --ar-lg: 12px; --ar-pill: 999px; /* type scale — product density */ --at-h1: 22px; --at-h2: 18px; --at-h3: 15px; --at-h4: 13px; --at-body: 14px; --at-sm: 12.5px; --at-xs: 11px; --at-micro: 10.5px; /* density (table rows) */ --row-compact: 32px; --row-comfortable: 42px; --row-h: var(--row-comfortable); /* spacing (4px grid) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --topbar-h: 52px; --rail-w: 60px; --sidebar-w: 232px; } /* ── DARK theme (default) ─────────────────────────────────── */ [data-theme="dark"] { /* Las superficies se TINEN con la marca en un porcentaje acotado: una marca calida da grises calidos y una fria, frios. El contraste queda anclado al gris base, asi que ninguna marca puede volverse ilegible — que era la razon de no exponer estos tokens en crudo. */ --bg: color-mix(in srgb, var(--color-brand) 5%, #0A0B11); --bg-rail: color-mix(in srgb, var(--color-brand) 7%, #0C0D14); --surface: color-mix(in srgb, var(--color-brand) 6%, #12131C); --surface-2: color-mix(in srgb, var(--color-brand) 9%, #171826); --surface-3: color-mix(in srgb, var(--color-brand) 10%, #1E2031); --border: rgba(255,255,255,.07); --border-2: rgba(255,255,255,.12); --border-strong: rgba(255,255,255,.2); --text: #E7E9EE; --text-2: #9AA3B4; --text-muted: #646C7E; --accent: var(--brand-300); --accent-ink: var(--brand-300); /* Derivadas de la marca. Antes eran morado escrito a mano, asi que una marca nueva dejaba la fila activa del sidebar con texto nuevo sobre fondo morado — un tema a medias. */ --accent-soft: color-mix(in srgb, var(--color-brand) 16%, transparent); --accent-border: color-mix(in srgb, var(--color-brand) 34%, transparent); --shadow: 0 8px 28px rgba(0,0,0,.45); --shadow-lg: 0 24px 64px rgba(0,0,0,.55); --skeleton: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 37%, rgba(255,255,255,.04) 63%); color-scheme: dark; } /* ── LIGHT theme ──────────────────────────────────────────── */ [data-theme="light"] { --bg: #F6F7F9; --bg-rail: #FFFFFF; --surface: #FFFFFF; --surface-2: #F3F5F8; --surface-3: #F8FAFC; --border: #E6E9EF; --border-2: #D7DCE5; --border-strong: #C2C9D6; --text: #11151F; --text-2: #51596A; --text-muted: #8A92A3; --accent: var(--brand-600); --accent-ink: var(--brand-700); --accent-soft: color-mix(in srgb, var(--color-brand) 10%, white); --accent-border: color-mix(in srgb, var(--color-brand) 22%, white); --shadow: 0 6px 20px rgba(15,18,30,.08), 0 1px 2px rgba(15,18,30,.04); --shadow-lg: 0 18px 48px rgba(15,18,30,.14); --skeleton: linear-gradient(90deg, rgba(15,18,30,.04) 25%, rgba(15,18,30,.08) 37%, rgba(15,18,30,.04) 63%); color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--af-sans); font-size: var(--at-body); line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11","ss01"; } h1,h2,h3,h4,h5 { margin: 0; font-weight: 600; letter-spacing: -.01em; color: var(--text); } h1 { font-size: var(--at-h1); letter-spacing: -.02em; } h2 { font-size: var(--at-h2); } h3 { font-size: var(--at-h3); } h4 { font-size: var(--at-h4); } p { margin: 0; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent-soft); } .mono { font-family: var(--af-mono); font-variant-numeric: tabular-nums; } .num { font-family: var(--af-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .t2 { color: var(--text-2); } .tm { color: var(--text-muted); } .tsm { font-size: var(--at-sm); } .txs { font-size: var(--at-xs); } .ey { font-family: var(--af-mono); font-size: var(--at-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } /* ── Scrollbars ───────────────────────────────────────────── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; } /* ════════════ LAYOUT — console shell ════════════ */ .shell { display: grid; grid-template-columns: var(--rail-w) var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; height: 100vh; overflow: hidden; } .shell.is-collapsed { grid-template-columns: var(--rail-w) 0 1fr; } .shell__rail { grid-row: 1 / 3; grid-column: 1; background: var(--bg-rail); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 4px; z-index: 30; } .shell__sidebar { grid-row: 2; grid-column: 2; background: var(--bg-rail); border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; transition: width .18s ease; } .shell.is-collapsed .shell__sidebar { border-right: 0; } .shell__topbar { grid-row: 1; grid-column: 2 / 4; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 16px; z-index: 20; } .shell__main { grid-row: 2; grid-column: 3 / 4; overflow-y: auto; background: var(--bg); } @media (max-width: 900px){ .shell { grid-template-columns: var(--rail-w) 0 1fr; } } /* ── Rail (layer nav) ── */ .rail__logo { width: 38px; height: 38px; border-radius: var(--ar-md); display: grid; place-items: center; margin-bottom: 8px; } .rail__btn { width: 40px; height: 40px; border-radius: var(--ar-md); display: grid; place-items: center; color: var(--text-2); cursor: pointer; position: relative; transition: background .12s, color .12s; } .rail__btn:hover { background: var(--surface-2); color: var(--text); } .rail__btn.is-active { background: var(--accent-soft); color: var(--accent); } .rail__btn.is-active::before { content:''; position:absolute; left:-10px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background: var(--accent); } .rail__sp { flex: 1; } /* ── Sidebar ── */ .sb { padding: 14px 12px; } .sb__title { font-family: var(--af-display); font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--text); display: flex; align-items: center; gap: 8px; padding: 0 8px 12px; } .sb__group { padding: 14px 8px 4px; } .sb__label { font-family: var(--af-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); padding: 0 8px 6px; } .sb__item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--ar-sm); color: var(--text-2); font-size: 13.5px; cursor: pointer; transition: background .12s, color .12s; } .sb__item:hover { background: var(--surface-2); color: var(--text); } .sb__item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 500; } .sb__item .ic { flex-shrink: 0; opacity: .9; } .sb__item .badge-sm { margin-left: auto; } /* Organization switcher — deliberately built out of .sb__item so the active organization reads as one more row of the sidebar (like project and product) instead of a form control dropped into it. Native
, no JS. */ .sb__org > summary { list-style: none; } .sb__org > summary::-webkit-details-marker { display: none; } .sb__org__ic { width: 22px; height: 22px; font-size: 11px; background: var(--surface-2); color: var(--text-2); } .sb__org__chev { margin-left: auto; flex-shrink: 0; opacity: .55; transition: transform .15s ease; } .sb__org[open] > summary .sb__org__chev { transform: rotate(180deg); } .sb__org[open] > summary { background: var(--surface-2); color: var(--text); } .sb__org__list { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0; padding-left: 12px; } .sb__org__opt { width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; appearance: none; } .sb__org__lock { margin-left: auto; flex-shrink: 0; opacity: .7; } .sb__org__opt:disabled { opacity: .45; cursor: not-allowed; } .sb__org__opt:disabled:hover { background: transparent; color: var(--text-2); } /* A lone organization is a label, not a control: no hover affordance. */ .sb__org__solo { cursor: default; } .sb__org__solo:hover { background: transparent; color: var(--text-2); } /* ── Topbar ── */ .tb__switch { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: var(--ar-md); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 500; } .tb__switch:hover { border-color: var(--border-2); } .tb__search { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--ar-md); background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-size: 13px; } .tb__search:hover { border-color: var(--border-2); } .tb__sp { flex: 1; } .tb__icon { width: 34px; height: 34px; border-radius: var(--ar-md); display: grid; place-items: center; color: var(--text-2); cursor: pointer; position: relative; } .tb__icon:hover { background: var(--surface-2); color: var(--text); } .kbd { font-family: var(--af-mono); font-size: 10.5px; padding: 2px 6px; border-radius: var(--ar-xs); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2); } .dot-badge { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 99px; background: var(--error); border: 2px solid var(--bg); } .avatar { width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; font-weight: 600; font-size: 12px; color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--cyan)); cursor: pointer; } /* ════════════ PAGE primitives ════════════ */ .page { padding: 24px 28px; max-width: 1320px; } .page__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .page__title { font-family: var(--af-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; } .page__sub { color: var(--text-2); font-size: 13.5px; margin-top: 3px; } .row { display: flex; align-items: center; gap: 10px; } .wrap { flex-wrap: wrap; } .grid { display: grid; gap: 16px; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--af-sans); font-weight: 500; font-size: 13px; cursor: pointer; border: 1px solid transparent; border-radius: var(--ar-md); padding: 7px 13px; transition: background .12s, border-color .12s, color .12s; white-space: nowrap; } .btn:active { transform: translateY(.5px); } .btn-primary { background: var(--brand-600); color: #fff; border-color: var(--brand-600); } .btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); } .btn-default { background: var(--surface); color: var(--text); border-color: var(--border-2); } .btn-default:hover { background: var(--surface-2); border-color: var(--border-strong); } .btn-ghost { background: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-danger { background: transparent; color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); } .btn-danger:hover { background: color-mix(in srgb, var(--error) 12%, transparent); } .btn-sm { padding: 4px 9px; font-size: 12px; } .btn-icon { padding: 7px; } /* ── Inputs ── */ .input { width: 100%; font-family: var(--af-sans); font-size: 13.5px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-2); border-radius: var(--ar-md); padding: 8px 11px; outline: none; transition: border-color .12s, box-shadow .12s; } .input::placeholder { color: var(--text-muted); } .input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--accent-soft); } .input-mono { font-family: var(--af-mono); } .label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; } .field { margin-bottom: 14px; } /* ── Cards / panels ── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ar-lg); } .card-pad { padding: 18px; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); } .card__title { font-size: 13.5px; font-weight: 600; } /* ── Stat card (big number + delta) ── */ .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ar-lg); padding: 16px 18px; } .stat__k { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; } .stat__v { font-family: var(--af-display); font-weight: 600; font-size: 30px; letter-spacing: -.02em; line-height: 1.1; margin-top: 6px; } .stat__d { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-family: var(--af-mono); margin-top: 4px; } .stat__d.up { color: var(--ok); } .stat__d.down { color: var(--error); } .stat__d.flat { color: var(--text-muted); } .spark { display: block; margin-top: 10px; width: 100%; height: 34px; } /* ── Badges / pills / chips ── */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--ar-pill); letter-spacing: .02em; line-height: 1.5; } .badge-sm { font-size: 10px; padding: 1px 7px; } .badge-ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); } .badge-warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .badge-error { background: color-mix(in srgb, var(--error) 15%, transparent); color: var(--error); } .badge-info { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); } .badge-muted { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); } .badge-brand { background: var(--accent-soft); color: var(--accent); } .badge-outline { background: transparent; border: 1px solid var(--border-2); color: var(--text-2); font-weight: 500; } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: var(--ar-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); } .chip .x { opacity: .6; cursor: pointer; } .health { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; } .health .d { width: 8px; height: 8px; border-radius: 99px; } .dot { width: 8px; height: 8px; border-radius: 99px; display: inline-block; } .dot-ok { background: var(--ok); } .dot-warn { background: var(--warn); } .dot-error { background: var(--error); } .dot-muted { background: var(--muted); } .pulse { box-shadow: 0 0 0 0 currentColor; animation: ap 1.8s infinite; } @keyframes ap { 0%{ box-shadow:0 0 0 0 color-mix(in srgb, currentColor 50%, transparent);} 70%{ box-shadow:0 0 0 6px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} } /* ── Segmented control / tabs ── */ .seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--ar-md); padding: 2px; gap: 2px; } .seg__b { padding: 4px 11px; border-radius: var(--ar-sm); font-size: 12.5px; color: var(--text-2); cursor: pointer; font-weight: 500; } .seg__b.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); } .tab { padding: 9px 12px; font-size: 13px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { color: var(--text); } .tab.is-active { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; } /* ── Data table ── */ .tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: 0 14px; height: 36px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); cursor: pointer; white-space: nowrap; } .tbl th .so { opacity: .5; } .tbl td { padding: 0 14px; height: var(--row-h); border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .tbl tbody tr { transition: background .1s; } .tbl tbody tr:hover { background: var(--surface-2); } .tbl--compact { --row-h: var(--row-compact); font-size: 12.5px; } .tbl__actions { opacity: 0; } .tbl tbody tr:hover .tbl__actions { opacity: 1; } .tbl__check { width: 36px; } .cell-mono { font-family: var(--af-mono); font-size: 12px; color: var(--text-2); } .pagination { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 12.5px; color: var(--text-2); border-top: 1px solid var(--border); } /* ── Query / filter bar ── */ .qbar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border-2); border-radius: var(--ar-md); background: var(--surface-3); font-family: var(--af-mono); font-size: 13px; } .qbar input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font-family: var(--af-mono); font-size: 13px; } .qbar input::placeholder { color: var(--text-muted); } .qtoken { color: var(--accent); } /* ── App launcher grid ── */ .launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 12px; } .app-card { display: flex; gap: 12px; padding: 15px; border-radius: var(--ar-lg); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: border-color .12s, transform .12s, background .12s; position: relative; } .app-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .app-card__ic { width: 38px; height: 38px; border-radius: var(--ar-md); display: grid; place-items: center; flex-shrink: 0; font-family: var(--af-display); font-weight: 700; color: #fff; font-size: 16px; } .app-card__name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 7px; } .app-card__desc { font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.45; } /* ── Drawer ── */ .scrim { position: fixed; inset: 0; background: rgba(5,6,10,.5); backdrop-filter: blur(2px); z-index: 60; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw; background: var(--surface); border-left: 1px solid var(--border); z-index: 61; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; } .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .drawer__body { padding: 18px; overflow-y: auto; } /* ── Command palette ── */ .cmdk { position: fixed; top: 14vh; left: 50%; transform: translateX(-50%); width: 600px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--ar-lg); box-shadow: var(--shadow-lg); z-index: 81; overflow: hidden; } .cmdk__input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .cmdk__input input { flex: 1; background: transparent; border: 0; outline: none; font-size: 15px; color: var(--text); } .cmdk__list { max-height: 360px; overflow-y: auto; padding: 6px; } .cmdk__sec { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); padding: 10px 10px 4px; font-family: var(--af-mono); } .cmdk__item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--ar-sm); cursor: pointer; font-size: 13.5px; } .cmdk__item.is-active { background: var(--accent-soft); color: var(--accent); } .cmdk__item .meta { margin-left: auto; } /* ── Toast ── */ .toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 90; } .toast { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border-radius: var(--ar-md); background: var(--surface-2); border: 1px solid var(--border-2); box-shadow: var(--shadow); font-size: 13px; min-width: 280px; } /* ── Skeleton ── */ .sk { background: var(--skeleton); background-size: 400% 100%; animation: skl 1.4s ease infinite; border-radius: var(--ar-sm); } @keyframes skl { 0%{ background-position: 100% 0;} 100%{ background-position: -100% 0;} } /* ── Empty state ── */ .empty { text-align: center; padding: 56px 24px; } .empty__ic { width: 52px; height: 52px; border-radius: var(--ar-lg); background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; margin: 0 auto 14px; color: var(--text-muted); } /* ── MCP / agent affordance ── */ .mcp { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--ar-md); font-size: 12.5px; font-weight: 500; cursor: pointer; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); } .mcp:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); } /* ── misc ── */ .divider { height: 1px; background: var(--border); } .kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; font-size: 13px; } .kv dt { color: var(--text-2); } .kv dd { margin: 0; color: var(--text); } .scroll-x { overflow-x: auto; } /* ── Usage progress bar (overview) ── */ .bar { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 12px; } .bar__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-600), var(--cyan)); } .bar__fill.over { background: linear-gradient(90deg, var(--error), #fca5a5); } .stat__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } /* ── Wordmark (bl_wordmark helper) — console-native ── */ .bl-wordmark { display:inline-flex; align-items:center; gap:8px; } .bl-wordmark__mark { height: calc(var(--bl-wm-size, 16px) * 1.16); width:auto; display:block; flex-shrink:0; } .bl-wordmark__text { font-family:var(--af-display); font-weight:700; font-size:var(--bl-wm-size, 16px); letter-spacing:-.02em; color:var(--text); } .text-grad { background:linear-gradient(90deg, var(--brand-300), var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ── Project list (dashboard) ── */ .proj-av { background: linear-gradient(135deg, var(--brand-600), var(--cyan)); color:#fff; } .app-card--row { align-items:center; justify-content:space-between; } .app-card--archived { opacity:.55; } .app-card__meta { display:flex; align-items:center; gap:16px; } /* ── Plan cards + full button (account pages) ── */ .bl-btn-full { width:100%; justify-content:center; margin-top:14px; } .bl-plan { display:flex; flex-direction:column; } .bl-plan--featured { border-color: var(--accent-border); } .bl-plan-feats { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; } .bl-plan-feats li { display:flex; gap:8px; font-size:13px; color:var(--text-2); } .bl-plan-feats li::before { content:'✓'; color:var(--accent); font-weight:700; } /* form-wrapped buttons fill width (button_to) */ .bl-oauth-form { display:flex; width:100%; } /* Global content padding — covers legacy (dm-/Tailwind) views that lack .page */ .shell__main { padding: 24px 28px; } .page { padding: 0; max-width: 1320px; } /* Non-integrated apps/services — muted (gray) until their integration ships */ .app-card--soon { opacity: .5; } .app-card--soon:hover { opacity: .7; } /* Current-app logo in the global rail (appears when inside an app) */ .rail__app { width:34px; height:34px; border-radius:var(--ar-md); display:grid; place-items:center; font-family:var(--af-display); font-weight:700; font-size:14px; color:#fff; margin-bottom:6px; box-shadow:0 0 0 1px rgba(255,255,255,.08); }