@import "tailwindcss";
@import "@openai/apps-sdk-ui/css";
@source "./**/*.{ts,tsx,js,jsx,html}";
:root {
color-scheme: light dark;
--cc-bg: linear-gradient(145deg, #0b1220 0%, #12263f 42%, #193d5f 100%);
--cc-surface: rgba(12, 22, 37, 0.72);
--cc-border: rgba(138, 177, 214, 0.26);
--cc-text: #e6f2ff;
--cc-muted: #b1c8dc;
--cc-accent: #6fd3ff;
--cc-critical: #ff5d5d;
--cc-high: #ff9f43;
--cc-medium: #ffd166;
--cc-low: #56d39b;
--cc-shadow: 0 20px 40px rgba(0, 0, 0, 0.32);
}
html,
body {
margin: 0;
font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
color: var(--cc-text);
background: var(--cc-bg);
}
.cc-card {
position: relative;
padding: 1rem;
border-radius: 1rem;
border: 1px solid var(--cc-border);
background: var(--cc-surface);
box-shadow: var(--cc-shadow);
backdrop-filter: blur(12px);
}
.cc-header {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
margin-bottom: 1rem;
}
.cc-header h2 {
margin: 0;
font-size: 1.1rem;
letter-spacing: 0.01em;
}
.cc-eyebrow {
margin: 0;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.72rem;
color: var(--cc-accent);
}
.cc-meta {
margin: 0.3rem 0 0;
color: var(--cc-muted);
font-size: 0.9rem;
}
.cc-summary-grid {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.cc-chip {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.25rem 0.45rem;
border-radius: 999px;
border: 1px solid rgba(230, 242, 255, 0.2);
background: rgba(230, 242, 255, 0.08);
color: var(--cc-text);
}
.cc-chip-muted {
color: var(--cc-muted);
}
.cc-timeline {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.cc-timeline-item {
display: grid;
grid-template-columns: 10px 1fr;
gap: 0.65rem;
border: 1px solid rgba(230, 242, 255, 0.14);
border-radius: 0.85rem;
padding: 0.6rem;
background: rgba(17, 34, 53, 0.6);
}
.cc-marker {
border-radius: 999px;
min-height: 100%;
}
.cc-step-main p,
.cc-step-mini p,
.cc-edit-box p {
margin: 0.45rem 0 0;
color: var(--cc-muted);
line-height: 1.4;
}
.cc-step-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}
.cc-flags {
margin: 0.5rem 0 0;
padding-left: 1rem;
color: var(--cc-muted);
line-height: 1.4;
font-size: 0.88rem;
}
.cc-split-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
margin-top: 0.8rem;
}
.cc-pane {
border: 1px solid rgba(230, 242, 255, 0.16);
border-radius: 0.85rem;
padding: 0.6rem;
background: rgba(20, 39, 61, 0.55);
}
.cc-pane h3,
.cc-edit-box h3 {
margin: 0;
font-size: 0.95rem;
}
.cc-step-mini {
margin-top: 0.55rem;
border: 1px solid rgba(230, 242, 255, 0.14);
border-radius: 0.7rem;
padding: 0.45rem;
background: rgba(10, 22, 38, 0.45);
}
.cc-step-changed {
outline: 1px solid var(--cc-accent);
}
.cc-edit-box {
margin-top: 0.8rem;
border: 1px solid rgba(230, 242, 255, 0.16);
border-radius: 0.8rem;
padding: 0.6rem;
background: rgba(17, 34, 53, 0.45);
}
.cc-gauge-wrap {
margin: 0.9rem 0;
}
.cc-gauge-track {
width: 100%;
height: 0.85rem;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.13);
}
.cc-gauge-value {
height: 100%;
transition: width 260ms ease-in-out;
}
.cc-gauge-label {
margin-top: 0.4rem;
font-size: 0.86rem;
color: var(--cc-muted);
}
.cc-loading {
display: grid;
place-items: center;
gap: 0.75rem;
min-height: 180px;
}
.cc-spinner {
width: 34px;
height: 34px;
border-radius: 999px;
border: 3px solid rgba(255, 255, 255, 0.24);
border-top-color: var(--cc-accent);
animation: cc-spin 0.9s linear infinite;
}
.cc-status-active {
border-color: rgba(111, 211, 255, 0.65);
background: rgba(111, 211, 255, 0.2);
}
.cc-status-completed {
border-color: rgba(86, 211, 155, 0.65);
background: rgba(86, 211, 155, 0.2);
}
.cc-status-quarantined {
border-color: rgba(255, 93, 93, 0.65);
background: rgba(255, 93, 93, 0.22);
}
.cc-risk-critical {
background: rgba(255, 93, 93, 0.24);
border-color: rgba(255, 93, 93, 0.7);
}
.cc-risk-high {
background: rgba(255, 159, 67, 0.24);
border-color: rgba(255, 159, 67, 0.72);
}
.cc-risk-medium {
background: rgba(255, 209, 102, 0.24);
border-color: rgba(255, 209, 102, 0.72);
}
.cc-risk-low {
background: rgba(86, 211, 155, 0.22);
border-color: rgba(86, 211, 155, 0.7);
}
@keyframes cc-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 860px) {
.cc-split-grid {
grid-template-columns: minmax(0, 1fr);
}
.cc-header {
flex-direction: column;
}
.cc-summary-grid {
justify-content: flex-start;
}
}
