:root { --ink:#e9eee8; --muted:#8b968e; --faint:#5f6a62; --bg:#111513; --panel:#191f1b; --panel-2:#202821; --line:#2d3930; --lime:#d4f36a; --orange:#ff9e62; --red:#ff6f61; --cyan:#7ae2d0; --shadow:0 18px 45px rgba(0,0,0,.22); }
* { box-sizing:border-box; } html,body { overflow-x:hidden; } body { margin:0; background:var(--bg); color:var(--ink); font-family:'Manrope',sans-serif; font-size:14px; } button,textarea,input { font:inherit; } button { cursor:pointer; } .app-shell { min-height:100vh; display:flex; }
.sidebar { width:246px; border-right:1px solid var(--line); padding:28px 18px 20px; display:flex; flex-direction:column; background:#141916; flex-shrink:0; } .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:-.8px; padding:0 10px 42px; } .brand-mark { position:relative; width:24px; height:28px; display:block; flex-shrink:0; } .brand-mark::before,.brand-mark::after { content:''; position:absolute; display:block; clip-path:polygon(50% 0,78% 35%,100% 62%,86% 88%,60% 100%,30% 92%,7% 64%,24% 38%); } .brand-mark::before { inset:1px 2px 0; background:var(--lime); transform-origin:50% 90%; animation:flame-flicker 1.15s ease-in-out infinite alternate; } .brand-mark::after { width:11px; height:17px; left:7px; bottom:2px; background:#f2ffc0; transform:rotate(4deg); animation:flame-core .8s ease-in-out infinite alternate; } @keyframes flame-flicker { 0% { transform:rotate(-4deg) scale(1,.96) skewX(2deg); } 100% { transform:rotate(5deg) scale(.92,1.04) skewX(-3deg); } } @keyframes flame-core { 0% { transform:translateX(-1px) rotate(2deg) scale(.92,.96); } 100% { transform:translateX(1px) rotate(7deg) scale(1.04,1.02); } } .brand-accent { color:var(--lime); } .workspace-label,.eyebrow,.table-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1.3px; color:var(--faint); } .workspace-label { padding:0 10px 13px; }
.nav-list { display:grid; gap:4px; } .nav-item { border:0; color:var(--muted); text-align:left; background:transparent; padding:12px 10px; border-radius:4px; display:flex; align-items:center; gap:12px; transition:.18s; } .nav-item:hover,.nav-item.active { color:var(--ink); background:var(--panel-2); } .nav-item.active { box-shadow:inset 2px 0 var(--lime); } .nav-icon { font:10px 'DM Mono'; color:var(--faint); width:20px; } .nav-item.active .nav-icon { color:var(--lime); } .sidebar-foot { margin-top:auto; padding:18px 8px 0; border-top:1px solid var(--line); } .system-status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; margin-bottom:18px; } .system-status small { margin-left:auto; color:var(--faint); font:9px 'DM Mono'; } .status-dot,.live-label i { width:7px; height:7px; border-radius:50%; display:inline-block; background:var(--lime); box-shadow:0 0 10px var(--lime); } .user-chip { display:flex; align-items:center; gap:9px; font-size:12px; } .user-chip b,.user-chip small { display:block; } .user-chip small { color:var(--faint); font:10px 'DM Mono'; margin-top:2px; } .avatar { background:#d8a582; color:#241710; width:28px; height:28px; display:grid; place-items:center; font:10px 'DM Mono'; border:0; } .avatar.small { border-radius:50%; width:25px; height:25px; font-size:9px; } .more { margin-left:auto; color:var(--faint); }
.main-content { min-width:0; flex:1; } .topbar { height:78px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,4vw,54px); } .breadcrumb { font:11px 'DM Mono'; letter-spacing:1px; color:var(--faint); } .breadcrumb strong { color:var(--ink); font-weight:400; } .slash { margin:0 12px; color:#3b473d; } .top-actions { display:flex; align-items:center; gap:20px; } .live-label { color:var(--muted); font:10px 'DM Mono'; display:flex; align-items:center; gap:8px; } .icon-button { background:none; border:1px solid var(--line); color:var(--muted); width:27px; height:27px; font:11px 'DM Mono'; } .page-container { max-width:1390px; padding:44px clamp(22px,4vw,54px) 70px; margin:auto; }
.page-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-bottom:34px; } h1 { font-size:clamp(27px,3vw,39px); letter-spacing:-1.8px; line-height:1.06; margin:8px 0 10px; } h2 { font-size:19px; letter-spacing:-.6px; margin:0; } h3 { font-size:14px; margin:0; } .lede { color:var(--muted); margin:0; line-height:1.7; max-width:600px; } .eyebrow { color:var(--lime); } .button { border:1px solid var(--line); background:var(--panel-2); color:var(--ink); padding:11px 15px; border-radius:3px; font-size:12px; font-weight:700; } .button:hover { border-color:var(--lime); } .button.primary { background:var(--lime); border-color:var(--lime); color:#152014; } .button.subtle { background:transparent; color:var(--muted); }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:32px; } .metric,.panel { background:var(--panel); border:1px solid var(--line); } .metric { padding:19px 20px; min-height:116px; } .metric-label { color:var(--muted); font-size:11px; display:flex; justify-content:space-between; } .metric-value { font-size:31px; letter-spacing:-1.5px; margin:11px 0 5px; } .metric-detail { color:var(--faint); font:10px 'DM Mono'; } .up { color:var(--lime); } .orange { color:var(--orange); } .red { color:var(--red); }
.two-col { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(310px,.75fr); gap:14px; } .panel { padding:22px; } .panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:22px; } .panel-head p { margin:5px 0 0; font-size:12px; color:var(--muted); } .panel-link { color:var(--lime); background:none; border:0; font:11px 'DM Mono'; padding:0; }
.activity { display:grid; gap:0; } .activity-row { display:grid; grid-template-columns:68px 1fr auto; gap:14px; align-items:center; border-top:1px solid var(--line); padding:14px 0; } .activity-row:first-child { border-top:0; padding-top:0; } .activity-time { color:var(--faint); font:10px 'DM Mono'; } .activity-title { font-weight:700; font-size:12px; } .activity-sub { color:var(--muted); font-size:11px; margin-top:4px; } .tag { padding:5px 7px; border:1px solid #425047; color:var(--lime); font:9px 'DM Mono'; text-transform:uppercase; } .tag.orange-tag { color:var(--orange); border-color:#654b3e; } .mini-bars { display:grid; gap:11px; } .bar-line { display:grid; grid-template-columns:89px 1fr 30px; gap:10px; align-items:center; font-size:11px; color:var(--muted); } .bar-track { height:5px; background:#303a32; overflow:hidden; } .bar-fill { height:100%; background:var(--lime); } .bar-fill.orange-fill { background:var(--orange); } .bar-value { text-align:right; color:var(--ink); font:10px 'DM Mono'; }
.scan-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.7fr); gap:18px; } .input-panel { padding:0; overflow:hidden; } .input-top { padding:22px 22px 14px; display:flex; justify-content:space-between; } .counter { color:var(--faint); font:10px 'DM Mono'; } textarea { width:100%; resize:vertical; min-height:245px; background:#151b17; color:var(--ink); border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:21px; outline:0; line-height:1.7; } textarea:focus { box-shadow:inset 0 0 0 1px var(--lime); } .input-foot { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; } .hint { color:var(--faint); font-size:11px; } .verdict { min-height:100%; } .verdict-empty { min-height:300px; display:grid; place-items:center; text-align:center; color:var(--muted); } .verdict-empty strong { display:block; color:var(--ink); margin-bottom:8px; } .verdict-result { border-left:3px solid var(--red); padding-left:16px; } .verdict-result.safe { border-color:var(--lime); } .verdict-title { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; } .verdict-icon { width:27px; height:27px; display:grid; place-items:center; background:var(--red); color:#241411; font-weight:800; } .safe .verdict-icon { background:var(--lime); } .confidence { color:var(--muted); font-size:12px; margin:9px 0 22px; } .summary-box { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; color:var(--muted); line-height:1.65; font-size:12px; } .ioc-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; } .ioc { color:var(--orange); border:1px solid #5c4235; padding:5px 7px; font:10px 'DM Mono'; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .dna-hero { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; } .score-ring { border:1px solid var(--lime); width:88px; height:88px; display:grid; place-items:center; text-align:center; border-radius:50%; } .score-ring strong { display:block; font-size:23px; } .score-ring span { color:var(--muted); font:9px 'DM Mono'; } .chain { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; } .chain-step { background:var(--panel-2); border:1px solid var(--line); padding:9px 11px; font:10px 'DM Mono'; color:var(--lime); } .chain-arrow { color:var(--faint); }
.chat-layout { display:grid; grid-template-columns:minmax(0,1.2fr) 310px; gap:14px; } .chat-window { min-height:560px; display:flex; flex-direction:column; } .chat-head { display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding-bottom:17px; } .scammer-mark { width:34px; height:34px; border:1px solid var(--orange); display:grid; place-items:center; color:var(--orange); font:14px 'DM Mono'; } .chat-status { color:var(--lime); font:9px 'DM Mono'; margin-top:3px; } .messages { flex:1; padding:24px 0; display:grid; align-content:start; gap:17px; } .message { max-width:76%; } .message.scammer { justify-self:start; } .message.user { justify-self:end; text-align:right; } .message-label { color:var(--faint); font:9px 'DM Mono'; margin-bottom:6px; } .bubble { background:var(--panel-2); border:1px solid var(--line); padding:12px 14px; font-size:12px; line-height:1.6; text-align:left; } .user .bubble { background:#303a24; border-color:#576e35; } .chat-input { border-top:1px solid var(--line); padding-top:15px; display:flex; gap:9px; } .chat-input input { flex:1; min-width:0; background:#151b17; border:1px solid var(--line); color:var(--ink); padding:12px; outline:0; } .chat-input input:focus { border-color:var(--lime); }
.graph-toolbar { display:flex; justify-content:space-between; align-items:center; margin:-12px 0 14px; } .graph-legend { display:flex; gap:15px; color:var(--muted); font:10px 'DM Mono'; } .graph-legend span { display:flex; align-items:center; gap:6px; } .legend-dot { width:7px; height:7px; border-radius:50%; display:inline-block; } .campaign-dot { background:var(--lime); } .dna-dot { background:var(--cyan); } .ioc-dot { background:var(--orange); } .graph-area { min-height:520px; position:relative; overflow:hidden; background:radial-gradient(circle at 48% 45%,#29362d 0,#1b241e 24%,#191f1b 58%); } .graph-area:before { content:''; position:absolute; inset:0; opacity:.3; background-image:linear-gradient(#455247 1px,transparent 1px),linear-gradient(90deg,#455247 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent); } .graph-svg { position:absolute; inset:0; width:100%; height:100%; z-index:0; } .graph-svg line { stroke:#647866; stroke-width:1.5; opacity:.7; } .graph-loading,.graph-empty { position:absolute; inset:0; display:grid; place-content:center; text-align:center; color:var(--muted); gap:7px; } .graph-empty strong { color:var(--ink); } .node { position:absolute; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:50%; z-index:1; font:9px 'DM Mono'; text-align:center; overflow:hidden; text-overflow:ellipsis; padding:8px; } .node.campaign { width:110px; height:110px; border:2px solid var(--lime); background:#35452c; color:var(--lime); } .node.dna { width:82px; height:82px; border:1px solid var(--cyan); background:#263d3a; color:var(--cyan); } .node.ioc { width:54px; height:54px; border:1px solid var(--orange); background:#4a3126; color:var(--orange); }
.campaign-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .campaign-card { padding:19px; background:var(--panel); border:1px solid var(--line); cursor:pointer; transition:.18s; } .campaign-card:hover { transform:translateY(-2px); border-color:#667a63; } .campaign-card .card-top { display:flex; justify-content:space-between; margin-bottom:26px; } .campaign-type { font:10px 'DM Mono'; color:var(--orange); } .campaign-card h3 { margin-bottom:7px; } .campaign-card p { color:var(--muted); font-size:11px; margin:0 0 18px; line-height:1.5; } .card-foot { border-top:1px solid var(--line); padding-top:13px; display:flex; justify-content:space-between; color:var(--faint); font:10px 'DM Mono'; } .filter-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.mode-banner { margin-bottom:18px; color:var(--orange); font:10px 'DM Mono'; letter-spacing:.04em; } .consent-row { display:flex; gap:8px; align-items:center; padding:12px 21px; color:var(--muted); font-size:11px; } .action-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; } .error-box { display:grid; gap:8px; margin-top:14px; padding:14px; border-left:3px solid var(--red); background:#2a1d1b; color:var(--muted); font-size:12px; } .error-box strong { color:var(--ink); } .empty-state { padding:30px 0; color:var(--muted); text-align:center; } .two-col > section { min-width:0; }
.automation-layout { display:grid; grid-template-columns:minmax(0,1.4fr) 300px; gap:14px; } .automation-list { display:grid; gap:10px; } .automation-row { display:flex; justify-content:space-between; gap:18px; padding:18px 0; border-top:1px solid var(--line); } .automation-row:first-child { border-top:0; padding-top:0; } .automation-row.is-off { opacity:.58; } .automation-title { display:flex; align-items:center; gap:9px; } .automation-title h3 { font-size:13px; } .automation-status { width:7px; height:7px; border-radius:50%; background:var(--faint); } .automation-status.is-on { background:var(--lime); box-shadow:0 0 10px var(--lime); } .automation-flow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0 8px; color:var(--muted); font-size:11px; } .automation-flow strong { color:var(--ink); font-weight:600; } .automation-arrow { color:var(--orange); font-family:'DM Mono'; } .automation-meta { color:var(--faint); font:10px 'DM Mono'; } .automation-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; } .toggle { width:37px; height:21px; padding:2px; border:1px solid var(--line); background:#151b17; border-radius:12px; } .toggle span { display:block; width:15px; height:15px; border-radius:50%; background:var(--faint); transition:.18s; } .toggle.is-on { border-color:var(--lime); background:#35452c; } .toggle.is-on span { background:var(--lime); transform:translateX(14px); } .automation-aside p { color:var(--muted); font-size:12px; line-height:1.7; margin:12px 0 24px; } .automation-event { display:flex; gap:11px; align-items:flex-start; border-top:1px solid var(--line); padding:14px 0; } .automation-event strong,.automation-event span:not(.tag) { display:block; } .automation-event strong { font-size:11px; margin-bottom:4px; } .automation-event span:not(.tag) { color:var(--muted); font-size:11px; line-height:1.5; }
.automation-form { margin-bottom:14px; } .automation-form-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:10px; align-items:end; } .automation-form label { color:var(--muted); font:10px 'DM Mono'; text-transform:uppercase; } .automation-form input,.automation-form select { display:block; width:100%; margin-top:7px; background:#151b17; border:1px solid var(--line); color:var(--ink); padding:11px; outline:0; } .automation-form input:focus,.automation-form select:focus { border-color:var(--lime); }
.toast { position:fixed; right:24px; bottom:24px; background:var(--lime); color:#162014; padding:12px 16px; font-size:12px; font-weight:700; transform:translateY(100px); opacity:0; transition:.22s; z-index:5; } .toast.show { transform:none; opacity:1; }
@media (max-width:900px) { .sidebar { width:68px; padding:22px 10px; } .brand { padding:0 9px 36px; } .brand>span:last-child,.workspace-label,.nav-item:not(.active)::after,.nav-item { font-size:0; } .nav-item { justify-content:center; padding:13px 5px; } .nav-icon { font-size:10px; text-align:center; } .sidebar-foot { padding-left:0; padding-right:0; } .system-status span:not(.status-dot),.system-status small,.user-chip span:not(.avatar) { display:none; } .user-chip { justify-content:center; } .metric-grid { grid-template-columns:repeat(2,1fr); } .two-col,.scan-layout,.chat-layout,.automation-layout { grid-template-columns:1fr; } .chat-window { min-height:500px; } }
@media (max-width:590px) { .topbar { height:64px; padding:0 18px; } .live-label { display:none; } .page-container { padding:30px 18px 50px; overflow:hidden; } .page-heading { display:block; } .page-heading .button { margin-top:18px; } .metric-grid { gap:8px; } .metric { padding:14px; min-height:100px; } .metric-value { font-size:25px; } .detail-grid,.campaign-grid { grid-template-columns:1fr; } .filter-row { flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding-bottom:4px; } .filter-row .button { flex:0 0 auto; } .panel { padding:17px; } .graph-area { min-height:410px; } .node.campaign { width:82px; height:82px; font-size:8px; } .node.ioc { width:44px; height:44px; font-size:8px; } }
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation:auto; }
	.brand { view-transition-name: brand; }
	.topbar { view-transition-name: topbar; }
	#page-kicker { view-transition-name: page-kicker; }
	.page-container { view-transition-name: page-content; }
	::view-transition-old(brand),::view-transition-new(brand),::view-transition-old(topbar),::view-transition-new(topbar) { animation-duration:.28s; }
	::view-transition-old(page-content) { animation:page-out .16s ease both; }
	::view-transition-new(page-content) { animation:page-in .3s cubic-bezier(.22,1,.36,1) both; }
	.page-container > .page-heading { animation:page-heading-in .38s cubic-bezier(.22,1,.36,1) both; }
	.page-container > .metric-grid,.page-container > .two-col,.page-container > .scan-layout,.page-container > .detail-grid,.page-container > .chat-layout,.page-container > .graph-toolbar,.page-container > .graph-area,.page-container > .campaign-grid,.page-container > .automation-layout,.page-container > .automation-form { animation:content-rise .42s cubic-bezier(.22,1,.36,1) .06s both; }
	.metric,.panel,.campaign-card,.automation-row { transition:transform .24s cubic-bezier(.22,1,.36,1),border-color .24s ease,box-shadow .24s ease; }
	.metric:hover,.panel:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.14); }
	.campaign-card:hover { transform:translateY(-4px); box-shadow:0 12px 25px rgba(0,0,0,.18); }
	.automation-row:hover { transform:translateX(3px); }
	.page-container > *:nth-child(2) { animation-delay:.1s; }
	.page-container > *:nth-child(3) { animation-delay:.14s; }
	.metric-grid > *, .campaign-grid > *, .automation-list > * { animation:content-rise .34s cubic-bezier(.22,1,.36,1) both; }
	.metric-grid > *:nth-child(2),.campaign-grid > *:nth-child(2),.automation-list > *:nth-child(2) { animation-delay:.05s; }
	.metric-grid > *:nth-child(3),.campaign-grid > *:nth-child(3),.automation-list > *:nth-child(3) { animation-delay:.1s; }
	.metric-grid > *:nth-child(4),.campaign-grid > *:nth-child(4),.automation-list > *:nth-child(4) { animation-delay:.15s; }
	.node { animation:node-pop .42s cubic-bezier(.22,1,.36,1) both; }
	.node:nth-of-type(3n) { animation-delay:.08s; }
	.node:nth-of-type(4n) { animation-delay:.14s; }
	.fail-moment { border:1px solid #654b3e; background:rgba(255,158,98,.08); padding:14px; margin:0 0 18px; }
	.fail-moment blockquote { margin:8px 0; color:var(--ink); font-size:14px; line-height:1.55; }
	.fail-moment > span { color:var(--orange); font:10px 'DM Mono'; text-transform:uppercase; }
	}
@keyframes page-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes page-out { from { opacity:1; } to { opacity:0; } }
@keyframes page-heading-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes content-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes node-pop { from { opacity:0; transform:translate(-50%,-50%) scale(.86); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }

@media (prefers-reduced-motion: no-preference) {
	.panel,.metric,.campaign-card,.automation-row { position:relative; overflow:hidden; }
	.panel::before,.metric::before,.campaign-card::before,.automation-row::before {
		content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
		background:radial-gradient(220px circle at var(--pointer-x) var(--pointer-y),rgba(212,243,106,.12),transparent 72%);
		transition:opacity .25s ease;
	}
	.panel:hover::before,.metric:hover::before,.campaign-card:hover::before,.automation-row:hover::before { opacity:1; }
	.button {
		transform:translate3d(var(--magnetic-x,0),var(--magnetic-y,0),0);
		transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .2s ease,box-shadow .2s ease;
	}
	.button:hover { box-shadow:0 8px 20px rgba(212,243,106,.12); }
}

@media (prefers-reduced-motion: reduce) {
	*,*::before,*::after {
		animation-duration:.01ms !important; animation-iteration-count:1 !important;
		scroll-behavior:auto !important; transition-duration:.01ms !important;
	}
	.button { transform:none !important; }
}

@media (pointer: coarse) {
	.panel::before,.metric::before,.campaign-card::before,.automation-row::before { display:none; }
}