.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-sm); height: fit-content; } /* Verdict color borders */ .authentic { border-top: 3px solid var(--authentic); } .aiGenerated { border-top: 3px solid var(--ai-generated); } .suspect { border-top: 3px solid var(--suspect); } /* Verdict header */ .verdictHeader { display: flex; align-items: center; gap: 14px; } .verdictIconWrap { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .verdictLabel { font-size: 20px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; line-height: 1.2; } .verdictSub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } /* Score arc */ .scoreWrap { display: flex; flex-direction: column; align-items: center; gap: 6px; } .scoreArc { filter: drop-shadow(0 4px 16px rgba(0,0,0,0.08)); } .scoreText { font-feature-settings: 'tnum'; } .scoreCaption { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; } /* Breakdown toggle */ .breakdownToggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-secondary); transition: all 0.15s ease; } .breakdownToggle:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); } .breakdownToggleLeft { display: flex; align-items: center; gap: 7px; } /* Breakdown */ .breakdown { overflow: hidden; } .breakdownInner { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; } .modelRow { display: flex; flex-direction: column; gap: 5px; } .modelRowHeader { display: flex; justify-content: space-between; align-items: center; } .modelName { font-size: 12px; font-weight: 600; color: var(--text-secondary); } .modelScore { font-size: 12px; font-weight: 700; color: var(--text-primary); } .modelBar { height: 6px; background: var(--bg-surface-3); border-radius: 99px; overflow: hidden; } .modelBarFill { height: 100%; background: linear-gradient(90deg, var(--accent) 0%, #4d94ff 100%); border-radius: 99px; } /* Quick stats */ .quickStats { display: flex; flex-direction: column; gap: 8px; background: var(--bg-surface-2); border-radius: var(--radius-md); padding: 12px 14px; } .statItem { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); } .statLabel { flex: 1; color: var(--text-secondary); font-weight: 500; } .statValue { color: var(--text-primary); font-size: 12px; font-weight: 600; } /* Artifacts */ .artifactsList { display: flex; flex-direction: column; gap: 10px; } .artifactsTitle { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; } .artifactRow { display: flex; align-items: flex-start; gap: 10px; } .severityDot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; } .sev_critical { background: var(--ai-generated); } .sev_high { background: var(--suspect); } .sev_medium { background: #a78bfa; } .sev_low { background: var(--text-muted); } .artifactContent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; } .artifactType { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; } .severityBadge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; text-transform: capitalize; letter-spacing: 0.2px; flex-shrink: 0; } .sevBadge_critical { background: var(--ai-generated-bg); color: var(--ai-generated); } .sevBadge_high { background: var(--suspect-bg); color: var(--suspect); } .sevBadge_medium { background: #ede9fe; color: #7c3aed; } .sevBadge_low { background: var(--bg-surface-3); color: var(--text-muted); }