/* * AI Majlis — design system * Ported faithfully from the "AI Majlis.dc.html" design comp. * Tokens, fonts, and component classes carry the comp's exact values. * Bilingual: LTR (English) + RTL (Arabic) via the attribute. */ :root { --accent: #1C5B41; /* Sovereign Green */ --accent-2: #9A7B2E; /* Heritage Gold */ --ink: #15191C; --soft: #5C636A; --paper: #F4F4F1; --surface: #FFFFFF; --line: #E4E4DE; --pad: 24px; --cardgap: 20px; --font-ui: 'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif; --font-display: 'Spectral', 'Amiri', Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* Theme variants (matches the comp's accent enum) */ [data-accent="navy"] { --accent: #1E3A5F; --accent-2: #9A7B2E; } [data-accent="gold"] { --accent: #8A6B1E; --accent-2: #1C5B41; } /* Density */ [data-density="compact"] { --pad: 17px; --cardgap: 14px; } /* Arabic (RTL): swap display/ui font priority */ [dir="rtl"] { --font-ui: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; --font-display: 'Amiri', 'Spectral', serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-ui); background: var(--paper); color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--accent); color: #fff; } input::placeholder { color: #9aa0a6; } @keyframes amPulse { 0%,100% { opacity: .4; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.2); } } .am-pulse { animation: amPulse 1.8s infinite; display: inline-block; } a { color: inherit; text-decoration: none; } /* ---------- shared layout helpers ---------- */ .am-wrap { max-width: 1300px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .am-wrap--narrow { max-width: 1100px; } .am-wrap--form { max-width: 920px; } .am-back { font-size: 13px; color: var(--soft); cursor: pointer; margin-bottom: 18px; display: inline-block; } .am-h1 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -.5px; margin: 0; } .am-mono { font-family: var(--font-mono); } .am-soft { color: var(--soft); } .am-divider { height: 1px; background: var(--line); } /* ---------- header ---------- */ .am-header { position: sticky; top: 0; z-index: 50; background: rgba(244,244,241,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .am-header__inner { max-width: 1300px; margin: 0 auto; padding: 13px var(--pad); display: flex; align-items: center; gap: 20px; } .am-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; cursor: pointer; } .am-logo__mark { width: 30px; height: 30px; background: var(--accent); transform: rotate(45deg); border-radius: 7px; display: flex; align-items: center; justify-content: center; } .am-logo__dot { width: 9px; height: 9px; background: var(--accent-2); border-radius: 1px; } .am-logo__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: .2px; line-height: 1.06; } .am-logo__sub { font-family: 'Amiri', serif; font-size: 13.5px; color: var(--soft); line-height: 1.06; } .am-nav { display: flex; gap: 2px; align-items: center; } .am-nav__link { padding: 8px 13px; border-radius: 8px; font-size: 14px; cursor: pointer; color: var(--soft); } .am-nav__link.is-active { background: var(--paper); color: var(--ink); font-weight: 600; } .am-spacer { flex: 1; } .am-pill { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--soft); background: var(--surface); white-space: nowrap; } .am-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: #2E7D52; display: inline-block; } .am-lang { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); } .am-lang__btn { padding: 7px 13px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; border: none; cursor: pointer; line-height: 1; background: var(--surface); color: var(--soft); } .am-lang__btn.is-active { background: var(--ink); color: #fff; } .am-lang__btn--ar { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 15px; } .am-iconbtn { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; } .am-iconbtn__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; } .am-iconbtn__count { position: absolute; top: -2px; inset-inline-end: -2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: #C2410C; color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .am-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; flex-shrink: 0; } /* notifications dropdown */ .am-notif { position: absolute; inset-inline-end: 0; top: 46px; width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.16); z-index: 61; overflow: hidden; } .am-notif__title { padding: 13px 16px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13.5px; } .am-notif__item { display: flex; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: flex-start; } .am-notif__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .am-notif__time { font-size: 11px; color: var(--soft); margin-top: 2px; font-family: var(--font-mono); } .am-overlay-click { position: fixed; inset: 0; z-index: 60; } /* ---------- buttons & chips ---------- */ .am-btn { font-family: var(--font-ui); border-radius: 9px; font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid transparent; padding: 11px 22px; line-height: 1; display: inline-flex; align-items: center; gap: 8px; } .am-btn--accent { background: var(--accent); color: #fff; font-weight: 600; } .am-btn--ink { background: var(--ink); color: #fff; border-radius: 8px; padding: 9px 16px; font-size: 13px; } .am-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .am-btn--sm { padding: 8px 18px; font-size: 13px; } .am-chip { padding: 7px 14px; border-radius: 999px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; cursor: pointer; line-height: 1; white-space: nowrap; background: var(--surface); color: var(--soft); border: 1px solid var(--line); } .am-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); } .am-chip--quick { background: var(--surface); color: var(--ink); border: 1px solid var(--line); padding: 6px 13px; } .am-chip--active-filter { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; background: var(--ink); color: #fff; border: none; cursor: pointer; } .am-link { background: transparent; border: none; color: var(--accent); font-size: 12px; cursor: pointer; font-family: var(--font-ui); } .am-link--u { text-decoration: underline; } /* ---------- cards ---------- */ .am-card { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: var(--pad); } .am-card--lg { border-radius: 16px; } .am-card--pad { padding: 22px 24px; } /* ---------- hero / catalogue ---------- */ .am-section { max-width: 1300px; margin: 0 auto; padding: 36px var(--pad); } .am-hero { max-width: 1300px; margin: 0 auto; padding: 62px var(--pad) 36px; } .am-kicker { font-family: var(--font-ui); font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 18px; display: flex; align-items: center; gap: 11px; } .am-kicker--soft { color: var(--soft); } .am-kicker__line { width: 26px; height: 1.5px; background: var(--accent); display: inline-block; } .am-hero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px,4.8vw,56px); line-height: 1.06; letter-spacing: -.5px; margin: 0 0 18px; max-width: 20ch; text-wrap: balance; } .am-hero__sub { font-size: 17px; line-height: 1.62; color: var(--soft); max-width: 62ch; margin: 0 0 30px; } .am-search { display: flex; align-items: center; gap: 10px; max-width: 700px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 6px 6px 6px 18px; box-shadow: 0 2px 10px rgba(0,0,0,.04); } .am-search__icon { color: var(--soft); font-size: 19px; line-height: 1; } .am-search__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-ui); font-size: 15px; color: var(--ink); padding: 11px 0; } .am-search__btn { padding: 11px 22px; background: var(--accent); color: #fff; border: none; border-radius: 9px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; } .am-try { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; align-items: center; } .am-try__label { font-size: 12px; color: var(--soft); } .am-statsrow { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; align-items: stretch; } .am-goal { flex: 2; min-width: 280px; display: flex; align-items: center; gap: 20px; padding: 22px 26px; background: var(--ink); color: #fff; border-radius: 16px; } .am-goal__num { font-family: var(--font-display); font-size: 52px; font-weight: 600; line-height: .9; } .am-goal__label { font-size: 14px; line-height: 1.45; opacity: .86; max-width: 26ch; } .am-stat { flex: 1; min-width: 138px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; } .am-stat__num { font-family: var(--font-display); font-size: 31px; font-weight: 600; letter-spacing: -.5px; } .am-stat__label { font-size: 12.5px; color: var(--soft); margin-top: 5px; } /* tiers */ .am-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } .am-tier { padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; } .am-tier--feature { border-top: 3px solid var(--accent); } .am-tier__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .am-tier__glyph { font-size: 22px; line-height: 1; } .am-tier__name { font-family: var(--font-display); font-size: 21px; font-weight: 600; } .am-tier__desc { font-size: 13.5px; line-height: 1.55; color: var(--soft); margin: 0; } /* catalogue layout */ .am-cat { max-width: 1300px; margin: 0 auto; padding: 36px var(--pad) 60px; display: grid; grid-template-columns: 248px 1fr; gap: 34px; align-items: start; } .am-facets { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 26px; } .am-facets__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; } .am-facetgroup__label { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--soft); font-weight: 600; margin-bottom: 11px; } .am-facetlist { display: flex; flex-direction: column; gap: 3px; } .am-facet { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--ink); } .am-facet.is-active { background: #EEF4F0; font-weight: 600; } .am-facet__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .am-facet__count { font-family: var(--font-mono); font-size: 11.5px; color: var(--soft); } /* featured banner */ .am-feature { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; margin-bottom: 26px; border-inline-start: 3px solid var(--accent-2); } .am-feature__row { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; justify-content: space-between; } .am-feature__kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--accent-2); background: #F6EFDD; padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; } .am-feature__ns { font-family: var(--font-mono); font-size: 12.5px; color: var(--soft); margin-bottom: 5px; } .am-feature__title { font-family: var(--font-display); font-size: 25px; font-weight: 600; line-height: 1.15; margin-bottom: 10px; } .am-feature__desc { font-size: 14px; line-height: 1.6; color: var(--soft); margin: 0 0 16px; max-width: 58ch; } .am-resultbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; } .am-resultbar__count { color: var(--ink); font-weight: 600; font-family: var(--font-display); font-size: 17px; } .am-typechips { display: flex; gap: 7px; flex-wrap: wrap; } .am-activechips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } /* asset grid + cards */ .am-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px,1fr)); gap: var(--cardgap); } .am-asset-card { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: var(--pad); display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } .am-asset-card:hover { border-color: var(--accent); box-shadow: 0 10px 28px rgba(0,0,0,.08); transform: translateY(-2px); } .am-asset-card__top { display: flex; justify-content: space-between; align-items: center; } .am-asset-card__ns { font-family: var(--font-mono); font-size: 12px; color: var(--soft); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .am-asset-card__name { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.2; } .am-asset-card__desc { font-size: 13.5px; line-height: 1.55; color: var(--soft); margin: 0; flex: 1; } .am-asset-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .am-asset-card__foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--soft); } .am-asset-card__stats { display: flex; align-items: center; gap: 13px; } .am-rel { display: flex; align-items: center; gap: 8px; } .am-rel__label { font-size: 10px; font-family: var(--font-mono); color: var(--accent); letter-spacing: .5px; white-space: nowrap; } .am-rel__track { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; } .am-rel__bar { height: 100%; background: var(--accent); } /* ---------- badges & labels ---------- */ .am-type-badge { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; padding: 4px 9px; border-radius: 5px; color: var(--tc); background: var(--tb); } .am-type-badge--sm { font-size: 10px; padding: 3px 7px; border-radius: 4px; } .am-t-Agent { --tc:#1C5B41; --tb:#E7F0EA; } .am-t-Model { --tc:#4B3F8F; --tb:#ECEAF6; } .am-t-Tool { --tc:#1F5FA8; --tb:#E6EEF8; } .am-t-MCP { --tc:#0F766E; --tb:#E2F1EF; } .am-t-Skill { --tc:#8A5A1A; --tb:#F6EBDC; } .am-t-Dataset { --tc:#566270; --tb:#EBEDEF; } .am-t-Eval { --tc:#9D2C6B; --tb:#F7E6F0; } .am-class-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .2px; color: var(--cc); background: var(--cb); padding: 4px 9px; border-radius: 999px; } .am-class-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cc); } .am-c-open { --cc:#2E7D52; --cb:#E8F2EC; } .am-c-cr { --cc:#B7791F; --cb:#FBF1DC; } .am-c-secret { --cc:#C2410C; --cb:#FBE9DE; } .am-c-top { --cc:#9B1C1C; --cb:#F6E0E0; } .am-class-text { color: var(--cc); } .am-vis { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--soft); } .am-cert { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--accent); border: 1px solid #cfe0d6; padding: 3px 8px; border-radius: 5px; } .am-cert--lg { font-size: 11px; padding: 4px 9px; border-radius: 6px; } .am-served { display: inline-flex; align-items: center; gap: 6px; color: #2E7D52; font-weight: 500; } .am-served__dot { width: 7px; height: 7px; border-radius: 50%; background: #2E7D52; } /* ---------- asset page ---------- */ .am-split { display: grid; grid-template-columns: 1fr 312px; gap: 36px; align-items: start; } .am-split--maj { grid-template-columns: 1fr 300px; gap: 28px; } .am-split--ent { grid-template-columns: 1fr 320px; gap: 28px; } .am-split--sec { grid-template-columns: 1fr 360px; gap: 28px; } .am-asset__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .am-asset__ns { font-family: var(--font-mono); font-size: 13px; color: var(--soft); margin-bottom: 6px; } .am-asset__title { font-family: var(--font-display); font-size: 36px; font-weight: 600; line-height: 1.1; margin: 0 0 14px; letter-spacing: -.5px; } .am-asset__desc { font-size: 16px; line-height: 1.6; color: var(--soft); max-width: 62ch; margin: 0 0 22px; } .am-asset__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; } .am-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; } .am-tab { padding: 11px 16px; background: transparent; border: none; border-bottom: 2px solid transparent; font-family: var(--font-ui); font-size: 13.5px; cursor: pointer; margin-bottom: -1px; color: var(--soft); } .am-tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); } .am-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px 30px; } .am-panel--flush { padding: 0; overflow: hidden; } .am-panel__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0 0 12px; } .am-readme { font-size: 14.5px; line-height: 1.7; color: var(--soft); margin: 0 0 18px; } .am-code { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; font-family: var(--font-mono); font-size: 13px; color: var(--ink); line-height: 1.7; overflow: auto; } /* tables */ .am-table { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .am-table__title { padding: 18px 22px; border-bottom: 1px solid var(--line); } .am-trow { display: grid; gap: 12px; padding: 15px 22px; border-bottom: 1px solid var(--line); align-items: center; font-size: 13.5px; } .am-trow--head { padding: 12px 22px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--soft); font-weight: 600; } .am-cols-versions { grid-template-columns: 100px 130px 1fr 90px; } .am-cols-aibom { grid-template-columns: 1.4fr 90px 80px 1.1fr 110px; } .am-cols-eval { grid-template-columns: 1.6fr 90px 110px 120px; } .am-cols-access { grid-template-columns: 1.4fr 90px 100px 120px; } .am-cols-members { grid-template-columns: 1fr 130px 90px; } .am-cols-serving { grid-template-columns: 1.6fr 1fr 110px 100px 110px 100px; } /* asset sidebar */ .am-meta { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; } .am-meta__label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--soft); font-weight: 600; margin-bottom: 6px; } .am-trust { display: flex; flex-direction: column; gap: 9px; font-size: 13px; } .am-trust__row { display: flex; align-items: center; gap: 9px; } .am-check { color: var(--accent); } /* ---------- publish wizard ---------- */ .am-steps { display: flex; align-items: center; gap: 0; margin-bottom: 34px; flex-wrap: wrap; } .am-step { display: flex; align-items: center; gap: 9px; cursor: pointer; padding-inline-end: 14px; } .am-step__dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-family: var(--font-mono); background: var(--surface); color: var(--soft); border: 1px solid var(--line); } .am-step.is-done .am-step__dot, .am-step.is-active .am-step__dot { background: var(--accent); color: #fff; border-color: var(--accent); } .am-step__label { font-size: 13px; color: var(--soft); } .am-step.is-active .am-step__label { font-weight: 600; color: var(--ink); } .am-wizard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 32px 34px; min-height: 300px; } .am-wizard__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 18px; } .am-wizard__sub { font-size: 13.5px; color: var(--soft); margin: 0 0 18px; } .am-optgrid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } .am-optgrid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .am-optcol { display: flex; flex-direction: column; gap: 10px; } .am-opt { border: 1.5px solid var(--line); border-radius: 11px; padding: 16px 18px; cursor: pointer; font-size: 14px; transition: border-color .12s, background .12s; } .am-opt.is-selected { border-color: var(--accent); background: #EEF4F0; } .am-opt--center { text-align: center; font-weight: 500; } .am-opt--row { display: flex; align-items: center; gap: 12px; } .am-opt__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .am-opt__glyph { font-size: 24px; margin-bottom: 10px; } .am-opt__note { color: var(--soft); font-size: 12.5px; line-height: 1.5; } .am-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; } .am-review-cell { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; } .am-review-cell__label { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--soft); font-weight: 600; margin-bottom: 5px; } .am-wizard__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; } /* ---------- majlis / entity ---------- */ .am-banner-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 30px 32px; margin-bottom: 28px; border-top: 3px solid var(--accent); } .am-banner-card__kicker { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 12px; } .am-statline { display: flex; gap: 24px; flex-wrap: wrap; } .am-statline__label { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--soft); font-weight: 600; margin-bottom: 4px; } .am-statline__big { font-weight: 600; font-family: var(--font-display); font-size: 18px; } .am-h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 14px; } .am-membergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; margin-bottom: 32px; } .am-member { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; } .am-member__code { width: 38px; height: 38px; border-radius: 9px; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); flex-shrink: 0; } .am-minigrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 12px; } .am-mini { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; } .am-avatar-sm { width: 30px; height: 30px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--accent); } .am-avatar-md { width: 34px; height: 34px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--accent); } .am-entity-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .am-entity-logo { width: 56px; height: 56px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--accent); } .am-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } .am-compliance { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 18px 20px; } .am-compliance__label { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--soft); font-weight: 600; margin-bottom: 8px; } .am-compliance__value { font-family: var(--font-display); font-size: 22px; font-weight: 600; } .am-compliance__note { font-size: 11.5px; color: var(--soft); margin-top: 3px; } /* ---------- serving ---------- */ .am-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 28px; } .am-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 18px 20px; } .am-kpi--ink { background: var(--ink); color: #fff; border: none; } .am-kpi__label { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--soft); font-weight: 600; margin-bottom: 8px; } .am-kpi--ink .am-kpi__label { color: #fff; opacity: .7; } .am-kpi__num { font-family: var(--font-display); font-size: 26px; font-weight: 600; } /* ---------- agent oversight ---------- */ .am-timeline { display: flex; flex-direction: column; gap: 0; } .am-tl-step { display: flex; gap: 16px; padding-bottom: 22px; position: relative; } .am-tl-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .am-tl-node { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; font-family: var(--font-mono); } .am-tl-line { width: 2px; flex: 1; background: var(--line); margin-top: 4px; min-height: 18px; } .am-tl-body { flex: 1; padding-top: 2px; } .am-tl-action { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; } .am-tl-name { font-size: 14px; font-weight: 500; } .am-tl-badge { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .5px; padding: 2px 7px; border-radius: 4px; } .am-tl-time { font-family: var(--font-mono); font-size: 11px; color: var(--soft); } .am-gate { margin-top: 12px; background: #FBF1DC; border: 1px solid #ecd9a8; border-radius: 10px; padding: 14px 16px; } .am-gate__title { font-size: 12.5px; font-weight: 600; color: #B7791F; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; } .am-gate__actions { display: flex; gap: 9px; } .am-btn--deny { background: transparent; color: #9B1C1C; border: 1px solid #e0b4b4; border-radius: 8px; padding: 8px 18px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--font-ui); } /* ---------- security / compliance ---------- */ .am-secstats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 30px; } .am-secstat { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 20px 22px; } .am-secstat__label { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--soft); font-weight: 600; margin-bottom: 8px; } .am-secstat__value { font-family: var(--font-display); font-size: 20px; font-weight: 600; } .am-secstat__note { font-size: 11.5px; color: var(--soft); margin-top: 3px; } .am-audit { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--line); align-items: start; font-size: 13px; } .am-audit__time { font-family: var(--font-mono); font-size: 11.5px; color: var(--soft); } .am-audit__action { font-family: var(--font-mono); font-size: 12px; color: var(--accent); } .am-audit__meta { font-size: 12px; color: var(--soft); margin-top: 2px; } .am-vdp { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .am-vdp__id { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; } .am-vdp__status { font-size: 11.5px; color: var(--soft); margin-top: 2px; } .am-sev { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: var(--sc); background: var(--sb); } .am-sev-Critical { --sc:#9B1C1C; --sb:#F6E0E0; } .am-sev-High { --sc:#C2410C; --sb:#FBE9DE; } .am-sev-Medium { --sc:#B7791F; --sb:#FBF1DC; } .am-sev-Low { --sc:#2E7D52; --sb:#E8F2EC; } /* ---------- docs ---------- */ .am-doc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; cursor: pointer; transition: border-color .15s; } .am-doc:hover { border-color: var(--accent); } .am-doc__tag { font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin-bottom: 10px; } .am-doc__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 6px; } .am-doc__desc { font-size: 13px; color: var(--soft); line-height: 1.55; } /* ---------- lineage / council (vertical flow) ---------- */ .am-flow { display: flex; flex-direction: column; align-items: center; gap: 0; } .am-flow__connector { width: 2px; height: 34px; background: var(--line); } .am-flow__connector--sm { height: 26px; } .am-node { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 24px; text-align: center; min-width: 280px; } .am-node--this { border: 2px solid var(--accent); padding: 16px 26px; min-width: 300px; box-shadow: 0 8px 24px rgba(0,0,0,.06); } .am-node--ink { background: var(--ink); color: #fff; padding: 16px 28px; } .am-node--dashed { background: var(--paper); border: 1px dashed var(--line); border-radius: 10px; padding: 10px 20px; font-size: 13px; color: var(--soft); } .am-node--gate { background: #FBF1DC; border: 1px solid #ecd9a8; color: #B7791F; font-weight: 600; font-size: 14px; padding: 14px 24px; } .am-node--outcome { background: #E8F2EC; border: 1px solid #cfe0d6; color: #2E7D52; font-weight: 600; font-size: 14px; padding: 14px 24px; } .am-node__label { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--soft); font-weight: 600; margin-bottom: 4px; } .am-node--this .am-node__label { color: var(--accent); } .am-forks { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } .am-worker { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; text-align: center; } .am-worker__glyph { width: 30px; height: 30px; border-radius: 50%; background: #E7F0EA; color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 13px; margin: 0 auto 10px; } /* ---------- NCAP ---------- */ .am-ncap-banner { background: #E8F2EC; border: 1px solid #cfe0d6; border-radius: 12px; padding: 16px 22px; margin: 0 0 34px; color: #2E7D52; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 11px; } .am-ncap-banner__dot { width: 9px; height: 9px; border-radius: 50%; background: #2E7D52; flex-shrink: 0; } .am-ncap-stages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 40px; } .am-ncap-stage { display: flex; align-items: center; gap: 9px; padding-inline-end: 6px; } .am-ncap-stage__dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-family: var(--font-mono); background: var(--accent); color: #fff; } .am-ncap-controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 12px; } .am-ncap-control { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; } .am-ncap-control__fam { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent); background: #E7F0EA; padding: 6px 10px; border-radius: 7px; } /* ---------- modal ---------- */ .am-modal-overlay { position: fixed; inset: 0; background: rgba(20,25,28,.55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; } .am-modal { background: var(--surface); border-radius: 16px; max-width: 520px; width: 100%; box-shadow: 0 24px 64px rgba(0,0,0,.28); overflow: hidden; } .am-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); } .am-modal__title { font-family: var(--font-display); font-size: 19px; font-weight: 600; } .am-modal__close { background: transparent; border: none; font-size: 20px; color: var(--soft); cursor: pointer; line-height: 1; } .am-modal__body { padding: 24px; } .am-fork-input { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 18px; } .am-fork-input__prefix { padding: 11px 14px; background: var(--paper); font-family: var(--font-mono); font-size: 13px; color: var(--soft); border-inline-end: 1px solid var(--line); } .am-fork-input__field { flex: 1; min-width: 0; border: none; outline: none; padding: 11px 14px; font-family: var(--font-mono); font-size: 13px; background: transparent; color: var(--ink); } /* ---------- footer ---------- */ .am-footer { border-top: 1px solid var(--line); background: var(--surface); } .am-footer__inner { max-width: 1300px; margin: 0 auto; padding: 46px var(--pad); } .am-footer__top { display: flex; gap: 48px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 36px; } .am-footer__brand { max-width: 38ch; } .am-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(170px,1fr)); gap: 24px 40px; } .am-footer__colhead { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; } .am-footer__coltext { font-size: 12.5px; color: var(--soft); } .am-footer__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--soft); } /* ---------- responsive ---------- */ @media (max-width: 1024px) { .am-split, .am-split--maj, .am-split--ent, .am-split--sec, .am-cat { grid-template-columns: 1fr !important; } .am-facets, .am-split aside, .am-split--maj aside, .am-split--ent aside, .am-split--sec aside { position: static !important; } } @media (max-width: 760px) { .am-grid-3, .am-grid-4, .am-optgrid-4, .am-optgrid-3, .am-kpis, .am-secstats { grid-template-columns: 1fr !important; } .am-header .am-nav { display: none !important; } }