body{
font-family:Arial;
background:#0f172a;
color:#e2e8f0;
margin:0;
}

.container{
max-width:1100px;
margin:auto;
padding:30px;
}

header{
text-align:center;
margin-bottom:40px;
}

section{
margin-top:28px;
}

.section-block{
margin-top:52px;
padding-top:22px;
border-top:1px solid rgba(255,255,255,0.05);
}

h1{
color:#38bdf8;
margin:0;
font-size:clamp(1.9rem,4.6vw,2.7rem);
line-height:1.2;
}

h2{
margin-top:0;
margin-bottom:12px;
font-size:1.3rem;
}

p,li{
line-height:1.65;
}

.hero{
margin-bottom:26px;
}

.hero p{
margin:10px 0 0;
}

.hero-subtitle{
margin-top:16px;
font-size:1.05rem;
}

.hero-authority{
color:rgba(203,213,225,0.78);
font-size:0.86rem;
letter-spacing:0.01em;
margin-top:12px;
}

textarea,input,select{
width:100%;
padding:12px 13px;
margin-top:5px;
margin-bottom:15px;
background:#020617;
border:1px solid #334155;
color:white;
border-radius:6px;
}

textarea:focus,input:focus,select:focus{
outline:none;
border-color:#38bdf8;
box-shadow:0 0 0 3px rgba(56,189,248,0.18);
}

button{
padding:12px 20px;
background:#2563eb;
border:none;
border-radius:6px;
color:white;
cursor:pointer;
}

button:hover{
background:#1d4ed8;
}

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:20px;
}

.metric{
background:linear-gradient(160deg,#1e293b 0%,#172236 100%);
padding:20px;
border-radius:8px;
text-align:center;
border:1px solid rgba(255,255,255,0.06);
}

.metric h3{
margin:0;
color:#38bdf8;
font-size:2rem;
line-height:1.1;
}

.metric:nth-child(1) h3,
.metric:nth-child(2) h3{
color:#4ade80;
}

.metric:nth-child(3) h3,
.metric:nth-child(4) h3{
color:#f87171;
}

canvas{
margin-top:30px;
background:#020617;
padding:20px;
border-radius:8px;
max-width:100%;
}

/* table */

.results-table{
width:100%;
border-collapse:collapse;
margin-top:20px;
}

.results-table th{
padding:14px;
text-align:left;
border-bottom:1px solid #334155;
color:#94a3b8;
}

.results-table td{
padding:14px;
border-bottom:1px solid #1e293b;
}

.results-table tbody tr:nth-child(odd){
background:rgba(148,163,184,0.04);
}

.results-table tr:hover{
background:rgba(56,189,248,0.08);
}

.risk-row{
background:rgba(239,68,68,0.16) !important;
color:#fecaca;
}

.analysis{
background:#1e293b;
padding:20px;
margin-top:30px;
border-radius:8px;
line-height:1.6;
}

footer{
text-align:center;
margin-top:40px;
color:#64748b;
line-height:1.65;
}
.card { animation: glowPulse 6s ease infinite; }

.microcopy{
margin-top:10px;
margin-bottom:0;
font-size:0.9rem;
color:rgba(226,232,240,0.75);
}

#intervalTable{
overflow-x:auto;
}

/* ===== Workforce Suite Navbar ===== */

.suite-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  background: #0b1220;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.suite-logo {
  font-weight: 600;
  font-size: 15px;
  color: #e6edf3;
}

.suite-logo span {
  display: block;
  font-size: 11px;
  opacity: 0.6;
}

.nav-links {
  display: flex;
  gap: 18px;
}

.nav-link {
  font-size: 13px;
  color: #9fb3c8;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.nav-link:hover {
  background: rgba(0,150,255,0.12);
  color: #ffffff;
}

.nav-link--active {
  border: 1px solid #2ea8ff;
  color: #ffffff;
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .suite-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .nav-links {
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 18px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  textarea,
  input,
  select,
  button {
    font-size: 16px;
  }
}