/* CoreAnomaly design system — a security/FinOps console. Light + dark, driven by [data-theme] on . Custom properties keep the palette in one place; components below are hand-built (no framework classes required) so new screens look intentional, while legacy DaisyUI pages still render inside the same shell. */ :root { --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f0f2f5; --border: #e3e7ec; --border-strong: #cbd2da; --text: #10151c; --text-dim: #5a6572; --text-faint: #8a939f; --brand: #4f46e5; --brand-ink: #ffffff; --brand-soft: #eef0fe; --accent: #0ea5e9; --sev-high-bg: #fdecec; --sev-high-fg: #b42318; --sev-high-dot: #e5484d; --sev-med-bg: #fef3d9; --sev-med-fg: #92610a; --sev-med-dot: #f5a524; --sev-low-bg: #eef6ee; --sev-low-fg: #2f6f3e; --sev-low-dot: #30a46c; --sev-info-bg: #eef1f5; --sev-info-fg: #445162; --sev-info-dot:#8a939f; --risk-critical: #e5484d; --risk-high: #f5820b; --risk-medium: #d9a400; --risk-low: #30a46c; --shadow: 0 1px 2px rgba(16,21,28,.06), 0 1px 3px rgba(16,21,28,.05); --shadow-lg: 0 10px 30px -12px rgba(16,21,28,.25); --radius: 12px; --radius-sm: 8px; --sidebar-w: 236px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } :root[data-theme="dark"] { --bg: #0c0e12; --surface: #14171d; --surface-2: #191d25; --border: #262b34; --border-strong: #333a45; --text: #e9edf2; --text-dim: #9aa5b3; --text-faint: #6b7482; --brand: #7c7bf7; --brand-ink: #0c0e12; --brand-soft: #1c1f38; --accent: #38bdf8; --sev-high-bg: #2a1414; --sev-high-fg: #ff8d85; --sev-high-dot: #e5484d; --sev-med-bg: #2a2110; --sev-med-fg: #f5c451; --sev-med-dot: #f5a524; --sev-low-bg: #12251a; --sev-low-fg: #6fd398; --sev-low-dot: #30a46c; --sev-info-bg: #1b2029; --sev-info-fg: #9aa5b3; --sev-info-dot:#6b7482; --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 16px 40px -16px rgba(0,0,0,.7); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5; } a { color: inherit; text-decoration: none; } h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; } .muted { color: var(--text-dim); } .faint { color: var(--text-faint); } .mono { font-family: var(--mono); } .nowrap { white-space: nowrap; } /* ---------- shell ---------- */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 18px 14px; } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; } .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--brand), var(--accent)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; box-shadow: var(--shadow); } .brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; } .nav-group { margin-top: 14px; } .nav-group-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-faint); padding: 0 10px 6px; font-weight: 700; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text-dim); font-weight: 550; font-size: 13.5px; margin-bottom: 1px; transition: background .12s, color .12s; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 650; } .nav-item .ico { width: 17px; height: 17px; flex: 0 0 17px; opacity: .9; } .nav-item .badge-count { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--sev-high-bg); color: var(--sev-high-fg); } .sidebar-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: 56px; border-bottom: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; gap: 14px; padding: 0 24px; position: sticky; top: 0; z-index: 20; } .topbar .crumb { font-weight: 600; font-size: 14px; } .topbar .spacer { flex: 1; } .content { padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: 7px 13px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; font-family: var(--sans); transition: all .12s; line-height: 1; } .btn:hover { border-color: var(--text-faint); } .btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } .btn-primary:hover { filter: brightness(1.07); border-color: var(--brand); } .btn-sm { padding: 5px 10px; font-size: 12px; } .btn-ghost { border-color: transparent; background: transparent; color: var(--text-dim); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } /* ---------- cards / layout ---------- */ .grid { display: grid; gap: 16px; } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1080px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .card-pad { padding: 18px; } .card-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .card-head h3 { font-size: 14px; } .card-head .sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-weight: 700; margin: 26px 0 12px; } /* ---------- KPI stat tiles ---------- */ .kpi { padding: 16px 18px; } .kpi .label { font-size: 12px; color: var(--text-dim); font-weight: 600; display:flex; align-items:center; gap:6px; } .kpi .value { font-size: 30px; font-weight: 720; letter-spacing: -0.02em; margin-top: 6px; line-height: 1.05; } .kpi .value.sm { font-size: 24px; } .kpi .delta { font-size: 12px; margin-top: 6px; font-weight: 600; } .delta.up { color: var(--risk-critical); } .delta.down { color: var(--risk-low); } /* page header */ .page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .page-head h1 { font-size: 22px; } .page-head .sub { color: var(--text-dim); margin-top: 3px; font-size: 13px; } .page-head .actions { margin-left: auto; display: flex; gap: 8px; } /* ---------- badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px; white-space: nowrap; } .badge .dot { width: 6px; height: 6px; border-radius: 999px; } .sev-HIGH { background: var(--sev-high-bg); color: var(--sev-high-fg); } .sev-MEDIUM { background: var(--sev-med-bg); color: var(--sev-med-fg); } .sev-LOW { background: var(--sev-low-bg); color: var(--sev-low-fg); } .sev-INFO { background: var(--sev-info-bg); color: var(--sev-info-fg); } .sev-HIGH .dot{background:var(--sev-high-dot)} .sev-MEDIUM .dot{background:var(--sev-med-dot)} .sev-LOW .dot{background:var(--sev-low-dot)} .sev-INFO .dot{background:var(--sev-info-dot)} .riskband { font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; } .rb-critical { background: var(--sev-high-bg); color: var(--sev-high-fg); } .rb-high { background: var(--sev-med-bg); color: var(--sev-med-fg); } .rb-medium { background: var(--sev-low-bg); color: var(--sev-low-fg); } .rb-low { background: var(--sev-info-bg); color: var(--sev-info-fg); } .pill { background: var(--surface-2); color: var(--text-dim); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; font-family: var(--mono); } /* ---------- tables ---------- */ .table-wrap { overflow-x: auto; } table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; } table.tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); cursor: default; } table.tbl th.num, table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; } table.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--border); } table.tbl tbody tr:hover { background: var(--surface-2); } table.tbl tbody tr:last-child td { border-bottom: none; } .row-link { cursor: pointer; } .u-name { font-weight: 600; } .u-email { color: var(--text-dim); font-size: 12px; font-family: var(--mono); } /* meter bar */ .meter { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; min-width: 60px; } .meter > span { display: block; height: 100%; border-radius: 999px; } /* ---------- explainability panel ---------- */ .xp { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .xp-plain { padding: 14px 16px; font-size: 13.5px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .xp-plain b { font-weight: 700; } .xp-body { padding: 14px 16px; display: grid; gap: 14px; } .xp-rule { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; } .xp-evidence { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; overflow-x: auto; } .xp-evidence .k { color: var(--text-faint); } .xp-evidence .v { color: var(--text); font-weight: 600; } /* sparkline / bars are inline SVG; give them a consistent baseline */ svg.spark { display: block; } .barrow { display:flex; align-items:flex-end; gap:2px; height: 40px; } .barrow > i { flex:1; background: var(--brand); border-radius: 2px 2px 0 0; min-height: 2px; opacity:.85; } .barrow > i.off { background: var(--risk-high); } /* alerts feed */ .alert-row { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); align-items: flex-start; } .alert-row:last-child { border-bottom: none; } .alert-main { flex: 1; min-width: 0; } .alert-title { font-weight: 620; font-size: 13.5px; } .alert-sub { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; } .alert-rec { font-size: 12.5px; margin-top: 8px; color: var(--text-dim); } .disp { display:flex; gap:6px; } /* empty state */ .empty { text-align: center; padding: 60px 20px; } .empty .big { font-size: 17px; font-weight: 650; } .empty .sub { color: var(--text-dim); margin: 8px 0 18px; } /* misc utilities */ .flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px} .tag-team { font-size: 11px; font-weight:600; color: var(--text-dim); background: var(--surface-2); padding: 1px 7px; border-radius: 5px; } .legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text-dim); } .legend span { display:inline-flex; align-items:center; gap:6px; } .legend i { width:9px; height:9px; border-radius:2px; display:inline-block; } .banner { border-radius: var(--radius); padding: 12px 16px; font-size: 13px; display:flex; align-items:center; gap:10px; } .banner-ok { background: var(--sev-low-bg); color: var(--sev-low-fg); } .banner-warn { background: var(--sev-med-bg); color: var(--sev-med-fg); } /* ---------- Toknz overview (dashboard-only shell) ---------- */ .toknz-overview-shell { --tk-ink: #23211e; --tk-ink-2: #3e3a36; --tk-text: #58524b; --tk-muted: #8f877d; --tk-faint: #bcb2a5; --tk-border: #d8cfc4; --tk-border-soft: #efeae3; --tk-bg: #f9f7f4; --tk-surface: #fff; --tk-sunken: #f0eee7; --tk-violet: #533899; --tk-violet-soft: #9a88d8; --tk-violet-tint: #f0ecfb; --tk-violet-border: #ddd4f5; --tk-green: #29633a; --tk-green-bright: #95d324; --tk-green-tint: #f1f9e3; --tk-orange: #c9500f; --tk-yellow: #f7cc48; --tk-blue: #21759b; --tk-blue-tint: #dbebfe; --tk-shadow: 0 1px 2px rgba(35,33,30,.035), 0 2px 6px rgba(35,33,30,.04); --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; min-height: 100vh; display: flex; background: var(--tk-bg); color: var(--tk-ink); font-family: "Season Sans", "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif; font-size: 14px; } .toknz-overview-shell * { box-sizing: border-box; } .toknz-overview-shell a { color: inherit; } .toknz-overview-shell button { font: inherit; } .toknz-overview-shell svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .toknz-sidebar { width: 248px; flex: 0 0 248px; height: 100vh; position: sticky; top: 0; z-index: 30; display: flex; flex-direction: column; overflow-y: auto; padding: 20px 15px 16px; background: var(--tk-surface); border-right: 1px solid var(--tk-border); } .toknz-wordmark { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 3px 9px 22px; font-size: 20px; font-weight: 750; letter-spacing: -.04em; } .toknz-logo { display: block; width: 80px; max-width: 100%; height: auto; } .toknz-nav { display: flex; flex-direction: column; gap: 23px; } .toknz-nav-section { display: grid; gap: 2px; } .toknz-nav-label { padding: 0 12px 7px; color: var(--tk-faint); font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; } .toknz-nav-item { min-height: 37px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: var(--tk-text); font-size: 14px; font-weight: 550; transition: color .15s, background .15s; } .toknz-nav-item:hover { color: var(--tk-ink); background: var(--tk-bg); } .toknz-nav-item.is-active { color: var(--tk-green); background: var(--tk-green-tint); font-weight: 650; } .toknz-nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; } .toknz-nav-count { margin-left: auto; padding: 1px 7px; border-radius: 999px; color: var(--tk-violet); background: var(--tk-violet-tint); font-size: 11px; font-weight: 650; } .toknz-account { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 16px 8px 0; border-top: 1px solid var(--tk-border-soft); } .toknz-account > div { min-width: 0; flex: 1; } .toknz-account strong, .toknz-account span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toknz-account strong { font-size: 13px; font-weight: 650; } .toknz-account span { margin-top: 1px; color: var(--tk-muted); font-size: 12.5px; } .toknz-account button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; color: var(--tk-muted); background: transparent; cursor: pointer; } .toknz-account button:hover { color: var(--tk-ink); background: var(--tk-bg); } .toknz-account svg { width: 16px; height: 16px; } .toknz-main { min-width: 0; flex: 1; } .toknz-topbar { height: 66px; position: sticky; top: 0; z-index: 20; display: flex; align-items: stretch; padding: 0 32px; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--tk-border); backdrop-filter: blur(8px); } .toknz-topbar-tab { display: flex; align-items: center; padding-top: 2px; border-bottom: 2px solid var(--tk-ink); font-size: 15px; font-weight: 650; } .toknz-topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .toknz-topbar-actions form, .toknz-empty-actions form { display: flex; margin: 0; } .toknz-content { width: 100%; max-width: 1400px; display: flex; flex-direction: column; gap: 20px; margin: 0 auto; padding: 28px 32px 56px; } .toknz-button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 650; line-height: 1; cursor: pointer; transition: opacity .15s, transform .15s, box-shadow .15s; } .toknz-button:hover { opacity: .85; } .toknz-button:active { transform: scale(.98); } .toknz-button:disabled { opacity: .45; cursor: not-allowed; transform: none; } .toknz-button[data-active="1"] { color: #fff; background: var(--tk-violet); border-color: var(--tk-violet); } .toknz-button svg { width: 16px; height: 16px; } .toknz-button-ghost { color: var(--tk-ink); background: var(--tk-surface); border-color: var(--tk-border); } .toknz-button-primary { color: white !important; background: var(--tk-ink); border-color: var(--tk-ink); } .toknz-overview-shell .toknz-button-violet { color: #fff; background: var(--tk-violet); border-color: var(--tk-violet); } .toknz-page-header { display: flex; align-items: flex-start; gap: 20px; } .toknz-page-title { min-width: 250px; } .toknz-page-title h1 { color: var(--tk-ink); font-size: 28px; font-weight: 650; letter-spacing: -.025em; line-height: 1.15; } .toknz-page-title p { margin: 5px 0 0; color: var(--tk-muted); font-size: 13px; } .toknz-page-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; flex-wrap: wrap; } .toknz-segmented { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--tk-sunken); } .toknz-segmented a { min-width: 38px; padding: 6px 9px; border-radius: 8px; color: var(--tk-text); font-size: 12px; font-weight: 600; text-align: center; } .toknz-segmented a.is-selected { color: #f9f7f4; background: var(--tk-ink); } .toknz-savings { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 26px 30px; border: 1px solid var(--tk-violet-border); border-radius: 20px 20px 20px 48px; background: var(--tk-violet-tint); } .toknz-savings-copy { max-width: 920px; } .toknz-eyebrow { display: block; color: var(--tk-violet); font-size: 9.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; } .toknz-savings h2 { margin-top: 6px; color: var(--tk-ink); font-size: 21px; font-weight: 650; letter-spacing: -.02em; } .toknz-savings mark { padding: 0 3px; color: var(--tk-violet); background: rgba(154,136,216,.22); } .toknz-savings-value { margin-top: 7px; font-size: 46px; font-weight: 750; letter-spacing: -.045em; line-height: 1; } .toknz-savings-value span { margin-left: 5px; color: var(--tk-text); font-size: 16px; font-weight: 550; letter-spacing: 0; } .toknz-savings-year { margin-top: 6px; color: var(--tk-text); font-size: 14px; font-weight: 550; } .toknz-savings p { max-width: 810px; margin: 9px 0 0; color: var(--tk-text); font-size: 12.5px; line-height: 1.5; } .toknz-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .toknz-card { overflow: hidden; border: 1px solid var(--tk-border-soft); border-radius: 16px; background: var(--tk-surface); box-shadow: var(--tk-shadow); } .toknz-kpi { min-height: 160px; padding: 18px 20px; } .toknz-kpi-label { display: block; color: var(--tk-text); font-size: 13px; font-weight: 550; } .toknz-kpi-value { margin-top: 8px; color: var(--tk-ink); font-size: 34px; font-weight: 650; letter-spacing: -.035em; line-height: 1.15; } .toknz-kpi-value small { margin-left: 3px; color: var(--tk-muted); font-size: 16px; font-weight: 550; letter-spacing: 0; } .toknz-kpi-value.is-alert { color: var(--tk-orange); } .toknz-kpi-note, .toknz-delta { margin-top: 7px; color: var(--tk-muted); font-size: 12px; font-weight: 550; } .toknz-delta.is-decrease { color: var(--tk-green); } .toknz-delta.is-increase { color: var(--tk-orange); } .toknz-meter { height: 6px; overflow: hidden; margin-top: 13px; border-radius: 999px; background: var(--tk-sunken); } .toknz-meter span { display: block; height: 100%; border-radius: inherit; background: var(--tk-green-bright); } .toknz-meter span.is-risk-critical, .toknz-meter span.is-risk-high { background: var(--tk-orange); } .toknz-meter span.is-risk-medium { background: var(--tk-yellow); } .toknz-meter span.is-risk-low { background: var(--tk-green-bright); } .toknz-severity { width: fit-content; display: inline-flex; align-items: center; padding: 3px 8px 2px; border-radius: 999px; font-size: 10.5px; font-weight: 650; letter-spacing: .045em; line-height: 1.4; text-transform: uppercase; } .toknz-kpi .toknz-severity { margin-top: 7px; } .toknz-severity-critical { color: var(--tk-orange); background: rgba(201,80,15,.12); } .toknz-severity-high { color: #8a6310; background: #fcf3d6; } .toknz-severity-medium { color: var(--tk-blue); background: var(--tk-blue-tint); } .toknz-severity-low { color: var(--tk-green); background: var(--tk-green-tint); } .toknz-severity-info { color: var(--tk-muted); background: var(--tk-sunken); } .toknz-two-column { display: grid; grid-template-columns: repeat(2, minmax(420px, 1fr)); gap: 16px; } .toknz-card-header { min-height: 70px; display: flex; align-items: center; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--tk-border-soft); } .toknz-card-header h2 { color: var(--tk-ink); font-size: 17px; font-weight: 650; letter-spacing: -.015em; } .toknz-card-header p { margin: 2px 0 0; color: var(--tk-muted); font-size: 12.5px; } .toknz-total-pill { margin-left: auto; padding: 4px 9px; border-radius: 7px; color: var(--tk-text); background: var(--tk-sunken); font-size: 11.5px; font-weight: 600; } .toknz-card-link { margin-left: auto; color: var(--tk-violet) !important; font-size: 12.5px; font-weight: 650; white-space: nowrap; } .toknz-card-link:hover { opacity: .8; } .toknz-chart-body { padding: 22px 20px 18px; } .toknz-bars { height: 170px; display: flex; align-items: flex-end; gap: 5px; border-bottom: 1px solid var(--tk-border-soft); } .toknz-bars i { min-height: 2px; flex: 1; border-radius: 4px 4px 0 0; background: var(--tk-violet-soft); } .toknz-bars i.is-peak { background: var(--tk-violet); } .toknz-chart-empty { width: 100%; align-self: center; color: var(--tk-muted); font-size: 12px; text-align: center; } .toknz-chart-axis { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; color: var(--tk-muted); font-size: 11px; } .toknz-chart-axis span:nth-child(2) { text-align: center; } .toknz-chart-axis span:last-child { text-align: right; } .toknz-severity-body { padding: 26px 20px 20px; } .toknz-severity-stack { height: 12px; display: flex; overflow: hidden; border-radius: 999px; background: var(--tk-sunken); } .toknz-severity-stack span:first-child { border-radius: 999px 0 0 999px; } .toknz-severity-stack span:last-child { border-radius: 0 999px 999px 0; } .toknz-severity-stack .is-high, .toknz-legend .is-high { background: var(--tk-orange); } .toknz-severity-stack .is-medium, .toknz-legend .is-medium { background: var(--tk-yellow); } .toknz-severity-stack .is-low, .toknz-legend .is-low { background: #77b32b; } .toknz-severity-stack .is-info, .toknz-legend .is-info { background: var(--tk-border); } .toknz-legend { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 22px; color: var(--tk-text); font-size: 12.5px; } .toknz-legend span { display: inline-flex; align-items: center; gap: 7px; } .toknz-legend i { width: 9px; height: 9px; border-radius: 3px; } .toknz-legend strong { color: var(--tk-ink); } .toknz-card-footnote { margin: 24px 0 0; color: var(--tk-muted); font-size: 12.5px; line-height: 1.55; } .toknz-table-wrap { overflow-x: auto; } .toknz-people-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 12.5px; } .toknz-people-table th { padding: 10px 14px; color: var(--tk-faint); border-bottom: 1px solid var(--tk-border-soft); font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-align: left; text-transform: uppercase; } .toknz-people-table th:nth-last-child(-n+3), .toknz-people-table td:nth-last-child(-n+3) { text-align: center; } .toknz-people-table th:last-child, .toknz-people-table td:last-child { text-align: right; } .toknz-people-table td { padding: 10px 14px; border-bottom: 1px solid var(--tk-border-soft); color: var(--tk-text); } .toknz-people-table tr:last-child td { border-bottom: 0; } .toknz-people-table tbody tr:hover { background: var(--tk-bg); } .toknz-person-link { display: block; } .toknz-person-link strong, .toknz-person-link span { display: block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toknz-person-link strong { color: var(--tk-ink); font-weight: 650; } .toknz-person-link span { margin-top: 1px; color: var(--tk-muted); font-size: 11.5px; } .toknz-table-empty { padding: 36px !important; color: var(--tk-muted) !important; text-align: center !important; } .toknz-alert-list { display: flex; flex-direction: column; } .toknz-alert-row { min-height: 62px; display: flex; align-items: flex-start; gap: 11px; padding: 12px 18px; border-bottom: 1px solid var(--tk-border-soft); transition: background .15s; } .toknz-alert-row:last-child { border-bottom: 0; } .toknz-alert-row:hover { background: var(--tk-bg); } .toknz-alert-copy { min-width: 0; flex: 1; } .toknz-alert-copy strong, .toknz-alert-copy > span { display: block; } .toknz-alert-copy strong { color: var(--tk-ink); font-size: 12.5px; font-weight: 600; line-height: 1.35; } .toknz-alert-copy > span { margin-top: 3px; overflow: hidden; color: var(--tk-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } .toknz-alert-copy b { margin-right: 4px; padding: 1px 5px; border-radius: 5px; color: var(--tk-text); background: var(--tk-sunken); font-weight: 650; } .toknz-alert-empty { padding: 45px 20px; color: var(--tk-muted); font-size: 13px; text-align: center; } .toknz-empty-card { max-width: 680px; margin: 10vh auto 0; padding: 52px 48px; border: 1px solid var(--tk-border-soft); border-radius: 20px 20px 20px 48px; background: var(--tk-surface); box-shadow: var(--tk-shadow); text-align: center; } .toknz-empty-card h1 { margin-top: 9px; font-size: 28px; } .toknz-empty-card p { margin: 9px auto 24px; color: var(--tk-text); } .toknz-empty-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .toknz-overview-shell :is(a, button):focus-visible { outline: 3px solid rgba(83,56,153,.3); outline-offset: 2px; } @media (max-width: 1180px) { .toknz-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toknz-two-column { grid-template-columns: 1fr; } } @media (max-width: 900px) { .toknz-overview-shell { display: block; } .toknz-sidebar { width: 100%; height: auto; position: relative; display: block; padding: 12px 18px; border-right: 0; border-bottom: 1px solid var(--tk-border); } .toknz-wordmark { padding: 3px 4px 10px; } .toknz-nav { display: flex; flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 2px; } .toknz-nav-section { display: flex; gap: 3px; } .toknz-nav-label, .toknz-account { display: none; } .toknz-nav-item { min-width: max-content; } .toknz-topbar { top: 0; height: 58px; padding: 0 20px; } .toknz-content { padding: 24px 20px 44px; } .toknz-page-header { display: block; } .toknz-page-controls { justify-content: flex-start; margin: 16px 0 0; } } @media (max-width: 640px) { .toknz-topbar-tab { display: none; } .toknz-topbar-actions { width: 100%; margin: 0; } .toknz-topbar-actions form { flex: 1; } .toknz-topbar-actions .toknz-button { width: 100%; } .toknz-content { padding: 20px 14px 40px; gap: 14px; } .toknz-page-title h1 { font-size: 25px; } .toknz-page-controls { align-items: stretch; } .toknz-segmented { width: 100%; } .toknz-segmented a { flex: 1; } .toknz-page-controls > .toknz-button { flex: 1; } .toknz-savings { display: block; padding: 24px 22px; border-radius: 18px 18px 18px 36px; } .toknz-savings-value { font-size: 39px; } .toknz-savings .toknz-button { margin-top: 20px; } .toknz-kpi-grid { grid-template-columns: 1fr; } .toknz-kpi { min-height: 0; } .toknz-card-header { padding: 14px 16px; } .toknz-chart-body, .toknz-severity-body { padding-left: 16px; padding-right: 16px; } .toknz-bars { height: 140px; gap: 3px; } .toknz-empty-card { margin-top: 5vh; padding: 40px 24px; } } /* ---------- Toknz shared application primitives ---------- */ .toknz-guest-shell { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(circle at 10% 10%, rgba(154,136,216,.16), transparent 30%), radial-gradient(circle at 90% 90%, rgba(149,211,36,.12), transparent 28%), var(--tk-bg); } .toknz-guest-header { min-height: 72px; display: flex; align-items: center; gap: 18px; padding: 0 32px; border-bottom: 1px solid var(--tk-border); background: rgba(255,255,255,.9); } .toknz-guest-header .toknz-wordmark { padding: 0; } .toknz-guest-header nav { display: flex; gap: 8px; margin-left: auto; } .toknz-guest-main { width: 100%; flex: 1; display: grid; place-items: center; padding: 48px 24px; } .toknz-auth-card { width: 100%; max-width: 460px; padding: 34px; border: 1px solid var(--tk-border-soft); border-radius: 20px 20px 20px 42px; background: var(--tk-surface); box-shadow: 0 20px 70px rgba(35,33,30,.08); } .toknz-auth-card > .toknz-card-body { padding: 0; } .toknz-auth-card h1 { margin: 8px 0 4px; font-size: 28px; letter-spacing: -.025em; } .toknz-auth-card > p, .toknz-auth-intro { margin: 0 0 24px; color: var(--tk-text); } .toknz-auth-switch { margin: 22px 0 0; color: var(--tk-muted); font-size: 13px; text-align: center; } .toknz-auth-switch a { color: var(--tk-violet); font-weight: 650; } .toknz-form-stack, .toknz-stack { display: flex; flex-direction: column; gap: 16px; } .toknz-field { display: flex; flex-direction: column; gap: 7px; } .toknz-field > span, .toknz-field > label, .toknz-field-label { color: var(--tk-text); font-size: 12.5px; font-weight: 650; } .toknz-field small, .toknz-field-hint { color: var(--tk-muted); font-size: 11.5px; line-height: 1.45; } .toknz-input, .toknz-select, .toknz-textarea { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--tk-border); border-radius: 10px; outline: 0; color: var(--tk-ink); background: var(--tk-surface); font: inherit; transition: border-color .15s, box-shadow .15s; } .toknz-textarea { min-height: 130px; resize: vertical; line-height: 1.5; } .toknz-input::placeholder, .toknz-textarea::placeholder { color: var(--tk-faint); } .toknz-input:focus, .toknz-select:focus, .toknz-textarea:focus { border-color: var(--tk-violet-soft); box-shadow: 0 0 0 3px rgba(83,56,153,.12); } .toknz-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .toknz-card-body { display: block; overflow-x: auto; padding: 20px; } .toknz-card > :is(.toknz-grid-2,.toknz-grid-3,.toknz-grid-4) { padding: 16px; } .toknz-grid-2, .toknz-grid-3, .toknz-grid-4 { display: grid; gap: 16px; } .toknz-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toknz-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .toknz-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .toknz-section-label { margin: 8px 0 -8px; color: var(--tk-faint); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .toknz-banner { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border: 1px solid var(--tk-border-soft); border-radius: 12px; color: var(--tk-text); background: var(--tk-surface); font-size: 13px; line-height: 1.5; } .toknz-banner strong { color: var(--tk-ink); } .toknz-banner-success { color: var(--tk-green); background: var(--tk-green-tint); border-color: #dcecc3; } .toknz-banner-warning { color: #755510; background: #fcf3d6; border-color: #f0dfab; } .toknz-banner-error { color: #9a3c0c; background: #fcece4; border-color: #efc9b4; } .toknz-banner-info { color: var(--tk-violet); background: var(--tk-violet-tint); border-color: var(--tk-violet-border); } .toknz-banner-neutral { color: var(--tk-text); background: var(--tk-sunken); border-color: var(--tk-border-soft); } .toknz-banner.is-success { color: var(--tk-green); background: var(--tk-green-tint); border-color: #dcecc3; } .toknz-banner.is-warning { color: #755510; background: #fcf3d6; border-color: #f0dfab; } .toknz-banner a { color: var(--tk-violet); font-weight: 650; } .toknz-table-wrap { width: 100%; overflow-x: auto; } .toknz-table { width: 100%; border-collapse: collapse; min-width: 640px; color: var(--tk-text); font-size: 12.5px; } .toknz-table th { padding: 10px 14px; border-bottom: 1px solid var(--tk-border-soft); color: var(--tk-faint); font-size: 10.5px; font-weight: 650; letter-spacing: .055em; text-align: left; text-transform: uppercase; white-space: nowrap; } .toknz-table td { padding: 11px 14px; border-bottom: 1px solid var(--tk-border-soft); vertical-align: middle; } .toknz-table tbody tr:last-child td { border-bottom: 0; } .toknz-table tbody tr:hover { background: var(--tk-bg); } .toknz-table-row-link { cursor: pointer; } .toknz-table .is-number, .toknz-table th.is-number { text-align: right; font-variant-numeric: tabular-nums; } .toknz-table .is-center, .toknz-table th.is-center { text-align: center; } .toknz-table a { color: var(--tk-violet); font-weight: 600; } .toknz-table-empty { padding: 34px 16px !important; color: var(--tk-muted); text-align: center; } .toknz-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 6px; color: var(--tk-text); background: var(--tk-sunken); font-family: var(--mono); font-size: 11px; font-weight: 600; } .toknz-pill-success { color: var(--tk-green); background: var(--tk-green-tint); } .toknz-filter-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .toknz-filter-chip { min-height: 30px; padding: 6px 11px; border: 1px solid var(--tk-border); border-radius: 999px; color: var(--tk-text); background: var(--tk-surface); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; } .toknz-filter-chip:hover, .toknz-filter-chip.is-active { color: #fff; background: var(--tk-violet); border-color: var(--tk-violet); } .toknz-finding-panel { overflow: hidden; border: 1px solid var(--tk-border-soft); border-radius: 14px; background: var(--tk-surface); } .toknz-finding-summary { padding: 14px 16px; border-bottom: 1px solid var(--tk-border-soft); color: var(--tk-text); font-size: 13px; } .toknz-finding-body { display: flex; flex-direction: column; gap: 14px; padding: 16px; } .toknz-evidence, .toknz-finding-evidence { overflow-x: auto; padding: 11px 12px; border-radius: 9px; color: var(--tk-text); background: var(--tk-sunken); font-family: var(--mono); font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .toknz-finding-evidence .k { color: var(--tk-muted); } .toknz-finding-evidence .v { color: var(--tk-ink); font-weight: 650; } .toknz-bars-compact { height: 92px; display: flex; align-items: flex-end; gap: 3px; } .toknz-bars-compact > i, .toknz-bars-compact > span { min-height: 2px; flex: 1; border-radius: 3px 3px 0 0; background: var(--tk-violet-soft); } .toknz-bars-compact .is-alert { background: var(--tk-orange); } .toknz-bars-compact .off { background: var(--tk-orange); } .toknz-bar-compact { height: 112px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 4px; } .toknz-bar-fill { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--tk-violet-soft); } .toknz-bar-label { color: var(--tk-faint); font-size: 9px; text-align: center; } .toknz-list { display: flex; flex-direction: column; } .toknz-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--tk-border-soft); } .toknz-list-row:last-child { border-bottom: 0; } .toknz-list-row:hover { background: var(--tk-bg); } .toknz-list-row-main { min-width: 0; flex: 1; } .toknz-list-row-main strong, .toknz-list-row-main span { display: block; } .toknz-list-row-main span { margin-top: 2px; color: var(--tk-muted); font-size: 11.5px; } .toknz-alert-sub, .toknz-alert-rec { margin-top: 5px; color: var(--tk-muted); font-size: 12px; line-height: 1.45; } .toknz-finding-list { display: flex; flex-direction: column; gap: 12px; } .toknz-finding-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 10px 0; } .toknz-validation-success { color: var(--tk-green); font-size: 12px; font-weight: 650; } .toknz-validation-error { color: var(--tk-orange); font-size: 12px; font-weight: 650; } .toknz-validation-status { min-height: 18px; margin-top: 8px; } .toknz-analysis-meta { margin-bottom: 14px; color: var(--tk-muted); font-family: var(--mono); font-size: 11px; } .toknz-onboarding { width: 100%; max-width: 880px; display: flex; flex-direction: column; gap: 20px; margin: 0 auto; } .toknz-card-header-copy { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .toknz-card-header-copy h2 { font-size: 17px; } .toknz-card-header-copy p, .toknz-card-body > p { margin: 4px 0 16px; color: var(--tk-text); font-size: 12.5px; } .toknz-card-header-copy code, .toknz-card-body code { padding: 1px 4px; border-radius: 4px; background: var(--tk-sunken); font-family: var(--mono); font-size: .92em; } .toknz-optional { padding: 3px 7px; border-radius: 999px; color: var(--tk-violet); background: var(--tk-violet-tint); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .toknz-field-help { color: var(--tk-muted); font-size: 11.5px; } .toknz-spinner { width: 16px; height: 16px; display: inline-block; flex: 0 0 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: toknz-spin .7s linear infinite; } @keyframes toknz-spin { to { transform: rotate(360deg); } } .toknz-prose { color: var(--tk-text); font-size: 13px; line-height: 1.65; } .toknz-prose :is(h1,h2,h3) { margin: 1.4em 0 .5em; color: var(--tk-ink); } .toknz-prose h1 { font-size: 21px; } .toknz-prose h2 { font-size: 18px; } .toknz-prose h3 { font-size: 15px; } .toknz-prose p { margin: .7em 0; } .toknz-prose :is(ul,ol) { padding-left: 1.4em; } .toknz-prose code { padding: 2px 5px; border-radius: 5px; background: var(--tk-sunken); font-family: var(--mono); font-size: .92em; } .toknz-prose pre { overflow-x: auto; padding: 12px; border-radius: 9px; background: var(--tk-sunken); } .toknz-prose a { color: var(--tk-violet); text-decoration: underline; text-underline-offset: 2px; } .toknz-connection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; } .toknz-muted { color: var(--tk-muted); } .toknz-meta { color: var(--tk-muted); font-size: 11.5px; } .toknz-mono { font-family: var(--mono); } .toknz-align-right { text-align: right !important; font-variant-numeric: tabular-nums; } .toknz-align-center { text-align: center !important; } .toknz-inline-item { display: inline-block; margin: 1px 5px 1px 0; } .toknz-severity-text-high { color: var(--tk-orange); font-weight: 650; } .toknz-severity-text-medium { color: #8a6310; font-weight: 650; } .toknz-card-meta { margin-left: auto; color: var(--tk-muted); font-size: 12px; text-align: right; } .toknz-card-header-main { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .toknz-card-status { min-width: 130px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; } .toknz-field-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; } .toknz-text-link { color: var(--tk-violet) !important; font-weight: 650; } .toknz-muted-link { color: var(--tk-muted) !important; } .toknz-muted-link:hover { color: var(--tk-violet) !important; } .toknz-code { font-family: var(--mono); } .toknz-spacer { flex: 1; } @media (max-width: 900px) { .toknz-grid-3, .toknz-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .toknz-grid-2, .toknz-grid-3, .toknz-grid-4 { grid-template-columns: 1fr; } .toknz-guest-header { padding: 0 18px; } .toknz-guest-main { padding: 28px 16px; } .toknz-auth-card { padding: 28px 22px; border-radius: 18px 18px 18px 34px; } .toknz-field-row { grid-template-columns: 1fr; } .toknz-card-header-main { flex-direction: column; } .toknz-card-status { align-items: flex-start; text-align: left; } }